どばきちブログ

こんにちわ

前々回はこちらで、WordPressのローカル開発環境の構築方法について書いてみました。

[docker]WordPressのローカル開発環境を用意してみた

その続きとして、前回はWordPressのローカル開発環境を使って実際にテーマの開発ができる環境にについて書いてみました。

WordPressテーマ開発環境を準備する

そして今回はWordPressテーマを開発してローカル環境で動作確認したコードを本番環境にデプロイするということをやってみようと思います。

デプロイのイメージ

今回実現するデプロイのイメージは以下の図の様になります。GitHubActionsを使ったデプロイを想定しています。一つひとつについては後述します。

1. (GitHubに)pushする

前回までに対応したテーマフォルダを丸ごとGitHubで管理することを想定しています。ローカルで開発、動作確認したファイルをpushします。mainブランチに対してpushかマージされたタイミングをトリガー(きっかけとして起動)とするので、今回はmainブランチから切った機能ブランチに対してpushして、その後PullRequestを用意してマージすることでmainブランチに反映するようにしました。

2.pushをトリガーとして(GitHub Actions)実行する

あらかじめGitHub Actionsの設定をしておくことで、pushやマージをトリガーにしてデプロイなどの処理を実行することができます。

3.(本番環境に)デプロイする

GitHub Actionsを使ってmainブランチの内容を、このブログを置いているサーバーにデプロイします。

4.参照する

一般ユーザーは3のデプロイが完了した時点で本番環境でその変更を確認することができます。

実際にやってみる

修正対象はなんでも良かったのですが、今回はプロフィールで表示しているSNSアイコンにGitHubも追加することにしました。TikTokとかInstagramはあったのですが、GitHubが未対応だったので。(修正内容自体は個別に購入したテーマ限定の話になりますし、今回のデプロイの話とはまた別なので今回は特に触れません。)

1.GitHub Actionsの設定をする

デプロイ対象としたいリポジトリで、.github/workflows/というファイルを作ってymlファイル(設定ファイル)を配置します。今回はdeploy.ymlという名前で以下の様な設定としてpush済みの状態にしました。

name: DEPLOY to dubakichi blog server
on:
  push:
    branches:
    - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: rsync deployments
      uses: burnett01/rsync-deployments@7.0.1
      with:
        switches: -avzr --delete
        path: .
        remote_path: ${{ secrets.REMOTE_PATH }}
        remote_host: ${{ secrets.REMOTE_HOST }}
        remote_port: ${{ secrets.REMOTE_PORT }}
        remote_user: ${{ secrets.REMOTE_USER }}
        remote_key: ${{ secrets.SSH_PRIVATE_KEY }}

1. mainブランチへのpush、マージをトリガーとして開始する
2. 実行環境はubutu-latestの環境を使う
3. rsync(remoteの接続先とファイル同期するツール)を使ってデプロイする。デプロイ先への接続に必要な情報はSecretsを使って渡している

補足

Secretsの作成方法についてはこちらのドキュメントをご確認いただければと思います。

GitHub Actions でのシークレットの使用

今回使用したrync-deploymentsについての詳細はこちらにあります。

rsync-deployments

GitHub Actionsの公式ドキュメントもこちらに置いておきます。

GitHub Actions を理解する

2.編集内容を機能ブランチにpushする

編集(何かしら本番環境でもわかりやすいものが良いかと)をして、GitHubのリポジトリに機能ブランチとしてpushする。(mainに直接pushでもやりたいことはできると思います）

3.mainブランチにマージする

以下の様にPullRequestを使ってマージしました。

4.待ってみる(GitHub Actionsが動き出してデプロイ始めます)

デプロイの状況はGitHubの該当リポジトリの「Actions」タブで確認できます。

以下は実際にActionsが動き出したのを確認した時のスクショです。

左のアイコンがグリーンのチェックが付いたら終わっています。

5.本番環境で動作確認してみる

管理画面と実際のブログの画面どちらにも反映されていることを確認とのでOK。

おわりに

今回まででWordPressのローカル環境を用意して、テーマをローカルで修正、動作確認。そして、本番環境に反映するといった実際に一般公開するまでの一連のフローができるようになったのではないかと思います。今回はmainブランチを直接本番環境に反映しましたが、ステージング環境、本番環境みたいにデプロイ先を分けてみるのも良いかもです。WordPressはテーマを有効化する前にプレビューで確認ができるので、そこで確認してから本番反映するとより安全にデプロイできるかなと思いました。

でわでわ！