GitLab CI + Nuxt.js + S3で自動デプロイ

3670 ワード
GitLab-CI nuxt.js S3 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分程度で終了した。