write ahead log

ロールフォワード用

Next.jsで作った静的サイトをGitHubActionsで自動デプロイしたい

GitHub Actions CI/CD

サーバーはsshでrsyncできればどこでも良いが、シンフリーサーバーを使った。

フリーじゃなくても使い勝手よさそうなので、必要なら有料版使おうと思う。

プロジェクトの用意

以下のコマンドでSSGのサイトがout/へ出力されるようにしておく。

npm run build

デプロイサーバーのsshキーを登録する

リポジトリ > Settings > Secrets and Variables > Actions のSecretsタブからNew repository secret でssh秘密鍵を登録する。

ここでは「DEPLOY_SERVER_KEY」として登録した。

GitHub Actionsの設定ファイルでは以下で参照できる。

${{ secrets.DEPLOY_SERVER_KEY }}

デプロイサーバーの情報を登録する

リポジトリ > Settings > Secrets and Variables > Actions のVariablesタブからNew repository variable でssh接続に使う情報を登録する

ここでは以下を登録した。

KEY名 内容
DEPLOY_DIR デプロイ先ディレクトリ
DEPLOY_HOST_NAME デプロイ先のホスト名
DEPLOY_HOST_USER_NAME SSHのユーザー名
DEPLOY_SSH_PORT SSHのポート

GitHub Actionsの設定ファイルでは以下のように参照できる。

${{ vars.DEPLOY_SSH_PORT }}

GitHub Actionsの設定

以下へ設定ファイルを書く。

.github/workflows/cicd.yml

こんな感じ。

name: ci/cd
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  ci:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [20.x]
    steps:
      # 実行環境にソースコードを取り込む
      - uses: actions/checkout@v4
      # 実行環境に対してNode.jsのセットアップをする
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          # Node.jsのバージョンを指定
          node-version: ${{ matrix.node-version }}
      # プロジェクトの依存関係をインストール
      - name: Install dependencies
        run: npm install
      # lint実行
      - name: Lint code
        run: npm run lint
      # prettier実行
      - name: format code
        run: npm run fmt
  cd:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [20.x]
    steps:
      # 実行環境にソースコードを取り込む
      - uses: actions/checkout@v4
      # 実行環境に対してNode.jsのセットアップをする
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          # Node.jsのバージョンを指定
          node-version: ${{ matrix.node-version }}
      # プロジェクトの依存関係をインストール
      - name: Install dependencies
        run: npm install
      # ビルド
      - name: Build code
        run: npm run build
      # sshキーを配置
      - name: ssh key generate
        run: echo "$SSH_PRIVATE_KEY" > key && chmod 600 key
        env:
          SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_SERVER_KEY }}
      - name: deploy
        run: rsync -auzr -e "ssh -i key -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no -p ${{ vars.DEPLOY_SSH_PORT }}" --delete ./out/* ${{ vars.DEPLOY_HOST_USER_NAME }}@${{ vars.DEPLOY_HOST_NAME }}:${{ vars.DEPLOY_DIR }}

まとめと参考ページ

ちょっと手間取ったがやはり楽になる。