
マイケル
みなさんこんばんは!
マイケルです!
マイケルです!

エレキベア
クマ〜〜〜

マイケル
今日は前回に引き続き、WordPress環境構築を進めていくよ!
第二回ということで、
・公開中のWordPressブログのGit管理
・ローカル開発環境構築
・TypeScript、Stylus環境の導入
を実施していきます!
第二回ということで、
・公開中のWordPressブログのGit管理
・ローカル開発環境構築
・TypeScript、Stylus環境の導入
を実施していきます!

エレキベア
ついにこのブログの開発環境を構築するクマね

マイケル
公開中のブログと同等の環境を作るから、
DB環境の移行も必要で少し大変だけどがんばっていこう!
DB環境の移行も必要で少し大変だけどがんばっていこう!

エレキベア
楽しみクマ〜〜〜
公開中ブログのGit管理

マイケル
最終的に構築したい環境は下記の通り!
修正する資産についてはGitHubで管理するようにし、
WordPress側の更新があることも考慮してサーバ、ローカルの双方でGit操作できるようにしてみます!
修正する資産についてはGitHubで管理するようにし、
WordPress側の更新があることも考慮してサーバ、ローカルの双方でGit操作できるようにしてみます!

エレキベア
シンプルな構成クマね

マイケル
というわけでまずは必要なWordPress資産をGit管理していこう!
事前準備

マイケル
作業の準備として、WordPressサーバの
・ssh接続の設定
・DB接続情報の確認
をしておく必要があります。
このあたりは契約しているサーバによって確認方法が違うと思うので、各自調べてみてください!
・ssh接続の設定
・DB接続情報の確認
をしておく必要があります。
このあたりは契約しているサーバによって確認方法が違うと思うので、各自調べてみてください!

エレキベア
しょっぱなから投げたクマ・・・

マイケル
例としてXServerを使用している場合は下記箇所になります!
ssh接続の設定

マイケル
ssh接続はサーバパネルのSSH設定から設定することができます。
詳細は下記のマニュアルを参照しましょう!
詳細は下記のマニュアルを参照しましょう!
DB接続情報の確認

マイケル
DB接続情報についてもサーバパネルのMySQL設定から確認することができます。
後々DBのエクスポートをする際に使用するので、メモしておきましょう!
後々DBのエクスポートをする際に使用するので、メモしておきましょう!
↑DB接続情報
バックアップの取得

マイケル
そして作業前には必ずバックアップを取得しておきましょう!
作業中に何かあっても都会のエレキベアは一切保証しません。。
作業中に何かあっても都会のエレキベアは一切保証しません。。

エレキベア
非情クマ・・・
必要な資産をGitHubへpushする

マイケル
事前準備が完了したところで、資産をGit管理していきます。
まずはGitHubのリポジトリを作成しましょう。
この時、公開するべきではないのでプライベートリポジトリで作成することをおすすめします。
まずはGitHubのリポジトリを作成しましょう。
この時、公開するべきではないのでプライベートリポジトリで作成することをおすすめします。

マイケル
そしてWordPressサーバにssh接続した後、
【ドメイン名】/public_html/配下でgit initし、.gitignoreを作成します!
【ドメイン名】/public_html/配下でgit initし、.gitignoreを作成します!

マイケル
.gitignoreにはGit管理したくない資産を指定します。
こちらはWordPress用の定義が公開されているので、こちらをベースに記述しましょう!
こちらはWordPress用の定義が公開されているので、こちらをベースに記述しましょう!
↑.gitignoreの記述(一部追記)

マイケル
自分の環境では更に不要なファイルがあったので、いくつか追記しています。
基本的に管理が必要な資産は
・/wp-content/themes
・/wp-content/plugins
のみなので、git statusで差分を確認しながら定義しましょう!
基本的に管理が必要な資産は
・/wp-content/themes
・/wp-content/plugins
のみなので、git statusで差分を確認しながら定義しましょう!

エレキベア
確か他のフォルダはWordPressのコアファイルだから
基本的にいじらないのだったクマね
基本的にいじらないのだったクマね

マイケル
それと/wp-content/uploadsも容量が大きいため、別途ローカルにコピーしてくる方がよいでしょう。。

マイケル
定義して差分が問題なさそうなら、作成したリポジトリにpushしましょう!
↑作成したリポジトリへpush

マイケル
これでリポジトリに対象資産が格納されているはずです!

エレキベア
簡単クマ〜〜〜
.gitへのアクセスを防ぐ

マイケル
リポジトリ作成はこれで完了ですが、public_html配下に作成したため、今の状態ではブラウザ上から.gitにアクセスできるという危険性があります。
そのため、.htaccessに「RedirectMatch 404 /\.git」を追記してURLに.gitが指定された場合には弾くよう対応しておきましょう!
そのため、.htaccessに「RedirectMatch 404 /\.git」を追記してURLに.gitが指定された場合には弾くよう対応しておきましょう!
参考:
ドキュメントルート配下のコンテンツをGitを用いてデプロイする時のセキュリティ上の注意点
↑.gitを含むURLを弾く

エレキベア
セキュリティの恐ろしさクマ・・・
ローカル開発環境の構築

マイケル
それではいよいよローカルに開発環境を構築していきます!
WordPressのDocker環境構築

マイケル
まずは最低限のWordPress環境を構築しましょう!
こちらは前回と手順はほぼ同様です。
こちらは前回と手順はほぼ同様です。

マイケル
docker-compose.ymlを下記のように作成して・・・

マイケル
docker compose up -dで起動するのみ!
最低限の環境を構築するため、https://elekibear.comにアクセスしてwordpressのインストールまで行っておきましょう!
最低限の環境を構築するため、https://elekibear.comにアクセスしてwordpressのインストールまで行っておきましょう!

エレキベア
ここまでは前回と同様クマね
DB環境の移行

マイケル
そして次はDB環境の移行!
WordPressサーバにssh接続して下記コマンドでDBダンプをエクスポートしましょう!
WordPressサーバにssh接続して下記コマンドでDBダンプをエクスポートしましょう!
↑DBダンプのエクスポート

マイケル
そしてローカル環境でDockerコンテナを立ち上げた状態で
下記コマンドを実行しDBダンプをインポートします!
下記コマンドを実行しDBダンプをインポートします!

マイケル
うまくいけば下記のように本番データがインポートされていることを確認できるはずです!
自分はCocoonテーマを使用しているため、デフォルトよりもテーブルが多い状態となっています。。
自分はCocoonテーマを使用しているため、デフォルトよりもテーブルが多い状態となっています。。

エレキベア
すんなりとデータ移行できたクマね

マイケル
しかし、移行直後の状態ではいくつかの項目が公開中のブログのURLで設定されているため、
こちらをローカルからアクセスするURLに変更する必要があります。
こちらをローカルからアクセスするURLに変更する必要があります。

エレキベア
elekibear.comの設定のままになっているクマね

マイケル
変更が必要なのは
・wp_optionsテーブル – option_valueカラム
・wp_postsテーブル – guidカラム、post_contentカラム
・wp_postmetaテーブル – meta_valueカラム
のようなので、こちらを下記のSQLで置換します!
・wp_optionsテーブル – option_valueカラム
・wp_postsテーブル – guidカラム、post_contentカラム
・wp_postmetaテーブル – meta_valueカラム
のようなので、こちらを下記のSQLで置換します!
今回の場合、ローカルのポートは8000なので、
http(s)://XXX.com -> https://elekibear.com
といった形で変更することになります。
参考:
リモートサーバーのWordPressをローカル(自分のPC)のDockerに移管する方法を実例で解説|コマンドライン(mysqlとmysqldump)

マイケル
SQLの実行が完了したら、各カラム内の値が正常に置換されているか確認しましょう!

エレキベア
失敗したら再度ダンプインポートクマ〜〜
Git Cloneとその他資産の移行

マイケル
あとはGitリポジトリ資産とWordPressコアファイルを結合させるのみ!
手順としてはコンテナを一旦停止させた後、マウントしているhtmlフォルダを一旦退避しておきます。
手順としてはコンテナを一旦停止させた後、マウントしているhtmlフォルダを一旦退避しておきます。
↑htmlフォルダの退避

マイケル
そしてhtmlフォルダにGit資産をクローンした後、
退避したファイル(WordPressコアファイル)をhtmlフォルダにコピーします。
コアファイルは.gitignoreで定義しているので、差分は発生しないはずです!
退避したファイル(WordPressコアファイル)をhtmlフォルダにコピーします。
コアファイルは.gitignoreで定義しているので、差分は発生しないはずです!

エレキベア
うまく結合できたクマね

マイケル
あとは/wp-content/uploadsから必要なファイルをローカルにコピーしてくれば環境構築は完了です!
容量がそれなりにあると思うので、ローカルでの確認に必要なものだけコピーしましょう。
自分は画像類とCocoonのリソースファイルを持ってきました。
容量がそれなりにあると思うので、ローカルでの確認に必要なものだけコピーしましょう。
自分は画像類とCocoonのリソースファイルを持ってきました。

エレキベア
これで本番環境と同等になったクマね
接続できるか確認

マイケル
環境ができたらdocker compose up -dして、
https://elekibear.comに接続して表示されるか確認してみましょう!
https://elekibear.comに接続して表示されるか確認してみましょう!

マイケル
このように自分のブログが表示されれば完了です!

エレキベア
やったクマ〜〜〜〜

マイケル
あとは同様に、https://elekibear.com/wp-adminにもアクセスして、
管理画面にもアクセスできるか確認しておきましょう。
管理画面にもアクセスできるか確認しておきましょう。

エレキベア
管理画面も表示されたクマ〜〜
でも公開中のと見た目が同じだから少しビクビクするクマね
でも公開中のと見た目が同じだから少しビクビクするクマね

マイケル
あとは、うまく表示されない場合にはブラウザのキャッシュが影響している可能性もあるため、一度キャッシュを削除して試してみるといいかもしれません・・・。
TypeScript、Stylus環境の導入
TypeScript、Stylus環境の構築

マイケル
ここからは自分の好みになりますが、使い慣れた
TypeScriptとStylusを使用して修正できるようにしてみようと思います。
TypeScriptについては以前、下記記事で触ったのでこちらも参照してみてください!
TypeScriptとStylusを使用して修正できるようにしてみようと思います。
TypeScriptについては以前、下記記事で触ったのでこちらも参照してみてください!

エレキベア
懐かしいクマ〜〜〜

マイケル
nodejsについてはインストールされている前提で進めていきます!
導入手順が分からない方は nodejs インストール 等でググりましょう!
導入手順が分からない方は nodejs インストール 等でググりましょう!

エレキベア
クマはインストール済クマ〜〜〜

マイケル
編集するのはテーマファイルになるため、子テーマフォルダ配下でnpm initします!
自分の場合はCocoonの子テーマを編集するため、wp-content/themes/cocoon-child-master配下になります。
自分の場合はCocoonの子テーマを編集するため、wp-content/themes/cocoon-child-master配下になります。

マイケル
そしてTypeScript、Stylus関連のパッケージをインストールし、
tsconfig.jsonを作成します。
tsconfig.jsonを作成します。

マイケル
今回、tsconfig.jsonの定義は下記のようにしました!
src/ts配下のtsファイルをsrc/js配下にトランスパイルするようにしています。
src/ts配下のtsファイルをsrc/js配下にトランスパイルするようにしています。

エレキベア
シンプルな定義クマね

マイケル
そしてpackage.jsonにbuildコマンドを定義しておきましょう!
下記はStylusのビルドコマンド(build:stylus)とTypeScriptのビルドコマンド(build:ts)を合わせて実行するよう定義してあります。
下記はStylusのビルドコマンド(build:stylus)とTypeScriptのビルドコマンド(build:ts)を合わせて実行するよう定義してあります。

マイケル
あとはnpm run buildするだけでトランスパイルが実行されるはずです!

エレキベア
シンプルで楽に環境を作れたクマね

マイケル
あとはgitignoreにnode_modulesフォルダも管理対象外とするよう定義しておきましょう。
これで環境構築は完了です!
これで環境構築は完了です!

エレキベア
やったクマ〜〜〜
簡単な修正とPHPファイルからの読込

マイケル
それでは動作確認も含めて簡単な修正を行ってみましょう!
テーマフォルダ配下にsrc/ts/index.tsを作成し、下記のようにアラートを出す処理を記述してみましょう。
テーマフォルダ配下にsrc/ts/index.tsを作成し、下記のようにアラートを出す処理を記述してみましょう。

マイケル
npm run buildするとsrc/js/index.jsが出力されるはずなので、
これをfunction.php内で下記のように読み込みます。
これをfunction.php内で下記のように読み込みます。

マイケル
この状態でブラウザからアクセスすると、
アラートが表示されることが確認できました!
アラートが表示されることが確認できました!

エレキベア
正常に動作しているクマね

マイケル
そして次はスタイルの修正確認です。
TypeScriptと同様、src/styl/index.stylを作成し、下記のようにカテゴリアイテムの透明度が徐々に上がりながら表示されるように記述してみます。
TypeScriptと同様、src/styl/index.stylを作成し、下記のようにカテゴリアイテムの透明度が徐々に上がりながら表示されるように記述してみます。

マイケル
こちらもnpm run buildするとsrc/css/index.cssが出力されるため、
function.phpから読み込みます。
function.phpから読み込みます。

マイケル
この時、キャッシュを無効にするため
CSSのバージョンは日時で指定するようにしています。
CSSのバージョンは日時で指定するようにしています。

マイケル
この状態でブラウザから操作してみると、
下記のようにスタイルが反映されていることが確認できました!
下記のようにスタイルが反映されていることが確認できました!

エレキベア
やったクマ〜〜〜〜
修正内容の反映

マイケル
環境構築は異常となりますが、
最後に修正内容の反映方法についても記述しておきます。
最後に修正内容の反映方法についても記述しておきます。

マイケル
ローカルでの開発時には、下記のように修正用ブランチを切って作業しましょう。
修正が完了したらpushしてmainブランチにマージします。
修正が完了したらpushしてmainブランチにマージします。

エレキベア
ブランチを切って作業しておかないと
本番環境とGit環境で差分が出ている状態になってしまうクマね
本番環境とGit環境で差分が出ている状態になってしまうクマね

マイケル
mainブランチに反映したら、WordPressサーバにssh接続して、git pullするのみ!
以上で修正内容が反映されるはずです!
以上で修正内容が反映されるはずです!

エレキベア
簡単クマ〜〜〜〜
おわりに

マイケル
というわけで、今回はWordPressの開発環境構築でした!
どうだったかな?
どうだったかな?

エレキベア
手順は少しややこしかったクマが
順番にやればうまくいってよかったクマ
順番にやればうまくいってよかったクマ

マイケル
これでやっといじり放題だね!
でもやっぱりWordPressや既存テーマに対してのカスタマイズになるからどうしてもやり辛いところはありそうだ・・・。
一から作りたいくらいだけど仕方がない・・・。
でもやっぱりWordPressや既存テーマに対してのカスタマイズになるからどうしてもやり辛いところはありそうだ・・・。
一から作りたいくらいだけど仕方がない・・・。

エレキベア
手軽に作れるのがWordPressのメリットだからクマね

マイケル
ひとまず環境はできたから、少しずつブログ改修も行っていこう!
それでは今日はこの辺で!アデュー!!
それでは今日はこの辺で!アデュー!!

エレキベア
クマ〜〜〜〜
【ブログ改造計画】公開中のブログをGit管理して開発環境を構築する【WordPress】 〜完〜