SNCreate

このブログではGithubを用いてバージョン管理をしていたものの、サイト更新の際には下記のようなワークフローをとっていました。　

① ローカルで記事作成
➁ リモートリポジトリにプッシュ
③ npm run build でビルドしたディレクトリをFTPソフトを用いてエックスサーバーにアップロード
　

手順③を自動化したいと思い調べたところ、Github Actionsでその作業を自動化する方法を見つけましたので解説します！！

GitHub Actions のワークフロー

リポジトリ内に .github/workflowsディレクトリを作成し、その中にYAMLファイルを作成します。（私の場合はmain.ymlとしました。）

1
name: Astro Blog Build & Deploy
2

3
on:
4
  push:
5
    branches:
6
      - main
7

8
jobs:
9
  deploy:
10
    runs-on: ubuntu-latest
11

12
    steps:
13
      - uses: actions/checkout@v4
14
        with:
15
          ref: main
23 collapsed lines
16

17
      - name: Node setup
18
        uses: actions/setup-node@v4
19
        with:
20
          node-version: "20"
21
          cache: npm
22
      - run: npm i && npm run build
23

24
      - name: prepare .ssh dir
25
        run: mkdir -p .ssh && chmod 700 .ssh
26

27
      - name: ssh key generate
28
        run: echo "$SSH_SECRET_KEY" > .ssh/id_rsa && chmod 600 .ssh/id_rsa
29
        env:
30
          SSH_SECRET_KEY: ${{ secrets.SSH_SECRET_KEY }}
31

32
      - name: rsync deploy
33
        run: rsync --checksum -ahv --delete --exclude ".git/" --exclude ".ssh/" -e "ssh -i .ssh/id_rsa -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -p ${SSH_PORT}" ./dist/ ${SSH_USER}@${SSH_HOST}:${SSH_DIR}
34
        env:
35
          SSH_PORT: ${{ secrets.SSH_PORT }}
36
          SSH_USER: ${{ secrets.SSH_USER }}
37
          SSH_HOST: ${{ secrets.SSH_HOST }}
38
          SSH_DIR:  /var/www/blog/

ここからはmain.ymlについて部分ごとに解説をしていきます。

1. 実行環境の作成

1
on:
2
  push:
3
    branches:
4
      - main
5

6
jobs:
7
  deploy:
8
    runs-on: ubuntu-latest

onの設定で指定したブランチ(ここでは”main”)へpush時に処理を実行し、jobs（単一の処理ブロック）はUbuntuで実行環境を構築しています。
　

2. リポジトリのビルド

1
    steps:
2
      - uses: actions/checkout@v4
3
        with:
4
          ref: main
5

6
      - name: Node setup
7
        uses: actions/setup-node@v4
8
        with:
9
          node-version: "20"
10
          cache: npm
11
      - run: npm i && npm run build

stepsにはjobs内の個々の処理を記述していきます。まず、actions/checkout@v4を使用しリポジトリのチェックアウト、refでブランチ名を指定します。（こちらの指定がない場合はデフォルトブランチが選択されます）
次にNode setupですが、こちらについては私が使用しているAstroフレームワークのバージョンの関係でnpmのバージョンが18以上である必要があったため記述しています。
バージョン指定後にビルドコマンドを実行しています。（node モジュールをインストールするためにnpm iを実行しています）
　

3. 秘密鍵の生成

1
      - name: prepare .ssh dir
2
        run: mkdir -p .ssh && chmod 700 .ssh
3

4
      - name: ssh key generate
5
        run: echo "$SSH_SECRET_KEY" > .ssh/id_rsa && chmod 600 .ssh/id_rsa
6
        env:
7
          SSH_SECRET_KEY: ${{ secrets.SSH_SECRET_KEY }}

まず、.sshというフォルダを作成し、ディレクトリの権限を700に変更します。次に、.sshにid_rsaというファイルを作成し、ファイルの権限を600に変更します。secrets.というプレフィックスがついている変数はGithubの設定ページで設定した環境変数です。こちらはリポジトリの”Settings”ページから”Security->Secrets and variables->Actions”のページで”New repository secret”ボタンを押下することで作成できます。

SSH_SECRET_KEYにはサーバーで作成した秘密鍵の中身をコピーしたものを環境変数にペーストします。（秘密鍵ファイルの末尾に改行が入っているか確かめてください）

注意点

・使用する秘密鍵（SSH_SECRET_KEY)にパスフレーズを設定するとrsyncの実行でエラーが発生するため、パスフレーズは空白にするとよさそうです。下記コマンドでパスフレーズの変更ができます。

1
ssh-keygen -p -f /path/to/private_key

4. rsyncによるビルドのデプロイ

1
      - name: rsync deploy
2
        run: rsync --checksum -ahv --delete --exclude ".git/" --exclude ".ssh/" -e "ssh -i .ssh/id_rsa -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -p ${SSH_PORT}" ./dist/ ${SSH_USER}@${SSH_HOST}:${SSH_DIR}
3
        env:
4
          SSH_PORT: ${{ secrets.SSH_PORT }}
5
          SSH_USER: ${{ secrets.SSH_USER }}
6
          SSH_HOST: ${{ secrets.SSH_HOST }}
7
          SSH_DIR:  /var/www/blog/

rsyncを実行します。上述したようにsecrets.変数についてはGitHubの環境変数設定で追加したものになります。
同期させたくないファイル、ディレクトリは—excludeで除外します。
-eでリモートシェルを指定します。作成した秘密鍵をsshの-iオプションで指定します。
rsync最後のオプションで同期元ファイル(ここでは./dist/)と同期先ファイル(ここでは${SSH_USER}@${SSH_HOST}:${SSH_DIR})をしており、ディレクトリを指定する場合は末尾に/をつけます。

おわりに

これにて解説は終了です。以上の手順が成功すれば、サイト更新する際にpushするだけでバージョン管理に加えてwebサーバーへの反映が自動化できるようになり、更新作業が楽になりました。

参考リンク:

Github ActionsでConoha WINGにrsyncを使ってデプロイする
 【CI/CD的な】GitHub Actionsを使ってビルドからrsyncでデプロイまでを自動化する