GitLab CI+Nuxt.js+S3에서 자동 배포

전제

· Nuxt.js 프로젝트를 GitLab에서 관리합니다.

절차

① 루트 디렉토리에 .gitlab-ci.yml 만들기

② 써 간다(코멘트로 해설)

.gitlab-ci.yml

# 実行される順番 各jobにてstage:でネーミング
stages:
  - build
  - deploy

# ビルド
build:
  image: node:latest # node最新版
  stage: build # ステージ名
  only:
    - master # masterブランチで発動
  cache:
    paths:
      - node_modules/ # キャッシュ 別フォルダにnuxtアプリがある際はnuxtApp/node_modules/のように記載する
  script:
    - yarn install # 依存関係のインストール
    - yarn generate # ビルド
  artifacts:
    paths:
      - ./dist # distフォルダを次の世代に引き継ぐ これもnuxtアプリが別フォルダにある際は./nuxtApp/distのように記載する

# S3にアップロード
deploy:
  image: python:latest # python最新版
  stage: deploy # ステージ名
  only:
    - master # masterブランチで発動
  script:
    - pip install awscli # awscliの導入
    - aws s3 sync ./dist s3://your-s3-bucket-name # 引き継がれたdistフォルダをs3にアップ これもnuxtアプリが別フォルダにある際は./nuxtApp/distのように記載する

③S3 권한이 있는 IAM 사용자 생성

AWS 콘솔에서 IAM으로 이동하여 사용자를 생성합니다.
"기존 정책 첨부"에서 "S3 FullAccess"를 선택합니다.
최종 화면에서 인증 정보가 나오므로 삼가한다.

④ 인증정보를 GitLab로 설정

GitLab 콘솔에서 Settings>CI/CD>Variables로 이동합니다.

여기에서
· AWS_ACCESS_KEY_ID
· AWS_SECRET_ACCESS_KEY
두 가지 설정

⑤ 막상 배포! (master 브랜치에 직접 push하거나 병합)

⑥ 결과

캐시를 활용하고 있으므로 스트레스 없는 속도로 빌드된다.
자신이 참가하고 있는 프로젝트는 비교적 볼륨이 있는 nuxt 앱이었지만, 처음은 7분, 캐쉬 후(2회째 이후)는 2분 정도로 종료했다.