YATのBlog

当ブログでは商品やサービスの紹介にアフィリエイト広告を掲載しています

Web制作を行う全ての方へ

GitHub Actions を使って WordPress のテーマをデプロイ(アップロード)する

FTP を使ったアップロードが面倒なのでなるべく Git と連携したデプロイをしたい。そうなると CI のサービスが割と主流なんですが、GitHub Actions を使うともっとお手頃にローカルからサーバーへデータ転送ができるのでやり方を書いておきます。

レンタルサーバー

WordPress のお仕事だとエックスサーバーやさくらインターネットを使うことが多いのですが、この場合は転送に FTP を利用します。

まず設定するのは、リポジトリにある Settings の secrets に FTP 情報などを登録します。

ここで登録する内容は外部から見えないので安心して利用可能。

テスト環境と本番環境など転送先サーバーが複数存在する場合はそれぞれの値を一つ一つ入力して保存していきます。

Action secrets のスクリーンショット

最初は何も項目がないので、 New repository secret のボタンをクリックし

  • 登録名
  • 登録内容

を入力して保存していきます。

  • FTP_PASSWORD → レンタルサーバーから提供される FTP のパスワード
  • FTP_SERVER → レンタルサーバーから提供される FTP のホスト情報
  • FTP_USERNAME → レンタルサーバーから提供される FTP のユーザーネーム
  • TEST_FTP_PASSWORD → テストサーバー用の FTP パスワード
  • TEST_FTP_SERVER→ テストサーバー用の FTP ホスト情報
  • TEST_FTP_USERNAME→ テストサーバー用の FTP ユーザーネーム

GitHub で入力するのは以上です。

次にデプロイに必要なファイルをプロジェクトに追加します。

.git がある同階層にディレクトリとファイルを設置

/.git
 /.github/workflows/deploy.yml

上記になるようディレクトリ .github/workflows/ を作成し、workflow の中に ***.yml として(ファイル名は自由)yamlファイルを作成します。

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
name: Deploy
jobs:
  test:
    name: Upload Staging
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - name: Upload Staging
        uses: SamKirkland/FTP-Deploy-Action@2.0.0
        env:
          FTP_SERVER: ${{ secrets.TEST_FTP_SERVER }}
          FTP_USERNAME: ${{ secrets.TEST_FTP_USERNAME }}
          FTP_PASSWORD: ${{ secrets.TEST_FTP_PASSWORD }}
          LOCAL_DIR: ./
          REMOTE_DIR: /public_html/
  production:
    name: Upload Production
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - name: Upload Production
        uses: SamKirkland/FTP-Deploy-Action@2.0.0
        env:
          FTP_SERVER: ${{ secrets.FTP_SERVER }}
          FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
          LOCAL_DIR: ./
          REMOTE_DIR: /public_html/

on: 以下に必要なコードを記述していきますが、このサンプルでは main ブランチに push もしくは pull_request でデプロイを実行するようにしています。

  • name: はこのコードの名前で何でも構いません。
  • jobs: 以下にデプロイに利用する処理を記述していきます。
  • test: は テスト環境へのデプロイ、production: は本番環境へのデプロイ
    • name: デプロイ処理の名前
    • runs-on: ここで指定したランナー環境で実行されます。ジョブに対する時間は無料枠だと2000分まで。詳しくはドキュメントの使用制限を確認してください。GitHub Docs: 使用制限、支払い、管理
    • steps: ここから順番で処理が実行されます
    • uses: ブランチのチェックアウト
    • name: 実行するアクションの名前
    • env: デプロイの実行。必要な情報は見えてしまうと困るので、先程登録した secrets の内容を取得して実行します。
    • LOCAL_DIR: 転送元(GitHub)のドキュメントルート
    • REMOTE_DIR: 転送先(サーバー)の転送先となるディレクトリ

最初は main ブランチに push すれば実行されます。

SSH を使ったデプロイ(VPSなど)

レンタルサーバーで SSH を使う場合も同じです。ただしパスフレーズが使えないので、レンタルサーバーで鍵を登録する場合はパスフレーズを入力せずに登録してください。

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
name: Deploy
jobs:
  production:
    name: Upload Production
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: install SSH key
        uses: shimataro/ssh-key-action@v2
        with:
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          name: ida_rsa
          known_hosts: ${{ secrets.KNOWN_HOSTS }}
      - name: Deploy
        run: rsync -rlOcv --omit-dir-times --exclude ".git/" --exclude ".github/" -e "ssh -i ~/.ssh/ida_rsa -p ${{ secrets.SSH_PORT }}" ./ ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:/public_html/

SSH の場合デプロイに rsync を利用します。

FTP の設定と異なるのは

  • SSH キーを secrest に登録
  • kown_host の登録
  • rsync での ssh の接続設定

SSH キーを secrest に登録

secret に サーバーとの接続で利用している SSH キーを登録します。

kown_host の登録

secret に登録します。手順は

  1. ローカルの端末でターミナルを使い ssh-keyscan -H ホストのアドレス >> ~/.ssh/known_hosts を実行
  2. ~/.ssh/known_hosts をエディタで開き、ホストアドレスの部分をコピーして secret に貼り付け actions/checkout@v2 ではこの設定が必要になっています。(v1 では不要だった)

rsync での ssh の接続設定

rsync のオプションに -rlOcv をつけています。色々と調べていると -ahvz をつけているものが多かったんですが、これだと転送はされるものの転送時に sync: failed to set times on "/***/***/.": Operation not permitted (1) というエラーが出力されていたので、権限周りでエラーが発生したため、転送時の権限に影響がないように変更してこの形にしました。

権限についてはドキュメントを読むか、rsyncオプション を参考してみてください。

あとは main に push すればデプロイされます。

pull_request でデプロイしたい場合は、FTP のサンプルに合わせてコードを編集してください。

お役に立てたらお願いします🙇

Kyashで送金する

Ad



Share