[Web]AWS 웹 호스팅

선행과정

우선 AWS Route 53에 도메인 등록을 해놓고, 로컬에서 호스팅될 웹 디자인을 구현해 놓아야합니다.
(필자의 웹 디자인은 Vue.js로 잘 짜집기해서 만듬)

원리

1. 로컬에서 작업한 내용
2. AWS CLI를 사용해서 버킷에 업로드
3. 버킷에 업로드 된 소스를 Route 53 도메인 레코드에 연결

AWS 웹 호스팅

AWS에서 도메인을 구입하고 로컬에서 개발한 Vue.js 애플리케이션을 배포하는 과정은 다음과 같습니다:

1. AWS Route 53에서 도메인 구매 및 설정

   • AWS Route 53을 통해 도메인을 구매했다면, Route 53 콘솔에서 호스팅 영역을 생성하여 도메인을 관리할 수 있습니다.
   • 네임서버(NS) 레코드를 확인하고 필요시 도메인 등록기관에 설정합니다.

2. S3 버킷 생성 및 설정

   • S3 콘솔에서 새로운 버킷을 생성합니다. 버킷 이름은 도메인 이름과 동일하게 설정하는 것이 좋습니다.
     
     

   • 생성된 버킷의 속성 탭에서 정적 웹 사이트 호스팅을 활성화하고, 인덱스 문서 (예: index.html)와 오류 문서 (예: error.html)를 설정합니다.

   • 버킷 정책을 설정하여 퍼블릭 엑세스를 허용합니다. 예를 들어, 다음과 같은 정책을 설정할 수 있습니다:

     {
       "Version": "2012-10-17",
       "Statement": [
         {
           "Effect": "Allow",
           "Principal": "*",
           "Action": "s3:GetObject",
           "Resource": "arn:aws:s3:::platformlogics.com/*"
         }
       ]
     }

3. 로컬에서 Vue.js 애플리케이션 빌드

   • 로컬 개발 환경에서 Vue.js 애플리케이션을 빌드합니다. 일반적으로 다음 명령어를 사용합니다:

     npm run build

   • 빌드 결과물은 dist 폴더에 생성됩니다.
     

4. S3 버킷에 빌드 결과물 업로드

   • AWS CLI를 사용하여 빌드된 파일을 S3 버킷에 업로드합니다. CLI를 설치하고 설정한 후 다음 명령어를 실행합니다:

     aws s3 sync dist/ s3://platformlogics.com

   • AWS CLI 가 설치되지 않았다면 설치

   		brew install awscli

   		aws configure

   • AWS Access Key ID, AWS Secret Access Key, 기본 리전 이름, 기본 출력 형식을 입력합니다. Access Key와 Secret Key는 AWS Management Console의 IAM(Identity and Access Management) 서비스에서 생성할 수 있고, Access Key의 비밀번호는 한번만 보여주니 따로 .csv파일로 다운로드 해야됨. 필자는 '플랫폼로직' 디렉토리에 'AWS와 로컬 웹 연결키.numbers'로 따로 보관해놓음

5. Route 53에서 도메인 레코드 설정

   • Route 53 콘솔에서 호스팅 영역으로 이동하여 도메인에 대한 레코드를 설정합니다.
   • S3 버킷을 직접 사용하는 경우 A 레코드를, CloudFront를 사용하는 경우 CNAME 레코드를 설정합니다.

완성

이후 과정..

웹 디자인 수정후 빌드하고 싶다면, 해당 프로젝트로 간다음
1. build 명령어 실행하여 bist에 로드

     npm run build

2. 업데이트된 dist 파일 경로 이동

   cd dist

3. 버킷에 로드

     aws s3 sync . s3://platformlogics.com