GitHub Actionsを使って自動デプロイをする
投稿日:
更新日:
はじめに
FTPを直接操作してファイルをアップするとバージョン管理がしづらいので、GitHub Actionsを使って自動デプロイをできるようにします。
ワークフローを定義する
プロジェクトのルートディレクトリ直下に .github/workflows/main.yml を作成し、以下のコードを記述します。
ファイル名はmain.ymlでは無くても大丈夫です。
FTPアカウント、サーバー情報は漏洩を避けるためGitHubのSecretsに登録したものを使用できるようにします。
main.yml
on: push
name: 🚀 Deploy website on push
jobs:
web-deploy:
name: 🎉 Deploy
runs-on: ubuntu-latest
steps:
- name: 🚚 Get latest code
uses: actions/checkout@v3
- name: 📂 Sync files
uses: SamKirkland/FTP-Deploy-Action@v4.3.4
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD }}
server-dir: ${{ secrets.FTP_SERVER_DIR }}
local-dir: ./
server-dirに指定するディレクトリは最後がスラッシュ(/)で終わるように指定してください。
FTPアカウントとサーバー情報を設定する
GitHubのリポジトリの[Setting]から[Secrets and variables] > [Actions]を開き、[New repository secret]をクリックします。
![GitHubのSecrets設定画面](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2Fc785efc9d55147cc95570264aaa0703f%2Fdeploy-with-github-actions-1.png&w=3840&q=75)
NemeとSecretにはそれぞれ以下のように設定してください。
Name | Secret |
---|---|
| FTPサーバー |
| FTPアカウント名 |
| FTPパスワード |
| FTPのディレクトリ |
![Secretsを4つ登録した状態](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2Fbdc24df70e134ae68b7e83d0f289cfb6%2Fdeploy-with-github-actions-2.png&w=3840&q=75)
リモートリポジトリにpushする
ここまでの設定が完了したらGitHubのリモートリポジトリにプロジェクトをpushしてください。
GitHubで[Actions] > [All workflows]を開くとデプロイのログなどを確認することができます。
![GitHubのActionsメニュー](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F5287029226cb49459bca595d5c88d9da%2Fdeploy-with-github-actions-3.jpg&w=3840&q=75)