Astroで作ったWebサイトをエックスサーバーに自動アップロードする
前回の記事で、AstroでWebサイトを作成しました。
今回はこのWebサイトを、Githubへのコミットをトリガーにしてビルドし、自動的にエックスサーバーにFTP転送されるように設定していきます。
FTP情報の確認
エックスサーバーでFTP情報を確認するには、サーバーパネル⇒サブFTPアカウント設定⇒すべてのドメインの「選択する」⇒FTPソフト設定タブを開きます。
初期FTPアカウントの設定内容を使います。（画像はセキュリティのため白く塗りつぶしてあります）
Github Actionsの定義ファイルを作成
プロジェクトのルートに.githubフォルダを作成します。その中に更にworkflowsフォルダを作成します。そしてそこにdeploy.ymlという名前のファイルを作成します。（ファイル名は任意です）
ファイルに以下のように記述します。
name: Deploy website on push
on:
push:
branches: [master]
jobs:
deploy:
name: Deploy
runs-on: ubuntu-latest
steps:
- name: Get latest code
uses: actions/checkout@v2
- name: Use Node.js 14
uses: actions/setup-node@v2
with:
node-version: '14'
- name: Build Project
run: |
npm install
npm run build
- name: Sync files
uses: SamKirkland/FTP-Deploy-Action@4.3.1
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD }}
local-dir: ./dist/
server-dir: ${{ secrets.FTP_SERVER_DIR }}
内容としては、
- masterブランチへのpushをトリガーにして発動
- まずAstroのプロジェクトをビルドする
- ビルドの結果生成されたファイルをエックスサーバーにFTP転送する
という流れになっています。
Github Actions Secretsの設定
上記の定義ファイルはFTPサーバのホスト名、ユーザ名、パスワード、アップロード先をSecretsから取得するようになっています。
そのためGithubのリポジトリでこれらの値を設定します。
Githubのリポジトリを開き、Settings⇒Secrets⇒Actionsを選択します。「New repository secret」というボタンがあるので、上記4つの変数名と値を登録します。
server、username、passwordはエックスサーバーのページで確認したFTP情報を使います。
local-dirは、アップロードしたいフォルダです。Astroのプロジェクトをビルドすると、デフォルトでdistフォルダに必要なファイルが生成されるので、distフォルダをアップロードするようにしています。これは、特に秘密情報ではないため定義ファイルにそのまま書いています。
server-dirはアップロードする先です。エックスサーバーでは、ルートディレクトリは「/ドメイン名/public_html/」となります。そのためルートディレクトリにアップしたい場合はこのように値を設定します。サブドメインを使う場合は、「/ドメイン名/public_html/サブドメイン名/」となります。
pushする
ここまで設定できたら、masterブランチにpushしてみます。
pushしたと同時にActionsが動き出し、ビルド⇒デプロイが実行されます。
Actionsが完了したら、URLにアクセスしてみて、ちゃんとWebサイトが表示されればOKです！
まとめ
これで、今後Webサイトを更新しようと思ったときも、Githubにコミットをするだけで自動でデプロイしてくれるので、とても楽ですね！
