vue.js로 작성한 작은 것을 S3+CloudFront로 공개하고 싶어서
여러가지 조사했으므로 메모.
드디어 전부터 신경이 쓰인 TravisCI도 사용해 보았다

절차 노트

1. travis cli 설치

$ gem install travis

2. IAM에서 사용자를 만듭니다.

S3에 대한 전체 액세스 정책을 적용합니다.

3. S3에서 버킷을 만듭니다.

버킷 이름은 웹 사이트 호스팅에서 게시 할 때 FQDN이어야합니다

静的ウェブサイト > ウェブサイトホスティングを有効にする 에 체크하기

インデックスドキュメント 에 index.html 을 지정

끝점이 {{버킷 이름}}.s3.amazonaws.com이어야 합니다.

4. .travis.yml 설정

.travis.yml 파일을 다음과 같이 만듭니다

.travis.yml

language: node_js
node_js:
- "6"
before_deploy:
- npm run build
deploy:
  provider: s3
  bucket: {{bucket名}}
  region: ap-northeast-1
  endpoint: {{bucket名}}.s3-ap-northeast-1.amazonaws.com
  skip_cleanup: true
  local-dir: dist
  on:
    branch: master

배포 전에 npm run build를 실행하도록 지정npm install , npm test 는 기본적으로 실행되었습니다.

AWS S3에 대한 액세스 키와 비밀 키 추가

$ travis --add deploy.access_key_id {{access_key_id}}
$ travis --add deploy.secret_access_key {{secret_access_key}}

.travis.yml에 다음과 같이 액세스 키와 비밀 키가 추가됩니다.

  access_key_id:
    secure: xxxxxxxxx
  secret_access_key:
    secure: xxxxxxxxx

※이것을 공개해 버려도 좋은 것인지, 잘 모르겠다.

이것으로 git push origin master 하면, S3 쪽에 빌드한 파일을 업로드 할 수 있다(할 것)

5. CloudFront에서 Distribution 만들기

Origin Domain Name에 이전 S3 엔드 포인트를 지정합니다 (풀다운에서 후보가 표시됨).

Restrict Bucket Access 의 Yes 확인란

Origin Access Identity 는 Create a New Identity 를 지정한다

Comment는 적당하게 지정

Grant Read Permissions on Bucket 에 Yes ~를 지정한다 (S3의 액세스 정책을 갱신해 준다)

Alternate Domain Names(CNAMEs)에 게시 할 FQDN을 지정합니다.

Default Root Object 에 index.html 설정

조금 시간이 걸리지만 배포가 만들어지고,
xxxxxx.cloudfront.net이라는 도메인이 생성됩니다.

6. Route 53 설정

Route53에서 설정할 도메인의 CNAME 레코드 값에 xxxxxx.cloudfront.net을 지정합니다.

감상

S3에서 정적 호스팅, TravisCI에서 배포가 생각보다 쉬웠다.
다만 access_key와 secret_key는 공개해도 좋을지 잘 모르더라도 야만한다. . .
github.com에서 조사한 결과 대부분의 사람들은 환경 변수에서 가져온 것 같습니다.
(그냥 일부는 공개했다)