【Next.js】さくらのレンタルサーバーへのデプロイを自動化する（GitHub Actions）

やりたいこと
環境
手順の流れ
①まずはNext.js側の設定
1. 動作確認
②GitHub Actionsのymlを作成する
③環境変数を設定する
④さくらのレンタルサーバー側でIPアドレスフィルタを無効にする
⑤デプロイ

やりたいこと

Next.jsで作成したwebサイト（SSG）を、さくらのレンタルサーバーにデプロイする作業を自動化する。

自動デプロイのタイミングは

手動でボタンを押す
mainブランチへのマージ（厳密にはmainにpushされたとき）

環境

yarn 4.1.1
Next.js 14.1.0
App Routerを利用
Static Exportsを使い、静的サイトを生成

手順の流れ

Next.jsのSSG設定を行う
GitHub Actionsのymlを作成する
レンタルサーバーにFTP接続するためのSecretsを設定する
レンタルサーバー側のIPアドレス制限を解除する

①まずはNext.js側の設定

Static Exportsの機能を利用するためには、next.config.jsの修正が必要。

next.config.jsを以下のように修正する。

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export', // これを追加
}
 
module.exports = nextConfig

デフォルトでは、ルートディレクトリ直下にoutというディレクトリが生成されるが、
オプション指定でこのディレクトリは変更可能。

Deploying: Static Exports | Next.js

Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use featu...

動作確認

{
  "name": "sample",
  "version": "0.1.7",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
// 略

package.jsonは上記のようになっているので、yarn buildを実行する。

$ ls
LICENSE          jest.config.mjs  next.config.js   out/             public/          tsconfig.json
README.md        next-env.d.ts    node_modules/    package.json     src/             yarn.lock

outディレクトリが生成されていることが確認できる。

②GitHub Actionsのymlを作成する

最初に、完成品のymlは以下の通り。

.github/workflow/deploy.yml

name: "Deploy Sample App"

on:
  # これをつかうと、手動デプロイできる
  workflow_dispatch:
  # mainブランチにpushがあったときにも実行される
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    # Nodeのバージョンをここで一括管理
    strategy:
      matrix:
        node-version: [20.x]

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}

      # yarn v4を利用しているので
      - run: corepack enable && yarn install --immutable

      # 静的ファイルを生成する
      - name: Build App
        run: yarn build

      - name: FTP Deploy
        # FTPデプロイできるアクションがあるので、それを利用する
        uses: SamKirkland/FTP-Deploy-Action@4.3.0
        # FTP接続に必要な環境変数を設定する
        with:
          # 例： username.sakura.ne.jp
          server: ${{ secrets.FTP_SERVER }}
          # 例： username
          username: ${{ secrets.FTP_USERNAME }}
          # FTPパスワード(sshログインするときとかに使うやつ)
          password: ${{ secrets.FTP_PASSWORD }}
          # yarn buildによって生成される静的ファイルのディレクトリ
          local-dir: ./out/
          # さくらのレンタルサーバー上の、デプロイしたいディレクトリ
          # 例: /home/username/www/dev/
          server-dir: /home/${{ secrets.FTP_USERNAME }}/www/${{ secrets.FTP_DEPLOY_DIR }}
          protocol: ftps

※FTPへの認証情報は、ベタ書きせずに必ずSecretsを使って設定すること。