nuxtをgithub actionsでnetlifyに自動デプロイする

5586 ワード
GitHub nuxt.js Netlify GitHub テキストリンク

netlifyはgitと連携しておけば勝手にビルド＆デプロイをしてくれるのでめちゃくちゃ楽なんだけど、無料プランではビルド時間が月300分までとなっている。
これを回避するためにgithub actionsを使ってgithub側でビルドしてあげよう。という作戦。

何よりも最初に注意しておくべきなのは、1度gitと連携してしまうと勝手にビルドする設定になってしまうこと。
自動ビルドを停止することはできるけど、それをやるとデプロイまで停止される。
そのためこの方法を取るときは、gitとは連携せずに、ファイルをドラッグアンドドロップで追加することでサイトを追加する方法を取る必要がある。
(運営に連絡したら連携済みのgitとの連携を解除してくれるみたいだけど)

ドラッグ&ドロップする画面スクショ

設定

githubとnetlifyの設定はぐぐったらわかると思うので割愛します。
トークンとサイトIDの設定だけしておいてください。

【参考】
https://qiita.com/nwtgck/items/e9a355c2ccb03d8e8eb0

あとは.github/workflow.deploy.ymlを追加するだけ。
ここで注意したいのはnetlify/actions/cliの部分で--prodを使うこと。
これはぐぐってもよくわからなかったけど、--prodをつけないとnetlifyのデプロイがDeploy Previewになってしまい、publishedにならない。
このせいで結構困ったけど、--prodをつけたらちゃんと自動でデプロイしてくれた。

github/workflow.deploy.yml
name: production deploy

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-18.04
    env:
      GITHUB_TOKEN: ${{ secrets.GIT_TOKEN_COVID19 }}
    steps:
      - uses: actions/checkout@v2
        with:
          ref: master

      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'

      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      - run: yarn install --frozen-lockfile
      - run: yarn run test
      - name: generate
        run: |
          yarn run generate:deploy --fail-on-page-error

      - name: Deploy
        uses: netlify/actions/cli@master
        with:
          args: deploy --dir=dist --prod
        env:
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
          NETLIFY_AUTH_TOKEN: ${{ secrets.GIT_TOKEN_COVID19 }}

補足 --prod問題

公開されるデプロイには緑のpublishedというマークがつくが、gitにpushしてもnetlify上ではDeploy Previewというデプロイが表示されるだけで、publishedにならない。

ymlファイルのnetlify/actions/cliの部分で--prodをつけたら解決した。
ぐぐってもよくわからなかったけど、--prodはproductionの略なのかな？