FTPアップロードをGitプッシュで自動化する方法

Web制作ではよく「Filezilla」などのFTPクライアントを使ってサーバーにアップロードするのですが、これって正直、面倒ではありませんか？

どうせGitを使ってバージョン管理しているのなら、GitHubにプッシュ→FTPアップロードが自動でできたら…なんて思ったことはありませんか？

実はそんな便利な機能、あるんです。紹介しますね。

仕組み

ローカル環境からプッシュをすることでGitHubに反映され、その変更を自動でサーバーにアップロードするという形になります。

GitHub上でSecrets→Actionsで認証設定をする

まずは、GitHubにログインし、該当のリポジトリを選択。

そして、以下の順番でクリックしていきます。

1. Settings
2. Secrets→Actions
3. New Repository secret

New Repository secretsでの設定

New Repository secretsでは以下の３つを設定します。

1. FTP_SERVER
2. FTP_USERNAME
3. FTP_PASSWORD

それぞれにFTPのホスト、ユーザー名、パスワードを設定してください。

設定ファイルを作成

ローカルのプロジェクトフォルダに「.github/workflows/deploy.yml」を作成します。

on:
  push:
    branches:
      - main #ここは該当のブランチ
name: Deploy
jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - name: FTP-Deploy-Action
        uses: SamKirkland/FTP-Deploy-Action@2.0.0
        env:
          FTP_SERVER: ${{ secrets.FTP_SERVER }} # Secretsと揃える
          FTP_USERNAME: ${{ secrets.FTP_USERNAME }}　# Secretsと揃える
          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }} # Secretsと揃える
          LOCAL_DIR: ./
          REMOTE_DIR: /example.com/public_html/example/wp/wp-content/themes/example-theme/
                      # アップロードしたいパスを設定

設定ファイルをプッシュ

いつも通り、GitHubにプッシュしましょう。

git add .
git commit -m "github workflow追加"
git push -u origin main

他のファイルを変更してみて反映されたら成功

プッシュした後、きちんと成功したかどうかを調べるためにはGitHubを開いてみるとファイル一覧にマークが表示されます。

マークは主に3種類。

成功したら変更が反映されているかを確認してみましょう。

アップロード失敗した時に確認すること

エラーが起こる原因は以下です。

• 指定したブランチが存在しない
• secretsの各値が間違っている
• アップロードするファイルパス（REMOTE_DIR）が存在しない

その他にGitHub側で問題が起こっている可能性があるのでエラーの内容をしっかり確認しましょう。

成功していても反映されていない時に確認すること

成功しても反映されないことが多々あります。そんなときは以下を確認してみてください。

• キャッシュ削除できていない
• アップロードするファイルパス（REMOTE_DIR）の記述が間違っている

まとめ（楽になるだけじゃないメリット）

今までのFTPクライアントでは変更したファイルをドラッグ&ドロップでアップロードしていましたが、GitHubで自動アップロード設定をすることでファイルを気にする事なくアップロード可能になりました。

また、Gitを介しているので事故が起こる確率が減りました。もし事故が起こっても履歴が残っているので、そのまま戻すことも可能です。

SourceTreeなどのGitクライアントを使って作業の”見える化”をするともっと事故を減らすことができます。