ドラッグ&ドロップを失敗した

Webサイトをローカルで作ってリモートにアップするとき、操作ミスで目的と違うディレクトリにファイルを入れてしまった。こんな経験ありませんか？自分はFileZillaを初めて利用した日に経験しました笑。そんな悲劇を繰り返さないためにGitHub Actionsを用いてmainブランチへのmerge(厳密にはpush)と同時に実行される自動デプロイ機能を作成しましょう。

前提条件

GitHubの基本操作ができる
自前サーバか何らかのレンタルサーバと契約している
mainブランチ一本での開発ではなく、複数ブランチで開発している

概要

ローカルで開発したWebサイトのソースコードをGitHubにpush
mianブランチにプルリクエストしてソースコードを反映させる
このmainブランチへのpushをトリガーにGitHub Actionsを実行し、自動で公開予定サーバへアップロードさせる

ステップその１　ローカルのdevelopブランチで開発したものをpush

まずは画像のようにmainブランチとdevelopブランチを用意します。現在developブランチの方が開発が1コミット進んでいる状態です。
　　

ステップその２　FTP情報をGitHubのSecrets and variablesに設定する

あとで自動化プログラムを書くmain.ymlで必要になる変数を先にGitHubに設定しておきます。この部分を飛ばしたり、間違った値を入力するとGitHub Actionsはエラーを起こすので注意しましょう。

GitHubのリポジトリページからSettingsを選択し、左サイドバーのSecurityの中にあるSecrets and variablesを選択するとActionsというメニューが出てきます。
　　

Actionsを選択すると画像のような画面になります。緑色のNew repository secretボタンをクリックしましょう。
　　

ここに利用しているサーバから取得してきたFTP情報を入力していくことになります。

FTP情報を取得

続いてFTP情報を取得して順番に入力していきます。取得すべき情報は以下の三つです。

Name「FTP_SERVER」・・・Secret「ftpサーバのホスト」
Name「FTP_USERNAME」・・・Secret「ftpサーバのユーザー名」
Name「FTP_PASSWORD」・・・Secret「ftpサーバのパスワード」

各自利用しているサーバのFTP情報を確認しましょう。これらの値はFileZillaでリモート接続する為に利用する値と同じものです。取得できたら、先ほどのNameとSecretの部分にそれぞれ値を入れていきましょう。
　　

入力後の画面はこのようになります。三つとも表示されていたら問題なく登録できていることになります。

ステップその３　GitHub Actionsの設定

いよいよ自動化プログラムを書いていきます。書くといっても後で載せるコードをコピペして、各自の環境に合わせて微調整するだけです。

それでは、Actionsを選択し画像のようなページを開いてください。色々と書いてありますが、今回は自作するので青色のset up a workflow yourselfをクリックしてください。
　　

コードエディタがでてきますので、ここに以下のコードを貼り付けてください。

main.yml

name: Deploy Themes

on:
  push:
    branches:
      - main

jobs:
  FTP-Deploy-Action:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      
      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: /  # GitHubリモートリポジトリの相対パス
          server-dir: //  # サーバーの絶対パス

上記のコードはGitHub ActionsのFTP関連でよく使用されているSamKirkland/FTP-Deploy-Action@v4.3.5(2024年7月時点での最新ver)を用いています。

local-dir:にはアップしたいディレクトリをリモートリポジトリのルートディレクトリからの相対パスで指定してください。末尾に/を入れるのを忘れないでください。おそらくエラーが出ます。少なくとも自分の環境ではエラーが出ました。

server-dir:にはアップ先に指定したいディレクトリの絶対パスを記述してください。こちらは相対ではいけません。FileZillaのリモート側にあるパスがここで指定する絶対パスです。
　　

コードを微調整した後、右上のCommit changesをクリックすると、画像のようなポップアップが出てきますので、こちらのCommit changesもクリックしましょう。Commit messageは任意で良いです。
　　

以上で設定は完了しました！ここまでの記述に誤りが無ければActionsを選択すると黄色のアイコンがくるくると周り、成功すると緑になってチェックマークが入ります。

ステップその4　実際にmainブランチにmergeして試す

最後にプルリクエストをして想定通りの動作をするか確認しましょう。

現在mainブランチとdevelopブランチとの間には1コミットの差分があるのでプルリクエストができます。

developブランチからmainブランチへのセルフプルリクを行いましょう！
設定に問題がなければGitHub Actionsに設定した内容に従い、サーバ上にGitHubリポジトリのコードが反映されている事が確認できます。

以上で作業は終了です！お疲れ様でした！！

まとめ

今回は「FileZillaを使わず、自動でサーバにアップロードする方法　GitHub Actionsのすすめ」というタイトルでサーバに自動デプロイする方法を紹介させていただきました。これでドラッグ&ドロップによる悲劇は起こらないようになったはずです。

ちなみに、セキュリティのことを考慮すると、本当はFTPではなくSFTPでサーバにアップロードしなければならないのですが、初めての方にはややこしくなるのでFTPでのやり方を紹介しました。

また時間がある時にSFTPや特定のファイルやディレクトリのみデプロイしない方法に関する記事も書こうと思います。ここまでお読みいただきありがとうございました。