🛤️
microCMSとAstroで作成したサイトをGitHub Actionsで一般的なレンタルサーバにデプロイする際のymlファイルのメモ
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] #対象にするブランチ
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という場所に記述して、先ほど作成したワークフローファイルから参照します。
プロジェクトのリポジトリに移動し、
- 「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公開フォルダ」を指定してください。※最後に「/」が必要です。 |
動作確認
これでローカルでファイルをpushする毎にgithubが自動でnpm run buildして、ftpでサーバにアップしてくれるはずです。
Discussion