개시하다

Vue.js를 공부할 때 자기소개 사이트를 만들어 봤어요.
이번에는 제작된 사이트의 공개 방법이다.

준비물

AWS 계정

SPA(Vue.js)

AWS Amplify Constore 사용

AWS Amplify Constore

정적 사이트나 한 페이지의 웹 응용 프로그램의 개발, 디버깅과 위탁 관리를 위한 상세한 작업 절차를 제공하는 서비스.

실천하다

이번에는 Amplify를 사용하지 않는 공개적인 방법과 Amplify를 사용하는 방법을 실천하겠습니다.

수동 디버깅, 브라우저에서 액세스

로컬 PC로 구축되어 정적 파일 생성

개체 디렉토리

$ yarn build

디렉터리에'dist'가 있는지 확인하고 정적 파일을 생성합니다.

s3통을 제작하여 정적 사이트로 공개.

AWS Console에서 "S3"을 읽어들입니다.

임의의 이름으로 통을 만듭니다.

속성의 Static website hosting을 선택합니다.

이 섹션을 사용하여 호스트 웹 사이트를 선택합니다.

색인 문서를 설정하고 저장합니다.

기본적으로 공용 접속을 막기 때문에 설정을 변경합니다.

액세스 관리를 선택합니다.

[편집]을 선택하여 [모든 공용 액세스 블록]의 확인을 취소하고 저장합니다.

구간 정책을 추가합니다.

액세스 관리를 선택합니다.

세그먼트 정책을 선택합니다.

다음 정책 편집기를 입력하고 저장합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::{{s3のバケット名}}.com/*"
            ]
        }
    ]
}

dist 파일을 만든 통에 업로드

정적 웹 사이트 호스팅 S3 구간 설정 방법

액세스 속성 Static website hosting의 단점

사이트 오픈 후 성공.

Amplify 를 사용하지 않고 수동으로 액세스를 추출하는 방법입니다.

Amplify Constore를 사용하여 설계

CodeCommiit에 자체 창고를 만듭니다.

AWS Console 서비스에서 "CodeCommiit"를 검색합니다.

오른쪽 위에 있는 창고 만들기를 클릭합니다.

창고 이름을 입력하고 [만들기]를 클릭합니다.

이렇게 하면 CodeCommiit에 자신의 창고를 만들 수 있습니다.

생성된 SPA를 자신의 저장소에 제출합니다.

방금 만든 창고를 어디서나 복제합니다.

$ git clone ssh://git-codecommit.xxxxxx.amazonaws.com/xxxxx

이미 clone 디렉터리에 생성된 SPA(※ 전체 디렉터리는 아님)

개체 디렉토리

$ git add .

$ git commit -m "{{任意のメッセージ}}"

$ git push origin master

CodeCommiit에서 push가 있는지 확인합니다.

AWS 콘솔에서'AWS Amplify'를 검색합니다.

"Deploywith the Amplify Control"의 "GET STARTED"를 클릭합니다.

From your existing code에서 방금 CodeCommiit에서 code를 push 하였습니다. 선택한 후 Continue를 클릭하십시오.

자신이 만든 창고와 지점'마스터'를 선택하고 다음

을 클릭

임의의 응용 프로그램의 이름을 입력하고 구축 설정을 다음과 같이 덮어씁니다.

version: 1
frontend:
phases:
preBuild:
  commands:
    - nvm install v12.16.2
    - nvm use v12.16.2
    - npm install -g yarn
    - yarn install
    - node -v
build:
  commands:
    - yarn run build
artifacts:
baseDirectory: dist/
files:
  - '**/*'
cache:
paths:
  - node_modules/**/*

신규 Role>다음을 클릭

저장 후 진도표

를 클릭

Amplify가 자동으로 전문적인 시각, 구축, 디자인, 검증을 할 때까지 기다립니다.

성공 후 Provide ~ 디자인에 검사 표시가 있습니다.

도메인 이름 URL을 클릭하면 화면이 표시됩니다.

공개된 사이트를 변경하다

Amplify Constore에서는 코드를 커밋할 때마다 프런트엔드와 백엔드가 단일 워크플로우로 추출됩니다.
이것은 디버깅이 성공적으로 끝났을 때만 웹 프로그램을 업데이트할 수 있는 프로그램의 전단과 후단 사이의 모순을 없앨 것이다.
AWS의 사용 설명서에는 이러한 내용이 나와 있습니다.
이번에는 변경 제출까지 더해 실제 업데이트 여부를 확인한다.

마스터 지점만 존재하기 때문에 새로운 지점을 만들고 이동합니다.

$ git branch develop origin/master

$ git checkout develop

개발자로 이동했기 때문에 원본 코드를 변경하고 제출하고 전송합니다.

$ git add .

$ git commit -m 'commit'

$ git push origin develop

AWS 컨store를 통해 확인한 분기에'develop'이 추가되었습니다.

AWS 콘솔에서 종료 요청 작성을 클릭합니다.

목표를'마스터', 원본을'develop'으로 선택하고 비교를 클릭합니다.

변경 내용이 화면 아래에 표시되기 때문에 오류가 없으면 제목을 입력하고 "pull 요청 만들기"를 누르십시오.

클릭 확대 요청 화면에 방금 자신이 만든 요청이 있습니다.

오른쪽 상단의'합병'을 클릭하면 아래 화면이 표시되며'합병 요청'을 클릭한다.(※ 분기를 남기고 싶을 때는 삭제 검사를 취소)

Amplify Con Nal 자동 생성 프로그램

마지막으로 화면을 업데이트하고 변경하면 성공합니다.

만약 Amplify 없이 변경되는 일련의 절차가 있다면
1. 소스 코드를 수정한 후 수동으로 구축
2. 공개된 s3에 업데이트된 CD 업로드
이런 절차는 필요한 것이다.

자동 고장의 장점

자동화를 통한 기록

목적지로 돌아가고 굴러갈 수 있음