【WordPress導入覚え書き】X-Serverでゼロから始めるWP開発

2023年2月23日 15:16

なにも知らないところからWP開発を始める覚え書きです。
ちょっと嘘です。レンタルサーバーを借りて、レンタルサーバーが提供している簡単インストール機能でWPをインストールして、GUIから適当なテーマを設定してWPサイトを運用した経験はちょこちょこあるので、何も知らなくはないです。
でもちゃんと開発環境を作ることについては何も知りませんぷー。という所からのスタートです。

要るもの

・レンタルサーバー
・本番用WP
・ステージング用WP
・ローカル開発用WP
・ソースコードの管理環境
・自動デプロイ設定

①本番用のサーバーを借りてWPを設置するのはちょっと待て

とりあえずサーバー借りてGUIからやれば設置は最速で終わるし、といきなり本番サーバー借りました。今回はX-Serverを使います。
そして、サーバーのGUIから簡単インストール機能を使ってWPを設置したらこの後の処理で大変見事にハマりました。
とりあえず、サーバーを借りたら一旦落ち着きましょう。

②本番用サーバーに別ドメイン設定してステージング環境を作る

本番用のサーバーに、別の適当なドメインを設定して、ステージング環境を作ります。
こちらも、簡単インストールしちゃうと後でハマるので、ドメインネームスペースを用意するにとどめます。
（どちらかというと本番用に独自ドメインの設定をして、ステージングはデフォルトのドメイン使うのがいいかもしれないです）

③ローカル開発用のローカルサーバーを用意する

今回は　Local　を利用します。

こちらのサイトからダウンロードしてインストールして、画面の指示に従ってWPを設置すると、ローカルサーバーからWPまでまとめて用意してくれます。起動やシャットダウンも直感的に出来ます。べんりー！
英語ですが、よく聞く用語しか出てこないのでそんなに困ることは無いと思います。

新規WP設置時に、PHPとWebサーバーとDBのバージョンを本番と揃えて置くとよさそう。

④本番環境にWPをインストールする

簡単インストールすると、あとでローカル環境と同期するときに問題が起きるので、クリーンインストールします。

・サーバーGUIからmySQLデータベースを作る
・WP公式サイトからパッケージをダウンロード
・ダウンロードしたパッケージを解凍
・解凍したパッケージの中身をサーバーへFTPアップロード
・サイトURLへアクセス
・GUIからデータベースアクセス設定

という比較的簡単な手順でインストールできます。詳細はググればいっぱい記事が出てくるのでいいかなって。

このとき、publicフォルダ配下に「wp」ってフォルダを作ってその中にインストールするのが一般的ですが、そうするとトップページのURLが「
http://sample.com/wp」になってしまうので、.htaccessをいじくってURLを変える方法があるんですが、これも先にやっちゃうとこの先で躓くので一旦保留。

⑤本番環境のWPをステージングとローカルに複製する

本番WPにDupricatorというプラグインを導入して、バックアップイメージを作ります。（これもググれば出てくる）

出力されたzipとphpファイルを、ローカル、ステージングそれぞれの公開フォルダに配置して、installer.phpにアクセスします。
そこで表示されるウィザードに必要事項（主にDB接続情報）を入力して実行すると、zipの中身をインストールして、WPが使える状態にしてくれます。

Local上で実行する場合、Localが自動で作ったサイトをDupricatorが出力したバックアップで上書きしてもらう形になりますので、「DBとか上書きするよ」系の注意が出ますがすべて「オッケー！」って返事すればOKです。
ステージング（本番サーバーの別ドメイン）の場合、本番時と同じようにDBだけ先に作っておいて、接続情報を入力してあげます。

ここで、X-Serverの簡単インストールをしたWPを引っ越しさせるようにすると、データベース接続エラーが出てしまって、ちょっとやそっとの頑張りでは原因を突き止めることすらできなかったので、おとなしくクリーンインストールをするのが良いと思います。

なお、本番WPをコピーすると、ログイン用アカウント情報などもコピーされますので、適宜環境ごとのアカウントを整備するなどをします。

で、Dupricatorによるサイト複製は、記事とかまですべて複製されてしまって、今後のテーマ開発には向かないのでGitHubActionsでテーマフォルダの中身だけを本番サーバーに転送する仕組みを作ります（後述）

ただし、テーマ部分しか転送されないので、それ以外のWPのGUIから設定したプラグインやらなにやらは、テストで設定する→ステージングで設定する→本番でも設定する、と手作業でやってあげる必要があります。

⑥GitHubでソースコードを管理する

この辺まで来て、「もうフルスクラッチでサイト作る方が早いのでは」まで思い始めてきましたが今回は複数人で運用をするので汎用CMSが必須です頑張れ私。

とりあえず、GitHubでソースを管理するにあたって「どのフォルダ管理すればええねん」と有識者に助言を仰いだところ、「テーマが入ってるフォルダだけを管理するのがよいです」と教えていただいたので、ひとまず素直にテーマが入っているフォルダ内にGitHubDesktop経由でリポジトリを切っておきました。
テスト環境用にWP全体のソースはそれはそれで必要なので、WP全体もそれはそれで別のリポジトリで管理しています。WP全体の管理、要るかなぁ…という気もしますが、テーマフォルダの中に置いておくと、後述の設定をした場合、テーマ用リポジトリの中身全部公開されちゃってREDMEとかDesignDocとかの置き場に困るので、その辺の置き場に使う意味でもまあ。

⑦GitHubActionsを使って自動デプロイ設定をする

GitHubActionsの導入についてだけでも余裕で数本記事が書けますが、今回はとりあえず最低限のメモだけ…

GitHubActionsとは：

GitHubが用意してくれている、GitHubリポジトリ上の操作を検知して、何かしらの処理を動かしてくれる仕組み。
「何かしらの処理」の具体的な内容は、Linux上でできる処理が大概可能だし、すでに沢山のアクションプリセット的なものが公開されているので、大概のことは数行の記述で実装できます。便利ー
命令の記述はyaml形式で、ちょちょっと箇条書きする感覚で書けちゃう。

GitHubActionsの設定方法：

①リポジトリ内に「.github」フォルダを用意し、さらにその中に「workflows」フォルダを作ります。
②「workflows」フォルダの中に「任意のアクション名.yaml」というファイルを用意して入れておきます
③リモートリポジトリに公開すれば、yaml内で定義されたアクションが実行されます
簡単！

yamlを作る

「stagingブランチにpushされたらstaging用サーバー上のファイルをブランチの中身と同期する」設定は以下の通り。
（「同期する」なので、リポジトリ内が無の時に、すでに中身が存在しているフォルダに対して同期しちゃうとリモート側が無になるので要注意）

name: deploy to staging
run-name: deploy to staging by @${{ github.actor }}

on:
  push:
    branches:
      - staging

jobs:
  staging-deploy_step1:
    runs-on: ubuntu-latest
    steps:
        - run: echo "deploy to staging start"
        - name: Checkout branches
          uses: actions/checkout@v2
        - run: ls -a
        - name: Rsync deployments
          uses: burnett01/rsync-deployments@5.1
          with:
            switches: -avz --delete
            remote_path: /home/SERVER_ID/DOMAIN_FOR_STAGING/public_html/mainwp/wp-content/themes/my-theme
            remote_host: SERVER_NUMBER.xserver.jp
            remote_user: SERVER_ID
            remote_port: REMORT_PORT
            remote_key: ${{ secrets.SSH_PRIVATE_KEY }}

この「remote_path」のファイルパス間違えると大変なことになるので、WPのインストールフォルダのテーマフォルダになるように設定します。

サーバーIDとサーバー番号はX-serverのコントロールパネルから確認できます。SSHの秘密鍵もコントロールパネルから発行できます。シークレットに入れておきましょう（後述）。
ポート番号は、エックスサーバーの場合デフォルトだとダメで、10022にしないといけないそうです。

シークレットをGitHubに登録する

GitHubのリポジトリにブラウザからアクセスして、Setting＞Seacrets and variablesのところからシークレットを登録します。
登録しておいたシークレットはyaml上で ${{ secrets.NAME }} で呼び出せます。

これでようやく開発が始められます。いやぁ……長い闘いだった……

この記事が気に入ったらサポートをしてみませんか？