microCMSとAstroで作成したサイトをGitHub Actionsで一般的なレンタルサーバにデプロイする際のymlファイルのメモ

Astroで作ったサイトって一般的にVercelやNetlifyにデプロイすることが多いと思うのだけど、クライアントによっては上記のサーバの契約を提案するのはまだまだ敷居が高いので、今回はさくらインターネットを使ってデプロイがうまくいくか試してみた。結果うまくいった。
※いわゆるjamstack初心者なので備忘録兼ねてコードへのコメント多めです。

ワークフローファイルを作る

Github上でプロジェクトのリポジトリに移動し、

1. 「Actions」タブ
2. タイトル横の「New Workflow」ボタン
3. タイトル下の「set up a workflow yourself」
   の順にクリック。

コードエディタに以下の内容をペースト。
ファイル名はデフォルトで「main.yml」となっていますが何でもいいようです。

mail.yml

name: Deploy website on push #ここは何でもOK
on:
  push:
    branches: [main] #対象にするブランチ

env: #後述
  MICROCMS_SERVICE_DOMAIN: ${{ secrets.MICROCMS_SERVICE_DOMAIN }}
  MICROCMS_API_KEY: ${{ secrets.MICROCMS_API_KEY }}
  
jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest #使用する仮想環境。windowsやmacosも指定できるとのこと。

    steps:
      - name: Get latest code
        uses: actions/checkout@v3 #リポジトリからコードを取得するためのアクション
        
      - name: Use Node.js 18
        uses: actions/setup-node@v3 #ワークフロー内でnodejsを使うためのアクション
        with:
          node-version: '18' #ローカルのnodeのバージョンと合わせなくていいみたい
          
      - name: Build Project
        run: |
          npm install 
          npm run build
          
      - name: Sync files
        uses: SamKirkland/FTP-Deploy-Action@4.3.1 #SamKirklandさんが作った、FTP経由でファイルをデプロイするためのアクション
        with: #後述
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: ${{ secrets.FTP_SERVER_DIR }}
          local-dir: ./dist/ #Astroの場合は基本このままでいいと思います

FTPのパスワードなどをSecretsに記述する

他人に知られてはいけないパスワードやシークレットキーなどは、GitHubのリポジトリのSecretという場所に記述して、先ほど作成したワークフローファイルから参照します。

プロジェクトのリポジトリに移動し、

1. 「Settings」タブ
2. 左メニュー「Secrets and variables」を展開
3. 「Actions」をクリック
   すると「Actions secrets and variables」ページが開きます。

「Secrets」タブが選択されているのを確認し、「New repository secret」ボタンをクリック。
以下の項目を入力します。

Name	Secret
MICROCMS_SERVICE_DOMAIN	.envファイルに記述されているもの
MICROCMS_API_KEY	同上
FTP_SERVER	ftpのサーバ
FTP_USERNAME	ユーザー名
FTP_PASSWORD	パスワード
FTP_SERVER_DIR	ディレクトリ。さくらの場合、「ドメイン/SSL」ページの「WEB公開フォルダ」を指定してください。※最後に「/」が必要です。

動作確認

これでローカルでファイルをpushする毎にgithubが自動でnpm run buildして、ftpでサーバにアップしてくれるはずです。