WordPress開発・運用

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を使ってマージしました。

Screenshot

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

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

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

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

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

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

おわりに

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

でわでわ!

WordPressテーマ開発環境を準備する前のページ

ドメイン移管でwhoisのネームサーバー変更は必須だった次のページ

関連記事

  1. 技術

    [AWS]VPC消せないけど費用はかかる悪夢

    こんにちわ、どばきちです。先日個人用に作成したAWS…

  2. 技術

    [docker][PHP]Laravel開発テンプレを作ってみた

    こんにちわ、どばきちです。いざ新規に何かしらの開発を…

  3. フリーランス

    iPhoneの領収書整理を自動化してみた話 構成編

    こんにちわ、どばきちです。前回はiPhoneの領収書…

  4. WordPress開発・運用

    [ConoHa]WordPressサーバ PHPVer7.4からVer8.3に更新した

    こんにちわ僕はConoHaWingで借りているサーバにこのブ…

  5. 技術

    CLI環境からSlackに通知する

    こんにちわ、どばきちです。今回は前回の記事の続きです…

  6. 技術

    HHKBでMacにログインできるようになった!

    こんにちわ、どばきちです。普段僕はHappy Hac…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

2024年12月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
  1. フリーランス

    iDecoへの移換と掛金設定はまた別の話
  2. フリーランス

    祝フリーランス開業1周年!
  3. フリーランス

    年金の申請マイナポータルでできる!
  4. フリーランス

    インボイスの登録申請。。気をつけて!
  5. フリーランス

    2022年分の確定申告、納税しました
PAGE TOP