GitHubActionsでビルドからアップロードまでしてみるめも

タイトル通りですが、本記事では以下の内容をメモしていきます。

Eleventy（11ty）を使用してウェブサイトをビルドし、ビルドされたファイルをサーバーにデプロイする。

1. 「main」ブランチにプッシュされたら
2. サイトをビルドして（11ty）
3. 出力されたサイトのファイル達をサーバー（エックスサーバー）にアップロード

以上を GitHubActions を使用して行ったので、そのメモです！

手順

エックスサーバーで秘密鍵を取得

こちらは SSH 接続を行うために必要です。

秘密鍵の取得や登録は公式でわかりやすく説明されているので、以下をご確認ください。

パスワードが設定されていると、GitHubActions の途中で止まってしまうとのことなので、パスはなし（入力しない）

公式の SSH 設定

こちらで取得した鍵の中身をあとで Github のシークレット変数に貼り付けます。

GitHub リポジトリでのワークフロー設定

1. GitHub リポジトリにアクセス
2. リポジトリ内で、上部メニューの「Actions」をクリック
   
3. ワークフローがまだ設定されていない場合は、「Set up a workflow yourself」を選択。
   
   既存のワークフローがある場合は、「New workflow」ボタンをクリック
   
4. エディタが開いたら、そこに後述するdeployMain.yamlの内容を貼り付け
5. エディタでコードを貼り付けたら、「Commit changes...」をクリック
   
6. 適切なコミットメッセージを入力し、「Commit changes」をクリック
   

これで、GitHub Actions に新しいワークフローが設定されました。

main ブランチに新しいコミットがプッシュされると、このワークフローが実行されるようになります。

ワークフローでは Eleventy でウェブサイトをビルドし、rsync を使用してリモートサーバーにデプロイします。

GitHub リポジトリでのシークレット変数設定

1. GitHub リポジトリにアクセス
2. リポジトリ内で、上部メニューの「Settings」をクリック
   
3. 「secrets and variables」＞「Actions」を選択
   
4. 「New repository secret」を選択
   
5. NameをSSH_PRIVATE_KEYと入力
   後述するコードの変数名になります。任意の名前にしていただいても問題ありません。
6. Secretに生成した秘密鍵の中身をコピペします
7. 「Add secret」を選択してシークレット変数を追加
   

GitHubActions のコード

ファイル名は任意です。

今回はdeployMain.yamlにしました

deployMain.yaml

name: deploy to remote

on:
    push:
        branches:
            - main

jobs:
    deploy:
        runs-on: ubuntu-latest
        steps:
            - name: Set up Node.js
              uses: actions/setup-node@v4
              with:
                  node-version: "18"

            - name: Checkout code
              uses: actions/checkout@v4

            - name: Generate SSH key
              run: |
                  echo "$SSH_PRIVATE_KEY" > key
                  chmod 600 key
              env:
                  SSH_PRIVATE_KEY: $

            - name: Install dependencies
              run: npm install

            - name: Build site with Eleventy
              run: npx @11ty/eleventy

            - name: Deploy via rsync
              run: |
                  rsync -auzrv --update -e "ssh -i key -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no -p 10022" --delete ./_public/ hogeId@svhoge.xserver.jp:/home/hogege/hoge.com/public_html/

エックスサーバーでサーバー情報を確認

ワークフローのコードでは、サーバーにデータを同期するために必要な情報がいくつかあります。

情報を確認し、コード上のhogeなどを自身のサーバーの ID などに置き換えます

各情報の確認

1. エックスサーバーでサーバーパネルにログイン
2. サーバー IDが表示されていると思うので、それを確認
   コードを書くときにhogeIdと書かれている部分をここで確認できるサーバー ID に置き換え
   
3. 続いて「サーバー情報」をクリック
4. サーバー情報のページで、ホスト名とホームディレクトリを確認
   それぞれコードの、svhoge→ ホスト名、/home/hogegege→ ホームディレクトリを置き換え
   

置き換え箇所まとめ

• hogeId→ サーバー ID
• svhoge→ ホスト名
  今はsvほげほげの形式がほとんどのようですが、いつか変わるかもしれませんので、その点はご注意を。
• /home/hogegege→ ホームディレクトリ
  「homeなんてフォルダはないから home は省略だな！」としばらくなやみました……。
  そしてその次はホームディレクトリhogegegeを省いてしまっていて更に悩みました。
  どちらも必要です……！

コードの各ステップ詳細

ワークフロー名: deploy to remote

• この名前はワークフロー自体を表します。
• 通常、何を行うかを簡潔に表すことが一般的です。
• 今回は（そのまんまですが）「リモートにデプロイ」するワークフローです。

トリガー条件: on: push: branches: - main

• このワークフローは、GitHub リポジトリで main ブランチにコミットがプッシュされたときに実行されます。
• 人によってはmasterブランチかもしれませんね。

ジョブ

• deploy という名前のジョブが定義されています。
• このジョブは ubuntu-latest 上で実行されます。

ジョブの手順

1. Checkout code
   GitHub リポジトリのコードをワークフローの実行環境にチェックアウト
2. Generate SSH key
   デプロイ先のサーバーに SSH 接続するための鍵を生成します。
   GitHub Actions のシークレット SSH_PRIVATE_KEY に設定された秘密鍵を使って key ファイルを作成し、権限を設定します。
   GitHub 側の設定は後ほど。
   上記の通り、ここでは GitHub で設定した値を使用して、keyを作成します。
3. Build site with Eleventy
   Eleventy を使用してウェブサイトをビルド。
   Eleventy のコマンド npx @11ty/eleventy を実行し、ウェブサイトのビルドが行われます。
   今回は、ビルドしたファイル達は_publicというフォルダに出力されるように、11ty 側で設定を変更してあります。
4. Deploy via rsync
   rsync コマンドを使用して、ビルドされたファイルをリモートサーバーにデプロイ
   _public フォルダの中身を hogeId@svhoge.xserver.jp というユーザーのリモートサーバーの /home/hogege/hoge.com/public_html/ に同期
   SSH 鍵 key を使用し、ポート番号 10022 で接続します。

以上のコードが実行されると、main ブランチにプッシュされた際に Eleventy を使用してサイトをビルドし、その後 rsync を介してビルドされたファイルを指定されたエックスサーバーにデプロイ、までを GitHubActions が行ってくれます。

あとがき

以上でメモは終了です。

上記を行えるようになったおかげで、サイト公開までのワークフローが変わりました。

旧ワークフロー

1. マークダウンで記事作成（作業ブランチにて）
2. developブランチにプルリクエスト → マージ
3. mainブランチに develop をマージ
4. main で 11ty のビルド
5. FileZilla（FTP ソフト）起動
6. FileZilla でサーバーにログイン
7. _publicフォルダに出力されたファイルをサーバーにアップロード（この時点でサイトが公開される）
8. 「アップロードされているけど、不要になったデータ」があれば手動で削除

新ワークフロー

1. マークダウンで記事作成（作業ブランチにて）
2. developブランチにプルリクエスト → マージ
3. mainブランチに develop をマージ

あとは main のプッシュ（develop からのマージ）を検知した GitHubActions がなんやかんやしてくれます。

旧ワークフローの以降の手順はすべて自動で行ってくれるようになりました。

特に『「アップロードされているけど、不要になったデータ」があれば手動で削除』が面倒だったのとこわかったのもあり……。

rsyncコマンドのオプションの--deleteでファイルの削除も同期されるようになったので大満足です。

rsyncコマンドのオプション

rsyncコマンドは他にもオプションがあるので、調べて取り入れてみてもよいかもしれません。

以下の例えば-a, --archiveは-aでも--archiveでも同じコマンドとして認識してくれます。

【2024/08/31】エックスサーバーの設定変更が必要

ふと、サイトを更新した際に本記事のワークフローが失敗するようになっていました。

エラーログ：

Connection closed by
rsync: connection unexpectedly closed (0 bytes received so far) [sender]
rsync error: unexplained error (code 255) at io.c(231) [sender=3.2.7]
Error: Process completed with exit code 255.

特にワークフローを変更していなかったので、エックスサーバー側の SSH 設定を確認してみました。
とはいえ、あんまり詳しくないので表示されていた項目を変更してみただけです。

以下の SSH 設定を「ON[すべてのアクセスを許可] ※非推奨」に変更してみました。

そして再度ワークフローを実行してみると正常に更新されました！

どうも同画面の以下の説明に該当する状態になってしまっていたようです。

国外アクセス制限について
国内 IP アドレスからのアクセスの場合でも、
稀に国外 IP アドレスからの接続とシステム上誤認され、制限がされる場合がございます。
このような場合は「ON[すべてのアクセスを許可]」を選択のうえ設定をお願いいたします。

参考リンク

• エックスサーバー公式の SSH 設定ページ
• エックスサーバーにローカル →github→ サーバーへ自動デプロイしたメモ
• GitHub に Push するだけで、レンタルサーバーにサイト公開してみた