[nuxt.js] GitHub Actions+Netlifyでnuxtプロジェクトをデプロイする

NetlifyはGitHubと連携しておけば自動的にビルド&デプロイしてくれる便利なサービスですが、無料プランではビルド時間が月300分までとなっています。小規模なサイトではこれでも問題ないですが、比較的規模の大きいプロジェクトになってくると、月300分では足りなくなります。

例えば、当ブログの管理人が作成した次のサイトは、動的ルーティングの書き出しが数千件にも及びますので、Netlifyでのビルドでは苦しくなってきました。そこで、GitHub ActionsでビルドしてNetlifyにデプロイするように変更しました。

Github Actions ではパブリックリポジトリは完全無料。プライベートリポジトリでも 2000 分/月までビルド時間を使うことが許されていてます。

ビルド&デプロイ設定の手順

ビルド&でブロイ設定の手順は次の通りです。順番に見ていきましょう。

  • NetlifyでアクセストークンとサイトIDを取得する
  • GitHub seacret にアクセストークンとサイトIDを設定する
  • GitHub Actions にworkflowを設定する

Netlifyの設定

アクセストークン

Netlifyのアカウントページを開きます。

「Personal access tokens」内の「New access token」をクリックします。

任意のトークン名を入力して「Generate token」をクリックします。

アクセストークンが発行されましたので、メモしておきます。

サイトID

Netlifyの「Site details」に「APP ID」が記載されていますので、メモしておきます。

GitHub Actionsの設定

seacretsの設定

GitHubの「Settings」>「Seacrets」から「New repository secret」をクリックします。

Nameは「NETLIFY_AUTH_TOKEN」としました。Valuesには先ほど発行されたトークンを入力します。

同様にサイトIDも「NETLIFY_SITE_ID」として設定します。

workflowの作成

アクセストークンとサイトIDの設定ができたので、GitHub Actionsのworkflowを作っていきます。リポジトリ内の.github/workflowsディレクトリ にnetlify.ymlを作成します。

ローカルで作成してpushしても良いですし、GitHub Actionsから作成することもできます。

.github/workflows/netlify.yml
name: Netlify

on:
  push:
  pull_request:
    types: [opened, synchronize]

jobs:
  build:
    runs-on: ubuntu-18.04

    steps:
      - uses: actions/checkout@v2

      # 「./dist」にビルド結果が生成する
      - uses: actions/setup-node@v1
        with:
          node-version: 14.x
      - run: npm ci
      - run: npm run build
      - run: npm run generate

      # Netlifyにデプロイする
      - run: npx netlify-cli deploy --dir=dist  --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

ビルドするブランチを限定する

ビルドするブランチを限定したい場合、on pushの部分を次の通り変更します。

on:
  push:
    branches:
      - master

こちらもご覧ください

本ブログの管理人がNuxt.jsで開発したサイトです。