AWS CLI를 통한 Vue.js Web App 배포

사전 준비 사항

 : 배포를 위한 Vue.js Web App 빌드된 파일 및 폴더

1.

 : AWS CLI 설치와 관련하여 하기의 링크 참조

  > Windows에 AWS Command Line Interface 설치

2.

 : AWS IAM 계정 관련하여 하기의 링크 참조

  > AWS IAM 사용자 및 그룹, 정책 생성

3.

 : 로컬 환경에서 AWS CLI configure 구성 관련하여 하기의 링크 참조

  > Wiindows에서 AWS CLI 관련 configure 구성

4.

5.

 : 배포할 프로젝트가 위치한 경로로 이동, 여기서는 "c:\workspace\vue\myapp"가 해당 프로젝트

C:\Users\Admin>cd c:\workspace\vue\myapp
 
c:\workspace\vue\myapp>
 

6.

 : vue cli를 통해 S3에 배포할 것이기 때문에 노드 패키지 매니저로 관련 플러그인 설치

c:\workspace\vue\myapp>npm add vue-cli-plugin-s3-deploy
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 
+ vue-cli-plugin-s3-deploy@3.0.0
added 13 packages from 64 contributors and audited 15270 packages in 13.744s
found 0 vulnerabilities
 
 
c:\workspace\vue\myapp>
 

7.

 : 설치한 플러그인을 호출하여 배포를 위한 설정을 진행

c:\workspace\vue\myapp>vue invoke s3-deploy
? How do you want to authenticate with AWS? Environment variables: AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, etc.
? Which AWS region hosts the bucket? ap-northeast-2
? Name of the S3 bucket: bucket.myapp
? Create bucket if it does not exist? Yes
? Enable Static Site Hosting on bucket? Yes
? Filename of static index page: index.html
? Filename of static error page: index.html
? Where are your built files? dist
? Which files should be deployed? **
? Where in the bucket should the files be deployed? /
? Which Access Control List (ACL) setting should be applied to deployed files? public-read
? Enable PWA deploy (disables caching of certain files) options? No
? Enable invalidation of a CloudFront distribution on deploy? No
 
🚀  Invoking generator for vue-cli-plugin-s3-deploy...
✔  Successfully invoked generator for plugin: vue-cli-plugin-s3-deploy
   The following files have been updated / added:
 
     src/views/Todo.vue
     vue.config.js
     package-lock.json
     package.json
     public/index.html
     src/App.vue
     src/main.js
     src/router.js
 
   You should review these changes with git diff and commit them.
 
 
c:\workspace\vue\myapp>
 

8.

 : 배포를 위한 설정 정보를 바탕으로 CLI를 통해 순차적으로 배포 과정 진행

c:\workspace\vue\myapp>npm run deploy
 
> myapp@0.1.0 deploy c:\workspace\vue\myapp
> vue-cli-service s3-deploy
 
{"awsProfile":"default","region":"ap-northeast-2","bucket":"bucket.myapp","createBucket":true,"staticHosting":true,"staticIndexPage":"index.html","staticErrorPage":"index.html","assetPath":"dist","assetMatch":"**","deployPath":"/","acl":"public-read","pwa":false,"enableCloudfront":false,"uploadConcurrency":5,"pluginVersion":"3.0.0"}
 INFO  Options: {"awsProfile":"default","region":"ap-northeast-2","bucket":"bucket.myapp","createBucket":true,"staticHosting":true,"staticIndexPage":"index.html","staticErrorPage":"index.html","assetPath":"dist","assetMatch":"**","deployPath":"/","acl":"public-read","pwa":false,"enableCloudfront":false,"uploadConcurrency":5,"pluginVersion":"3.0.0"}
 INFO  Bucket: bucket.myapp does not exist, attempting to create.
 INFO  Bucket: bucket.myapp created.
 INFO  Static Hosting is enabled.
 INFO  Deploying 14 assets from c:\workspace\vue\myapp\dist\ to https://s3-ap-northeast-2.amazonaws.com/bucket.myapp/
 INFO  (1/14) Uploaded js/chunk-05147150.db13258f.js.map
 INFO  (2/14) Uploaded js/chunk-05147150.db13258f.js
 INFO  (3/14) Uploaded js/app.e6857a6f.js.map
 INFO  (4/14) Uploaded js/app.e6857a6f.js
 INFO  (5/14) Uploaded js/chunk-vendors.ed2ca4b2.js
 INFO  (6/14) Uploaded js/about.72f7e6cd.js
 INFO  (7/14) Uploaded css/chunk-05147150.4bf1e231.css
 INFO  (8/14) Uploaded img/logo.82b9c7a5.png
 INFO  (9/14) Uploaded js/about.72f7e6cd.js.map
 INFO  (10/14) Uploaded css/chunk-vendors.ac0ebac2.css
 INFO  (11/14) Uploaded css/app.aea4cb45.css
 INFO  (12/14) Uploaded index.html
 INFO  (13/14) Uploaded favicon.ico
 INFO  (14/14) Uploaded js/chunk-vendors.ed2ca4b2.js.map
 INFO  Deployment complete.
 
c:\workspace\vue\myapp>
 

9.

 : AWS Management Console에 접속하여 S3 확인

 9-1. 배포 전

 9-2. 배포 후

* 리전 설정 시 서울로 지정했음에도 불구하고 미국 동부 지역에 생성된 것으로 보아 버그가 아닐까 하는 의문...

 > 위와 같은 일을 방지하기 위해 버킷을 AWS 관리 콘솔에 접속하여 서울로 지정하여 생성한 후 CLI로 배포를 하는 방법이 있으니 참고

10.

 : 엔드포인트를 확인 후 접속

 10-1. Home

 10-2. Todo