仕事で、GitHubActionsを使用して、CDを入れてみましたのでその忘備録を書き留めようと思います。

環境

• GitHub（無料プラン）
• Google Compute Engine
• Next.js

やること

Google Compute Engineでサーバーを借りているので、実質VPSに接続してデプロイをするような手順となっているので、ssh接続をしてデプロイ用のshellを作成すればいいかな。とぼんやりと考えながらやってみます。

目次

• Next.jsをpm2で動かすようにする
• サーバーにデプロイ用のshell用意
• GitHub action yamlファイルの用意

Next.jsをpm2で動かすようにする

package.json のscriptに下記を追加

    "pm2:start": "pm2 start pm2.yaml",
    "pm2:stop": "pm2 stop pm2.yaml",
    "pm2:del": "pm2 del pm2.yaml",
    "pm2:restart": "pm2 restart pm2.yaml"

pm2からNext.jsを起動できるように設定ファイルを追加

pm2.yaml を作成する

name: next
script: npm
cwd: ./
args: run start
log_date_format: YYYY-MM-DD HH:mm Z
out_file: .pm2/logs/out.log
error_file: .pm2/logs/err.log
pid_file: .pm2/pid/app-pm_id.pid

動作チェックだけします。

npm run build にて、ビルドを実行する。

npm run pm2:start これを実行すれば localhost:3000 にてnext.jsが起動しました。

動作チェックもできたので、GCEのサーバーに入って、pm2で起動してあげましょう。

cd /app/web
git pull [リポジトリurl]
npm ci
npm run pm2:start

これでpm2を使って起動してあげましょう。

サーバーにデプロイ用のshell用意

CD実行時に動かすためのshellファイルを用意

/home/[user_name]/deploy.sh というファイルを作成して、下記内容を記載

cd /app/web
git pull
npm ci
npm run build
npm run pm2:restart

GitHub action yamlファイルの用意

.github/workflows/deploy.yml を作成

要件として、毎日17時にデプロイしてほしいということだったので、cronにて設定

ssh-actionというGitHub Actionを使用して、ssh接続をします。

https://github.com/appleboy/ssh-action

設定は上記url参考に、SSH_KEYなどを作成。

リポジトリの Settings→SecretsでGitHub Actionsで使用する secrets を設定できます。

on:
  schedule:
    # UTCで指定するのでJST17:00指定
    - cron: '0 8 * * *'
name: dev-deploy
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: deploy dev task
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USERNAME }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            source ~/.bash_profile
            sh /home/[user_name]/deploy.sh

これで、毎日１７時にdevelopブランチが反映されて、ステージング環境が自動的にデプロイされるようになりました。

終わりに

他にも

on:
  push:
    branches:
      - develop

を使用して、developブランチにマージしたら自動的にデプロイされるようにしている案件もあります。

他にも、自動でテストを実行したり、するようにしてたり GitHub をせっかく使っているなら、GitHub Actionsを活用していって、開発者体験（DX）を上げていきたいですね！