🛤️
microCMSとAstroで作成したサイトをGitHub Actionsで一般的なレンタルサーバにデプロイする際のymlファイルのメモ
※microCMSのコンテンツの更新があった際のアクションの設定がまるっと抜けていた（！）ので追記（2024/10/16）
Astroで作ったサイトって一般的にVercelやNetlifyにデプロイすることが多いと思うのだけど、クライアントによっては上記のサーバの契約を提案するのはまだまだ敷居が高いので、今回はさくらインターネットを使ってデプロイがうまくいくか試してみた。結果うまくいった。
※いわゆるjamstack初心者なので備忘録兼ねてコードへのコメント多めです。
ワークフローファイルを作る
Github上でプロジェクトのリポジトリに移動し、
- 「Actions」タブ
- タイトル横の「New Workflow」ボタン
- タイトル下の「set up a workflow yourself」
の順にクリック。
コードエディタに以下の内容をペースト。
ファイル名はデフォルトで「main.yml」となっていますが何でもいいようです。
mail.yml
name: Deploy website on push #ここは何でもOK
on:
push:
branches: [main] #対象にするブランチ
repository_dispatch:
types: [update] #microCMSのwebhookで設定したトリガーイベント名
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の場合は基本このままでいいと思います
トークンを作成する
microCMSのドキュメントがわかりやすいです。
FTPのパスワードなどをSecretsに記述する
他人に知られてはいけないパスワードやシークレットキーなどは、GitHubのリポジトリのSecretという場所に記述して、先ほど作成したワークフローファイルから参照します。
プロジェクトのリポジトリに移動し、
- 「Settings」タブ
- 左メニュー「Secrets and variables」を展開
- 「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公開フォルダ」を指定してください。※最後に「/」が必要です。 |
microCMS側でwebhookの設定
これももちろんmicroCMSのドキュメントがわかりやすいです。
動作確認
これでローカルでファイルをpush、またはmicroCMSでコンテンツを作成する毎に、githubが自動でnpm run buildコマンドを実行して、ftpでサーバにアップしてくれます。
Discussion