GitHub ActionsでNowにNext.jsをデプロイする

こんにちはかみむらです。現在Next.js + microCMSでポートフォリオを作成していて、ホスティングサービスにNowを利用しています。

NowはNext.jsと同じZeit社が運営しています。特徴として、NowのCLIライブラリを使えば、Next.jsアプリケーションを1コマンドで簡単にデプロイできます。

例えば、ホスティングしたいプロジェクト上で、下記のCLIコマンドを打つだけでデプロイできます！！素晴らしい！！

$ now

そんなわけで、今回はGitHub Actionsを使ってCI/CD経由でNowにデプロイしてみます。

前提

Next.jsの導入記事はこちらです。Next.jsプロジェクトは、GitHubのリポジトリにpushされてることを前提にします。
code-log.hatenablog.com

Nowにデプロイするので、アカウントを作成してください。
https://zeit.co/

Nowのトークンを作成

まずは、デプロイに必要なトークンを作成します。NowのダッシュボードからSettings > TokensからCreateをクリックしてください。

そして、トークンを識別する名前を入力して、CREATE TOKENをクリックして作成しましょう。

トークンはGitHubのリポジトリ上のSettings >Secretsから登録します。NameをZEIT_TOKENにして、Valueには作成したトークンの値を入れます。

GitHub ActionsのCI/CDファイル作成

GitHub ActionsでCI/CDを回すためにNext.jsのプロジェクト上で、.githubフォルダと、workflow.ymlファイルを作成します。

$ mkdir .github
$ touch .github/workflow.yml

こちらがworkflow.ymlの全体像がこちらです。重要なところを説明していきます。

.github/workflows.yml

name: Deploy to Now

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [8.x, 10.x, 12.x]
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: yarn install
      env:
        CI: true
  deploy:
    name: Publish to prod
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: amondnet/now-deployment@v1
        with:
          zeit-token: ${{ secrets.ZEIT_TOKEN }}
          now-args: '--prod'

name: Deploy to Now

on: [push]

最初のname はワークフローの名前です。次のon でリポジトリへのpush時に、このワークフローが実行することを定義しています。

deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: amondnet/now-deployment@v1
        with:
          zeit-token: ${{ secrets.ZEIT_TOKEN }}
          now-args: '--prod'

そして、こちらがNowにデプロイするjobです。amondnet/now-deployment@v1でNowのトークンを指定してあげるとデプロイできます。

そしてNow CLIには、preview deploy(本番のURLとは別の、プレビューするためのURLが発行される)とproduction deploy(実際のURLにデプロイされる)があります。

now-argsに--prodを指定すると、production deployができます。

実際の環境ではブランチごとに、preview deployとproduction deployを分ける方がよさそうです。

github.com

これでデプロイする準備ができました。作成したフォルダとファイルをGithubにpushしてみましょう。

デプロイ

GitHubのリポジトリにプッシュすると、GitHub ActionsのCI/CDが発火されます。自分のリポジトリから、ワークフローを確認することができます。

Nowのダッシュボードにいくと、デプロイが成功しています。

最後に

今回はGitHub ActionsでNowにデプロイしてみました。今までCricleCIしか使ったことがなかったので、いい経験になりました。私のプロジェクトでも積極的にGitHub Actionsを使っていきます。

参考

github.com