概要

• コンテンツを Git で管理し SSG するタイプの小規模サイト
• GitHub Actions でデプロイフローを構築
• npm-scripts で GitHub Actions を呼び出す

背景

Next.js で SSG するタイプのサイトがあり、コンテンツを Git で管理してました。

小規模サイトのため「Git のコミット起点でデプロイしよう」と考えて GitHub Actions でデプロイフローを組んでました。main ブランチへのコミットを起点にデプロイする仕組みです。

当初、問題なく運用できていたのですが「コミットした直後に修正する」ということが何度かあり「コミットとデプロイを分けたい」と思うようになりました。

改善策: npm-scripts を活用する

悩んだ末、npm-scripts を使う方法が自分にベストでした。

方法としてはシンプルです。npm-scripts に app:deploy というスクリプトを用意し、そこに GitHub Actions を呼ぶコマンドを置きます。

{
  "scripts": {
    "build": "next build",
    "app:deploy": "gh workflow run deploy.yaml"

他の方法: ブランチ分け

ブランチを分ける手もあります。シンプルで分かりやすいです。

ただ、今回のサイトは小規模であり自分一人しか触りません。また趣味で運営しているサイトなので、ブランチ分けはオーバーでした。

1. GitHub Actions でデプロイフローを組む

はじめに GitHub Actions でデプロイフローを組みます。
サンプルを置いておきますがデプロイコマンドはインフラに寄りけりなので省略してます。

# .github/workflows/deploy.yaml

name: deploy

on:
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      # setup
      - uses: actions/setup-node@v3
        with:
          node-version: 20
      - uses: pnpm/action-setup@v2
        with:
          version: 8

      # build
      - run: pnpm install
      - run: pnpm build

      # この後にデプロイコマンドを置く (省略)

2. npm-scripts で GitHub Actions を呼ぶ

package.json に app:deploy というスクリプトを加えます

package.json
{
  "scripts": {
    "build": "next build",
    "app:deploy": "gh workflow run deploy.yaml"

このスクリプトでは gh というコマンドを呼びます。
gh は GitHub の CLI です。ローカルに入れてGitHubへログインください。

gh workflow run <filename> で GitHub Actions を呼び出すことができます。

Links

• gh
• gh workflow run

デプロイ方法

コンテンツのデプロイ方法はシンプルです。

1. コンテンツを更新しコミットする
2. pnpm app:deploy をたたく
   
   

コミットとデプロイが分離され、以前抱いていた課題感は解消されました。

終わりに: 人間の直感に反する？

上記の対応をした後に気づいたことがあります。

デプロイコマンドは GitHub Actions で実行されるため、たとえコンテンツがローカルにあっても、コミットしない限りデプロイされません。

めちゃくちゃ当たり前のことなのですが、組んだ自分でもコミットを忘れてデプロイすることがあり、「人間の認知的に直感的じゃないのかなあ」と想像してます。