【ブログ改造計画】公開中のブログをGit管理して開発環境を構築する【WordPress】

Docker
マイケル
マイケル
みなさんこんばんは!
マイケルです!
エレキベア
エレキベア
クマ〜〜〜
マイケル
マイケル
今日は前回に引き続き、WordPress環境構築を進めていくよ!
第二回ということで、
・公開中のWordPressブログのGit管理
・ローカル開発環境構築
・TypeScript、Stylus環境の導入

を実施していきます!
エレキベア
エレキベア
ついにこのブログの開発環境を構築するクマね
マイケル
マイケル
公開中のブログと同等の環境を作るから、
DB環境の移行も必要で少し大変だけどがんばっていこう!
エレキベア
エレキベア
楽しみクマ〜〜〜
スポンサーリンク

公開中ブログのGit管理

マイケル
マイケル
最終的に構築したい環境は下記の通り!
修正する資産についてはGitHubで管理するようにし、
WordPress側の更新があることも考慮してサーバ、ローカルの双方でGit操作できるようにしてみます!
20220425 10↑ローカル、サーバ双方でGit操作ができるようにする
エレキベア
エレキベア
シンプルな構成クマね
マイケル
マイケル
というわけでまずは必要なWordPress資産をGit管理していこう!

事前準備

マイケル
マイケル
作業の準備として、WordPressサーバの
・ssh接続の設定
・DB接続情報の確認
をしておく必要があります。
このあたりは契約しているサーバによって確認方法が違うと思うので、各自調べてみてください!
エレキベア
エレキベア
しょっぱなから投げたクマ・・・
マイケル
マイケル
例としてXServerを使用している場合は下記箇所になります!
ssh接続の設定
マイケル
マイケル
ssh接続はサーバパネルのSSH設定から設定することができます。
詳細は下記のマニュアルを参照しましょう!

SSH設定 | エックスサーバー

20220425 01↑SSH設定
DB接続情報の確認
マイケル
マイケル
DB接続情報についてもサーバパネルのMySQL設定から確認することができます。
後々DBのエクスポートをする際に使用するので、メモしておきましょう!
20220425 02
↑DB接続情報
バックアップの取得
マイケル
マイケル
そして作業前には必ずバックアップを取得しておきましょう!
作業中に何かあっても都会のエレキベアは一切保証しません。。
エレキベア
エレキベア
非情クマ・・・

必要な資産をGitHubへpushする

マイケル
マイケル
事前準備が完了したところで、資産をGit管理していきます。
まずはGitHubのリポジトリを作成しましょう。
この時、公開するべきではないのでプライベートリポジトリで作成することをおすすめします。
20220425 03↑プライベートリポジトリで作成する
マイケル
マイケル
そしてWordPressサーバにssh接続した後、
【ドメイン名】/public_html/配下でgit initし、.gitignoreを作成します!
# WordPressサーバにssh接続後、該当サイトのpublic_htmlに移動
cd 【ドメイン名】/public_html/

# git環境作成
git init

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

github / gitignore – GitHub

# WordPress - ignore core, configuration, examples, uploads and logs.
# https://github.com/github/gitignore/blob/main/WordPress.gitignore

# Core
#
# Note: if you want to stage/commit WP core files
# you can delete this whole section/until Configuration.
/wp-admin/
/wp-content/index.php
/wp-content/languages
/wp-content/plugins/index.php
/wp-content/themes/index.php
/wp-includes/
/index.php
/license.txt
/readme.html
/wp-*.php
/xmlrpc.php

# Configuration
wp-config.php

# Example themes
/wp-content/themes/twenty*/

# Example plugin
/wp-content/plugins/hello.php

# Uploads
/wp-content/uploads/

# Log files
*.log

# htaccess
/.htaccess

# All plugins
#
# Note: If you wish to whitelist plugins,
# uncomment the next line
#/wp-content/plugins

# All themes
#
# Note: If you wish to whitelist themes,
# uncomment the next line
#/wp-content/themes

# *** Add ***
/wp-content/upgrade/
/ads.txt
/default_page.png
↑.gitignoreの記述(一部追記)
マイケル
マイケル
自分の環境では更に不要なファイルがあったので、いくつか追記しています。
基本的に管理が必要な資産は
・/wp-content/themes
・/wp-content/plugins

のみなので、git statusで差分を確認しながら定義しましょう!
エレキベア
エレキベア
確か他のフォルダはWordPressのコアファイルだから
基本的にいじらない
のだったクマね
マイケル
マイケル
それと/wp-content/uploadsも容量が大きいため、別途ローカルにコピーしてくる方がよいでしょう。。
マイケル
マイケル
定義して差分が問題なさそうなら、作成したリポジトリにpushしましょう!
# 差分確認
git status

# 問題なさそうならpush
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/【リポジトリ名】.git
git push -u origin main
↑作成したリポジトリへpush
マイケル
マイケル
これでリポジトリに対象資産が格納されているはずです!
エレキベア
エレキベア
簡単クマ〜〜〜

.gitへのアクセスを防ぐ

マイケル
マイケル
リポジトリ作成はこれで完了ですが、public_html配下に作成したため、今の状態ではブラウザ上から.gitにアクセスできるという危険性があります。
そのため、.htaccessに「RedirectMatch 404 /\.git」を追記してURLに.gitが指定された場合には弾くよう対応しておきましょう!

参考:
ドキュメントルート配下のコンテンツをGitを用いてデプロイする時のセキュリティ上の注意点

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
RedirectMatch 404 /\.git
</IfModule>
↑.gitを含むURLを弾く
エレキベア
エレキベア
セキュリティの恐ろしさクマ・・・

ローカル開発環境の構築

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

WordPressのDocker環境構築

マイケル
マイケル
まずは最低限のWordPress環境を構築しましょう!
こちらは前回と手順はほぼ同様です。
マイケル
マイケル
docker-compose.ymlを下記のように作成して・・・
# プロジェクトフォルダにymlファイルとhtmlフォルダを作成
cd 【プロジェクトパス】
touch docker-compose.yml
mkdir html
version: '3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     ports:
       - "3306:3306"
     environment:
       MYSQL_ROOT_PASSWORD: test
       MYSQL_DATABASE: wordpress
       MYSQL_USER: test
       MYSQL_PASSWORD: test

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     volumes:
       - ./html:/var/www/html
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: test
       WORDPRESS_DB_PASSWORD: test
volumes:
    db_data:
マイケル
マイケル
docker compose up -dで起動するのみ!
最低限の環境を構築するため、http://localhost:8000にアクセスしてwordpressのインストールまで行っておきましょう!
# コンテナ起動
# http://localhost:8000にアクセスしてwordpressのインストールまで行う
docker compose up -d
20220425 04↑WordPressのインストール(あとでDBを上書くため何でもよい)
エレキベア
エレキベア
ここまでは前回と同様クマね

DB環境の移行

マイケル
マイケル
そして次はDB環境の移行!
WordPressサーバにssh接続して下記コマンドでDBダンプをエクスポートしましょう!
# WordPressサーバ内でダンプ出力
mysqldump 【DB名】 -h【ホスト名】 -u【ユーザ名】 -p【パスワード】 --no-tablespaces -P【ポート番号】 > 【出力ファイルパス】
↑DBダンプのエクスポート
マイケル
マイケル
そしてローカル環境でDockerコンテナを立ち上げた状態
下記コマンドを実行しDBダンプをインポートします!
# ローカル環境でインポート
# dockerコンテナを立ち上げた状態で行う
docker exec -i 【コンテナ名】 mysql wordpress -u【ユーザ名】 -p【パスワード】 < 【入力ファイルパス】
マイケル
マイケル
うまくいけば下記のように本番データがインポートされていることを確認できるはずです!
自分はCocoonテーマを使用しているため、デフォルトよりもテーブルが多い状態となっています。。
20220425 05↑インポート後のDB状態
エレキベア
エレキベア
すんなりとデータ移行できたクマね
マイケル
マイケル
しかし、移行直後の状態ではいくつかの項目が公開中のブログのURLで設定されているため、
こちらをローカルからアクセスするURLに変更する必要があります。
エレキベア
エレキベア
elekibear.comの設定のままになっているクマね
マイケル
マイケル
変更が必要なのは
・wp_optionsテーブル – option_valueカラム
・wp_postsテーブル – guidカラム、post_contentカラム
・wp_postmetaテーブル – meta_valueカラム
のようなので、こちらを下記のSQLで置換します!

今回の場合、ローカルのポートは8000なので、
http(s)://XXX.com -> http://localhost:8000
といった形で変更することになります。

参考:
リモートサーバーのWordPressをローカル(自分のPC)のDockerに移管する方法を実例で解説|コマンドライン(mysqlとmysqldump)

update `wp_options` set option_value=replace (option_value,'http://【ドメイン名】','http://localhost:8000'); 
update `wp_options` set option_value=replace (option_value,'https://【ドメイン名】','http://localhost:8000'); 
update `wp_posts` set guid=replace (guid,'http://【ドメイン名】','http://localhost:8000'); 
update `wp_posts` set guid=replace (guid,'https://【ドメイン名】','http://localhost:8000');
update `wp_posts` set post_content=replace (post_content,'http://【ドメイン名】','http://localhost:8000');  
update `wp_posts` set post_content=replace (post_content,'https://【ドメイン名】','http://localhost:8000');
update `wp_postmeta` set meta_value=replace (meta_value,'http://【ドメイン名】','http://localhost:8000'); 
update `wp_postmeta` set meta_value=replace (meta_value,'https://【ドメイン名】','http://localhost:8000');
マイケル
マイケル
SQLの実行が完了したら、各カラム内の値が正常に置換されているか確認しましょう!
エレキベア
エレキベア
失敗したら再度ダンプインポートクマ〜〜

Git Cloneとその他資産の移行

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

# htmlフォルダを一旦退避
mv html/ html_tmp/
↑htmlフォルダの退避
マイケル
マイケル
そしてhtmlフォルダにGit資産をクローンした後、
退避したファイル(WordPressコアファイル)をhtmlフォルダにコピーします。
コアファイルは.gitignoreで定義しているので、差分は発生しないはずです!
# htmlフォルダにgit clone
git clone https://github.com/【リポジトリ名】.git html/

# 不要なファイルを削除
rm -rf html_tmp/wp-content/plugins/akismet
rm html_tmp/wp-content/plugins/hello.php
# 退避したフォルダからコピー
cp -r html_tmp/ html/
rm -rf html_tmp/

# 差分の確認
# gitignoreで定義しているため無いはず...
cd html
git status
エレキベア
エレキベア
うまく結合できたクマね
マイケル
マイケル
あとは/wp-content/uploadsから必要なファイルをローカルにコピーしてくれば環境構築は完了です!
容量がそれなりにあると思うので、ローカルでの確認に必要なものだけコピーしましょう。
自分は画像類とCocoonのリソースファイルを持ってきました。
YgvTv↑uploadsフォルダ内のファイルをコピー
エレキベア
エレキベア
これで本番環境と同等になったクマね

接続できるか確認

マイケル
マイケル
環境ができたらdocker compose up -dして、
http://localhost:8000に接続して表示されるか確認してみましょう!
20220425 07↑ローカル環境で表示された!
マイケル
マイケル
このように自分のブログが表示されれば完了です!
エレキベア
エレキベア
やったクマ〜〜〜〜
マイケル
マイケル
あとは同様に、http://localhost:8000/wp-adminにもアクセスして、
管理画面にもアクセスできるか確認しておきましょう。
エレキベア
エレキベア
管理画面も表示されたクマ〜〜
でも公開中のと見た目が同じだから少しビクビクするクマね
マイケル
マイケル
あとは、うまく表示されない場合にはブラウザのキャッシュが影響している可能性もあるため、一度キャッシュを削除して試してみるといいかもしれません・・・。

TypeScript、Stylus環境の導入

TypeScript、Stylus環境の構築

マイケル
マイケル
ここからは自分の好みになりますが、使い慣れた
TypeScriptとStylusを使用して修正できるようにしてみようと思います。
TypeScriptについては以前、下記記事で触ったのでこちらも参照してみてください!
エレキベア
エレキベア
懐かしいクマ〜〜〜
マイケル
マイケル
nodejsについてはインストールされている前提で進めていきます!
導入手順が分からない方は nodejs インストール 等でググりましょう!
エレキベア
エレキベア
クマはインストール済クマ〜〜〜
マイケル
マイケル
編集するのはテーマファイルになるため、子テーマフォルダ配下でnpm initします!
自分の場合はCocoonの子テーマを編集するため、wp-content/themes/cocoon-child-master配下になります。
# 編集するテーマフォルダに移動
cd wp-content/themes/cocoon-child-master

# package.jsonの作成
npm init -y
マイケル
マイケル
そしてTypeScript、Stylus関連のパッケージをインストールし、
tsconfig.jsonを作成します。
# TypeScript関連のインストール
npm install --save-dev typescript ts-loader

# Stylus関連のインストール
npm install --save-dev stylus stylus-loader

# tsconfig.jsonの作成
./node_modules/.bin/tsc --init
マイケル
マイケル
今回、tsconfig.jsonの定義は下記のようにしました!
src/ts配下のtsファイルをsrc/js配下にトランスパイルするようにしています。
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "src/js",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": [
    "src/ts/**/*"
  ]
}
エレキベア
エレキベア
シンプルな定義クマね
マイケル
マイケル
そしてpackage.jsonにbuildコマンドを定義しておきましょう!
下記はStylusのビルドコマンド(build:stylus)とTypeScriptのビルドコマンド(build:ts)を合わせて実行するよう定義してあります。
{
  "name": "cocoon-child-master",
  "version": "1.0.0",
  "description": "",
  "main": "javascript.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm run build:stylus && npm run build:ts",
    "build:stylus": "stylus src/styl/*.styl -o src/css",
    "build:ts": "./node_modules/.bin/tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "stylus": "^0.57.0",
    "stylus-loader": "^6.2.0",
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.3"
  }
}
マイケル
マイケル
あとはnpm run buildするだけでトランスパイルが実行されるはずです!
# src/js、src/css配下にトランスパイルしたコードが出力される
npm run build
20220425 09↑トランスパイルした例
エレキベア
エレキベア
シンプルで楽に環境を作れたクマね
マイケル
マイケル
あとはgitignoreにnode_modulesフォルダも管理対象外とするよう定義しておきましょう。
これで環境構築は完了です!
# *** Add ***
/wp-content/themes/cocoon-child-master/node_modules/
エレキベア
エレキベア
やったクマ〜〜〜

簡単な修正とPHPファイルからの読込

マイケル
マイケル
それでは動作確認も含めて簡単な修正を行ってみましょう!
テーマフォルダ配下にsrc/ts/index.tsを作成し、下記のようにアラートを出す処理を記述してみましょう。
/**
 * ウィンドウ読み込み時
 * @param e
 */
window.addEventListener("load", function(e) {
    alert("Hello!!");
});
マイケル
マイケル
npm run buildするとsrc/js/index.jsが出力されるはずなので、
これをfunction.php内で下記のように読み込みます。
// JavaScript追加
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('custom-index-js', get_stylesheet_directory_uri() . '/src/js/index.js');
});
マイケル
マイケル
この状態でブラウザからアクセスすると、
アラートが表示されることが確認できました!
20220425 08↑アラートが表示された
エレキベア
エレキベア
正常に動作しているクマね
マイケル
マイケル
そして次はスタイルの修正確認です。
TypeScriptと同様、src/styl/index.stylを作成し、下記のようにカテゴリアイテムの透明度が徐々に上がりながら表示されるように記述してみます。
/**
 * ヘッダー項目の透明度を徐々に上げる
 * displayだと効かないのでvisibilityで指定
 */
.navi-in li.menu-item-has-children ul
  display: block
  visibility: hidden
  opacity: 0
  transition: all .3s
  position: relative
.navi-in li.menu-item-has-children:hover > ul
  display: block
  visibility: visible
  opacity: 1
マイケル
マイケル
こちらもnpm run buildするとsrc/css/index.cssが出力されるため、
function.phpから読み込みます。
// CSS追加
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('custom-index-style', get_stylesheet_directory_uri() . '/src/css/index.css');
});

// CSSをリロードの度に更新するため、日時をバージョンに設定
add_action('wp_default_styles', function($styles) {
    $mtime = filemtime( get_stylesheet_directory() . '/style.css');
    $styles->default_version = $mtime;
});
マイケル
マイケル
この時、キャッシュを無効にするため
CSSのバージョンは日時で指定するようにしています。
マイケル
マイケル
この状態でブラウザから操作してみると、
下記のようにスタイルが反映されていることが確認できました!
01 styl↑スッと表示されるようになった
エレキベア
エレキベア
やったクマ〜〜〜〜

修正内容の反映

マイケル
マイケル
環境構築は異常となりますが、
最後に修正内容の反映方法についても記述しておきます。
マイケル
マイケル
ローカルでの開発時には、下記のように修正用ブランチを切って作業しましょう。
修正が完了したらpushしてmainブランチにマージします。
# 修正用ブランチを切る
git checkout -b 【ブランチ名】

# 修正内容をpush
git add .
git commit -m "【コミット内容】"
git push origin 【ブランチ名】

# 修正内容をmainブランチへマージ
git checkout main
git merge 【ブランチ名】
git push origin main
エレキベア
エレキベア
ブランチを切って作業しておかないと
本番環境とGit環境で差分が出ている状態になってしまうクマね
マイケル
マイケル
mainブランチに反映したら、WordPressサーバにssh接続して、git pullするのみ!
以上で修正内容が反映されるはずです!
# WordPressサーバにssh接続してpullする
git pull origin main
エレキベア
エレキベア
簡単クマ〜〜〜〜

おわりに

マイケル
マイケル
というわけで、今回はWordPressの開発環境構築でした!
どうだったかな?
エレキベア
エレキベア
手順は少しややこしかったクマが
順番にやればうまくいってよかったクマ
マイケル
マイケル
これでやっといじり放題だね!
でもやっぱりWordPressや既存テーマに対してのカスタマイズになるからどうしてもやり辛いところはありそうだ・・・。
一から作りたいくらいだけど仕方がない・・・。
エレキベア
エレキベア
手軽に作れるのがWordPressのメリットだからクマね
マイケル
マイケル
ひとまず環境はできたから、少しずつブログ改修も行っていこう!
それでは今日はこの辺で!アデュー!!
エレキベア
エレキベア
クマ〜〜〜〜

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

コメント