GitLab CIによるNetflifyへの自動デプロイ

5 min read読了の目安(約4700字

はじめに

GitLab CIを使ったNetlifyへの自動デプロイの仕組みを試したので、その実装方法を記事に残したいと思います

今回のコード

今回紹介するコードは以下のリポジトリで公開しています。

https://gitlab.com/shinji.uyama/nuxt_netlify

デプロイフローの概要

デプロイのフローの概要は以下の図の通りです。

GitLabのリポジトリに変更内容をPushすると、それを起点にGitLab CIが実行され、Netlify上の内容の更新を実行します。

今回は、以下のようにGit Push先のブランチ名に応じてデプロイを実行する手順を説明します。

  • productionブランチ
    • 本番環境へのデプロイ

.gitlab-ci.yml

次に、今回作成したGitLab CIの設定ファイル(.gitlab-ci.yml)の内容の説明を行います。

設定ファイルの内容

まず、以下が今回作成した設定ファイルの全体です。

default:
  image: node:15.4.0

stages:
  - production-deploy

production-deploy:
  stage: production-deploy
  only:
    - production
  script:
    - npm install
    - npm run generate
    - npm install -g netlify-cli
    - npx netlify deploy --prod --site $NETLIFY_SITE_ID --auth $NETLIFY_AUTH_TOKEN --dir=./dist

次に、各項目の説明を行っていきます。

stages

今回は、本番用(production-deploy)のデプロイ手順を作成しています。

stages:
  - production-deploy

stage: production-deploy

次に、本番環境用のCIフローに説明します。

production-deploy:
  stage: production-deploy
  only:
    - production
  script:
    - npm install
    - npm run generate
    - npm install -g netlify-cli
    - npx netlify deploy --prod --site $NETLIFY_SITE_ID --auth $NETLIFY_AUTH_TOKEN --dir=./dist

今回のCIフローは productionブランチにPushしたときのみ 実行されて欲しいため、onlyproductionを指定 しています。

次にscriptでは実際のデプロイコマンドを指定します。今回はNuxt.jsのSSGで静的サイトを作成する際のビルドコマンドを指定しています。

そして、Netlifyへデプロイするために、netlify-cliのインストールを行い、netlify-cliによるデプロイコマンドを実行します。netlify deployコマンドに指定しているオプションは以下の通りです。

オプション名 内容
dir デプロイするファイルがあるディレクトリ
prod 本番環境へのデプロイを行うかの判別フラグ
site デプロイ先のNetlifyのサイトID
auth Command Lineによるデプロイをする際のNetlifyの認証トークン

指定するオプションのうちsiteauthについては、秘匿情報であるためGitLab CIに設定した環境変数から取得を行います。こちらについての設定方法は後述します。

netlify-cliで利用する認証情報の取得

次に、先ほど説明をしたnetlify-cliの利用する認証情報(site, auth)の取得手順を説明します。

まず、siteに指定するNETLIFY_SITE_IDは、Netlifyページの「overview > site setting > Site information」に表示されているAPI IDです。

次に、authに指定するNETLIFY_AUTH_TOKENの取得手順について説明します。

Netlifyの個人設定ページにアクセスし、Personal access tokenの作成を行います。

Personal access token作成ページで Description of your tokenにTokenの説明を記載します(自分が分かる内容であれば、内容は何でも良いです)

Generate tokenボタンをクリックすると、Tokenが表示されます。このTokenの値が、この後に利用するNETLIFY_AUTH_TOKENの値になりますので、控えておいてください。

以上で、netlify-cliで必要な認証情報の取得は完了です。

GitLab CIの環境変数の設定

次に、先ほど取得したNetlifyの認証情報をGitLabのCIの環境変数に設定します。

GitLabのサイドメニューの「Settings > CI/CD」経由でアクセスできるページ内にVariablesという項目があります。

「Expand」ボタンをクリックして表示される内容のうち、「Add Variable」ボタンをクリックして、環境変数の設定フォームを表示します。

設定フォームから環境変数を設定します。追加する項目はNETLIFY_SITE_IDNETLIFY_AUTH_TOKENの2つです。

環境変数の設定するときは、Mask variableのチェックボックスを指定します。 今回設定する値は外部公開すべきではない情報なので、Mask表示されるように設定します。

GitLab CIによるデプロイを試す

以上で、全ての設定が完了したので、GitLab CIによるデプロイを試します。

デプロイが実行されるトリガーはproductionブランチの内容に変化が起きた時です。主に以下の操作がトリガーとして挙げられます。

  1. productionブランチに内容変更のコミットをgit push
  2. productionブランチに対する、内容変更のマージリクエストがマージされた時

そのため、こちらについては各自の運用方法に合わせてください。

CIの実行状況は「GiLabのサイドメニュー > CI/CD > Piplines」から確認できます。

CI実行一覧から、指定の実行CIをクリックすると、実行CI詳細を確認できます。

実行CI詳細ページのpiplinesの中に表示されているproduction-deployをクリックすると、より詳細な実行情報を確認できます。

以下に、本番デプロイが完了した際の実行情報を載せています。正常にNetlifyへデプロイが完了していることが確認できます。

終わりに

今回は、GitLab CIを使った、Netlifyへの自動デプロイの設定手順について説明を行いました。

今回初めてGitLab CIを使ったのですが非常に簡単に設定することができました(※CI自体はCircleCIは使ったことがあります)

また、NetlifyのCliが完備されていること、認証情報がUIから簡単に準備できる点も、非常に自動デプロイ手順の実装を簡単にできた要因です。

今後もGitLab CIとNetlifyについて、色々触っていきたいと思いました。

以上です。