GitHubのリポジトリでmainブランチにプッシュされたら、ファイルを自動でサーバーにアップロード(デプロイ)する方法をご紹介いたします。

Github Actionsの機能を使うことで自動アップロードを実現できます。この記事では設定方法などを解説いたします。

ステップ1. SSHでリポジトリをクローン

まず前提として、リポジトリをSSHでクローンしておく必要があります。すでにSSHでクローンしている場合は、ステップ1は飛ばしてください。

元々はHTTPSでクローンしていたのですが、HTTPSだと自動アップロード用のファイルをプッシュしようとしても、Workflowの実行権限がない理由でエラーになってしまいました。

git -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks push -v origin main:main
Pushing to https://github.com/username/test.git
POST git-receive-pack (956 bytes)
To https://github.com/username/test.git
 ! [remote rejected] main -> main (refusing to allow an OAuth App to create or update workflow `.github/workflows/main.yaml` without `workflow` scope)
error: failed to push some refs to 'https://github.com/username/test.git'

エラー終了しました。エラーの内容は上記をご覧ください。

HTTPSでクローンしていてもWorkflowの機能を使えるように設定すればいけると思うのですが、色々と試してダメだったのでSSHでのクローンに切り替えることにしました。

SSHキーの生成(VSCode)

SSHでクローンするためには、SSHキーの登録が必要です。今回はVSCodeからキーを作成する方法でご説明いたします。OSはWindows11です。

VSCodeの[ターミナル] -> [新しいターミナル]でターミナル画面を開きます。そこで「ssh-keygen」を実行します。

以下3つを何も入力せずにEnterで進みます。

• Enter file in which to save the key
• Enter passphrase
• Enter same passphrase again

以下のように表示されたらSSHキーの作成完了です。

SSHキーの登録(GitHub)

「C:\Users\ユーザー名\.ssh」に「id_〇〇.pub」というファイルが作成されているので、これをテキストエディターで開きます。

GitHubの[Settings] -> [SSH and GPG keys]を開いて、[New SSH key]をクリックします。

Titleにはわかりやすい名前を入れて、Keyに「id_〇〇.pub」の内容をそのまま貼り付けて保存します。Key typeは”Authentication Key”のままでOKです。

リポジトリのクローン(SourceTree)

VSCodeのターミナル上でgit cloneを実行してクローンしても良いですが、普段SourceTreeを使っているため、ここではSourceTreeでクローンする方法を解説いたします。

まずは、SourceTreeの[ツール] -> [オプション] -> [全般]で”SSHキー”と”SSHクライアント”を設定します。SSHキーは、「C:\Users\ユーザー名.ssh」に生成された「id_〇〇」という.pubではない方のファイルを指定します。SSHクライアントはOpenSSHに変更します。

ここまで設定できたら、SSH用の「git@github.com:ユーザー名/リポジトリ名.git」の方を使ってリポジトリをクローンします。

ステップ2. 自動アップロードを実行するための設定ファイル作成

SSHでのリポジトリのクローンができたら、自動アップロードのための設定ファイルを作成します。

該当リポジトリのフォルダ内に「.github/workflows/main.yaml」というファイルを作成します。(.githubとworkflowsはフォルダです。.githubフォルダの中のworkflowsフォルダの中にmain.yamlを作成します)

ファイルの中身は下記の通りです。

on:
  push:
    branches:
      - main
  workflow_dispatch:

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.6
      with:
        server: ${{ secrets.FTP_SERVER }}
        username: ${{ secrets.FTP_USERNAME }}
        password: ${{ secrets.FTP_PASSWORD }}
        server-dir: ${{ secrets.FTP_SERVER_DIR }}
        exclude: |
          .git*
          .git*/**
          node_modules/**
          package.json
          yarn.lock
          composer.lock
          composer.json
          vendor/**
          .vscode/**
          README.md

server/username/password/server-dirはGitHub側で設定を追加します。

excludeは、サーバーにはアップロードしない、除外ファイルや除外ディレクトリです。環境に合わせて追加してください。

なお、自動アップロードは、FTP-Deploy-Actionというライブラリを使います。使用するバージョンを変更する際は「SamKirkland/FTP-Deploy-Action@v4.3.6」の部分を変更してください。

ステップ3. GitHubでRepository Secretsの登録

GitHubで該当リポジトリを開きます。[Settings] -> [Secrets and variables] -> [Actions]を開いて、[New repository secret]で以下4つを登録します。

• FTP_SERVER：FTPサーバーのホスト名
• FTP_USERNAME：FTPアカウントのユーザー名
• FTP_PASSWORD：FTPアカウントのパスワード
• FTP_SERVER_DIR：ファイルをアップロードするディレクトリパス

例えば、FTPユーザー名が「test」の場合、Nameには”FTP_USERNAME”、Secretには”test”と入力します。

FTP_SERVER_DIRは最後に / を入れてください。例えば「/example.com/public_html/test/」といった感じです。

ステップ4. mainブランチへのプッシュ&自動アップロードの確認

ここまでできたら、作成したmain.yamlをmainブランチへプッシュします。作業ブランチからマージ→プッシュでOKです。

GitHubで該当リポジトリから[Actions]タブを開くと、以下のように自動アップロードが実行されたのが確認できます。実際にサーバー上にファイルがアップロードされているかもご確認ください。

これ以降はコミットがmainブランチにプッシュされる度に、自動でサーバーにファイルがアップロードされるようになります。

なお、自動アップロードされると、サーバー上に.ftp-deploy-sync-state.jsonというファイルが生成されます。これはアップロードされたファイルの追跡用ファイルで、これにより2回目以降の自動アップロードでは差分のみが処理されるようになります。

.ftp-deploy-sync-state.jsonを消してしまうと次のActionsの実行時にエラーになってしまうので削除しないように気をつけましょう。

また、.ftp-deploy-sync-state.jsonにブラウザからアクセスできてしまうとセキュリティ上よろしくないので、.htaccessに以下を追加してアクセスを拒否するようにしておくと良いですね。

<Files ".ftp-deploy-sync-state.json">
  Order allow,deny
  Deny from all
</Files>

あとがき

初めて設定するときは少々ややこしく感じますが、一度やってみると次からは迷わなくなると思います。

FileZillaなどのFTPクライアントを開かなくて良くなるのは便利ですね。設定さえちゃんとしていれば、間違えて本番環境に上書きしてしまった、というミスもなくなります。

普段GitHubを使っていて、サーバーに自動アップロードさせたい時は、ぜひ参考にしていただければ幸いです。