GitHub ActionsからXserverにデプロイをしてみる
これは何
先日友人からWebサイトの作成を依頼され、簡単なVite + Reactのウェブサイトの作成を行いました。
完成したサイトのデプロイは当初サーバーに手作業でちまちまファイルを配置をしていたのですが、途中でめんどくさくて涙が出そうになったのでGitHub Actionsで自動化することにしました笑
これはその時の対応の記録です。
大まかな流れ
超ざっくりですが、対応の流れは以下の通りです。
- デプロイ用のworkflowファイルを作成する
- デプロイ先のサーバー関連の情報をGitHubのsecretsに保存する
- 1で作成したworkflowファイル内で、FTP Deployというアクションを使用してアップロード用の記述をする
1. デプロイ用のworkflowファイルを作成する
GitHub Actionsを使ったことのある方ならお馴染みの.github/workflow以下にワークフロー用のyamlファイルを作成する工程です。
ファイル名は自由ですがデプロイ用であることがわかりやすいようにdeploy.ymlとしてあります。
name: "Deploy"
on:
push:
## mainブランチへのマージのタイミングで発火させる
branches:
- main
## ビルド後のファイルが出力されるdistもしくはCI関連の処理がある.github/以下に変更があった場合に発火させる
paths:
- dist/**
- .github/**
2. デプロイ先のサーバー関連の情報をGitHubのsecretsに保存する
今回私がデプロイを行ったXserverに限らず、サーバーにFTPツールを使用してファイルをアップロードする際は以下のような認証情報が必要になります。
- FTPサーバー名(ホスト名)
- FTPユーザー名
- FTPパスワード
Xserverに関してはこの辺りの情報の確認方法が以下に記載されていますので参考にしてみてください。
3. FTP Deployを使ってアップロード用の記述をする
ありがたいことにGitHub Actions上でFTPアップロードを実行するためのActionが用意されてます。
この記事を書いた2024/10時点での最新版はv4.3.5となっているようです。（以前のバージョンからそこそこ書き振りが変わってそうなので、実装で迷った際は↑の公式のドキュメントの参照をお勧めします）
name: "Deploy"
on:
push:
branches:
- main
paths:
- dist/**
- .github/**
jobs:
deploy-to-xserver:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
with:
fetch-depth: 0
## FTP deployを使用したFTPアップロードの記述
- name: Upload files on Xserver
uses: SamKirkland/FTP-Deploy-Action@v4.3.5
## step2でGitHub secretsに登録した認証情報をここで呼び出します
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD }}
## アップロード元とアップロード先の指定
local-dir: ./dist/
server-dir: /デプロイ対象のサイト/public_html/
基本的には上記FTP Deployを使用してファイルのアップロードを実行するだけなのですが、以下いくつか注意ポイントです。
-
local-dir・server-dirではどちらもディレクトリを指定します。そのため設定する値の末尾が/で記述されていないとワークフロー実行時にエラーとなってしまいます。 - 上記の設定と同じく
with以下に記載できるdry-runというオプションがあります。これをtrueにして実行することで、アップロードした際にどのような実行結果になるかログを出力することができます（実際のファイルアップロードは行われないためテストランのような形になります）。正しくワークフローが動くかどうかのチェックで一度こちらのオプションをオンにして実行してみると良さそうです。
終わりに
以上めちゃくちゃざっくりでしたがGitHub ActionsからXserverにファイルアップロードを行う方法についての紹介でした！
🔗 参考
以下今回実装をするにあたって参考にさせていただいた記事です。
Discussion