概要
- コンテンツを 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
デプロイ方法
コンテンツのデプロイ方法はシンプルです。
- コンテンツを更新しコミットする
pnpm app:deploy
をたたく
コミットとデプロイが分離され、以前抱いていた課題感は解消されました。
終わりに: 人間の直感に反する?
上記の対応をした後に気づいたことがあります。
デプロイコマンドは GitHub Actions
で実行されるため、たとえコンテンツがローカルにあっても、コミットしない限りデプロイされません。
めちゃくちゃ当たり前のことなのですが、組んだ自分でもコミットを忘れてデプロイすることがあり、「人間の認知的に直感的じゃないのかなあ」と想像してます。