microCMS × Next.jsで静的ビルドしたソースコードをレンタルサーバーにデプロイする方法

Gitとはバージョン管理システムのことで、コードベースで変更履歴を管理するためのデータベースを作成することをいいます。ファイルの変更履歴を追跡し、異なるバージョン間で変更を比較したり統合することができます。

next.config.jsに以下の内容をコピーしてペーストします。

const isProd = process.env.NODE_ENV == "production"
output: isProd ? 'export' : ""

buildを実行するとoutフォルダが作成され、その中に静的ファイルが出力されます。Next.jsでは静的ファイルの出力先がoutフォルダになっています。outフォルダは.gitignoreファイルで除外されているため、リポジトリに含まれずデプロイされません。

outフォルダをデプロイするために以下の内容で.git-ftp-includeファイルをプロジェクトルートに作成します。

!out/

FTPを使用してレンタルサーバーにデプロイするための設定をします。FTP接続時に必要な以下の情報を控え、リポジトリに暗号化された秘密情報を作成する。

microCMS接続時に必要な以下の情報を控え、リポジトリに暗号化された秘密情報を作成する

Github Actionsで変数を扱いたい場合プロジェクトのSettings → Secrets and variables → Actionsを選択New repository secretをクリックして、変数のペアを入力する

https://docs.github.com/ja/actions/security-guides/using-secrets-in-github-actions#creating-encrypted-secrets-for-a-repository

• 「Actions」>「set up a workflow yourself」をクリック
• 任意のファイル名を設定（本記事ではftp-deploy.ymlとする）
• 以下の内容をコピーして「Edit new file」にペースト

name: FTP Deploy

on:
  push:
    branches: [ main ]
  repository_dispatch:
    types: [update-posts]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16.x]
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: npm

      - run: |
          npm ci
          npm run build --if-present
        env:
          NEXT_PUBLIC_SERVICE_DOMAIN: ${{ secrets.NEXT_PUBLIC_SERVICE_DOMAIN }}
          NEXT_PUBLIC_API_KEY: ${{ secrets.NEXT_PUBLIC_API_KEY }}

      - name: FTP
        uses: SamKirkland/FTP-Deploy-Action@4.3.3
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: ${{ secrets.FTP_SERVER_DIR }}
          local-dir: ./out/
          dangerous-clean-slate: false