| リポジトリ | https://github.com/Colors-ryomorita/qrset (private) |
| サーバ | Xserver(SSHポート 10022) |
| 構成 | WordPress + PHP 8.2 + Apache + MariaDB 10.11 |
| テーマ | `kyoto-baggage`(`hadsfree-kyoto` は旧・未使用) |
ローカルのフォルダ名は `kyoto-tourism`、リポジトリ名は `qrset` です。一致していなくても問題ありません。
| 環境 | URL | 位置づけ | 検索避け |
|---|---|---|---|
| ローカル | http://localhost:8084 | 開発 | ON(強制) |
| ステージング | https://qrset.colors-pro.co.jp/ | 提案用パイロット。デザインが揃っていない状態でクライアントに見せる用 | ON |
| 本番 | 未定(別ドメイン・同じXserver) | 正式サービス | OFF |
`main` に push すると ステージングにだけ自動反映されます。 本番へは Actions から手動で `target = production` を選んだときのみ反映されます。
ステージングは検索避け ON、本番は OFF。これが取り違わると事故になるため、次の対策を入れてあります。
* ローカル: `import-dump` が取り込みのたびに `blog_public=0`(検索避けON)を強制します * robots.txt は自動転送しません(`.rsyncignore` で除外)。環境ごとに手で置いてください。
物理ファイルの `robots.txt` は WordPress の検索避け設定より優先されるため、 ステージングに「クロール許可」の robots.txt を配ると検索避けが無効化されます
* デプロイ後の自動チェック:
ステージングのDBを本番へ流用する場合は、必ずこの確認を。
wp option get blog_public # 0=検索避けON / 1=公開 wp option update blog_public 1 # 本番公開時
* 手動実行は 既定が dry-run。転送されるファイル一覧だけ出ます * `.htaccess` などトップ階層は 既定では転送しません(`deploy_root` を ON にしたときだけ) * `wp-config.php` / WordPress本体 / `uploads` / `robots.txt` は転送対象外 * 反映先ディレクトリの存在を事前確認、反映後に応答コードと noindex を確認 * `main` への push はステージングにしか行きません。本番は手動実行でしか反映されません
| やること | Windows | Mac |
|---|---|---|
| ステージングのファイル | `.\pull-remote.bat` | `bash pull-remote.sh` |
| 本番のファイル | `.\pull-remote.bat prd` | `bash pull-remote.sh prd` |
| ステージングのDB | `.\import-dump.bat` | `bash import-dump.sh` |
| 本番のDB | `.\import-dump.bat prd` | `bash import-dump.sh prd` |
DBは先に `docker/dbdump/stg.sql`(または `prd.sql`)を置いてから実行します。
取り込んだテーマは `_remote/<環境>/themes/` に隔離して置かれます。 ローカルの作りかけを勝手に上書きしないためです。中身を見比べてから反映してください。
Mac の方は次章「セットアップ(Mac)」へ。両者は独立しているので、
自分のOSの章だけ読めば環境が立ち上がります。
| Docker Desktop | https://www.docker.com/products/docker-desktop/ (WSL2 有効で) |
| Git for Windows | https://git-scm.com/download/win |
SSH鍵は不要です。 理由は後述の「SSH鍵について(共通)」に書いています。
cd C:\Docker-work git clone https://github.com/Colors-ryomorita/qrset.git kyoto-tourism cd kyoto-tourism copy .env.example .env .\setup.bat
`setup.bat` はエクスプローラでダブルクリックしてもOKです。
コンテナ起動 → WordPressインストール → 日本語化 → テーマ有効化 → パーマリンク設定まで 一気に終わり、ブラウザが開きます。初回はイメージ取得で 5〜10 分ほど。 2回目以降に実行しても壊れません(済んでいる処理はスキップされます)。
`.env.example` のローカル用の値はそのまま使えます(ポート・DB・テーマ名)。 `STG_*` は `SERVERID` のままで構いません。
| URL / 値 | |
|---|---|
| サイト | http://localhost:8084 |
| 管理画面 | http://localhost:8084/wp-admin |
| 管理者 | ID `admin` / PW `admin` |
| phpMyAdmin | http://localhost:8085 |
| Mailpit | http://localhost:8027 |
| MySQL | localhost:13308 |
| やること | コマンド |
|---|---|
| 起動・再開 | `.\setup.bat` |
| 停止(DBは残る) | `docker compose down` |
| 作り直し(全部消す) | `docker compose down -v` |
| ログを見る | `docker compose logs -f wp` |
| サーバーからファイル取り込み | `.\pull-remote.bat` |
| サーバーからDB取り込み | `.\import-dump.bat` |
| 社内LANに公開 | `.\lan-access.bat`(管理者として実行) |
| GitHub連携(初回のみ) | `.\github-setup.bat` |
`lan-access.bat` を 管理者として実行すると、アクセス用URLの表示と Windows ファイアウォールの許可までまとめてやります。
.\lan-access.bat
表示された `http://192.168.x.x:8084/` のようなURLに、同じネットワークの 別PCやスマホからアクセスできます。
* ネットワークの種類が「パブリック」だとファイアウォールに弾かれます。
設定 > ネットワークとインターネット から「**プライベート**」に変更してください
* PC の IP は DHCP だと変わります。頻繁に見せるなら固定IPか `PC名.local` での運用が楽です
copy .env.example .env docker compose up -d --build # → http://localhost:8084 でインストール画面が出るので画面に従う docker compose exec -u www-data wp wp theme activate kyoto-baggage
Windows の方は前章「セットアップ(Windows)」へ。
やることは Windows と全く同じで、スクリプトの拡張子が `.bat` → `.sh` に変わるだけです。
- Docker Desktop for Mac を公式サイトからインストール
> ★ **Intel版(amd64) と Apple Silicon版(arm64) でインストーラが別です。** > `uname -m` の結果が `x86_64` なら Intel、`arm64` なら Apple Silicon。 > 詳細は後述の「チップの種類について」を参照。
- Homebrew が未導入なら https://brew.sh/ の1行を実行 - ターミナルで:
brew install git gh
SSH鍵は不要です。 理由は後述の「SSH鍵について(共通)」に書いています。
mkdir -p ~/Docker-work && cd ~/Docker-work git clone https://github.com/Colors-ryomorita/qrset.git kyoto-tourism cd kyoto-tourism cp .env.example .env bash setup.sh
やっていることは Windows の `setup.bat` と同じで、 コンテナ起動 → WordPressインストール → 日本語化 → テーマ有効化 → パーマリンク設定まで一括、 最後にブラウザが開きます。初回はイメージ取得で 5〜10 分ほど。
### ★ `bash` を付けて実行してください
スクリプトは Windows からコミットされているため、実行権限(+x)が付いていません。
`./setup.sh` と打つと `Permission denied` になります。
毎回 `bash` と打つのが面倒なら、最初に一度だけ:
```bash
chmod +x *.sh
```
これで以降は `./setup.sh` でも動きます。
Windows と同じです。
| URL / 値 | |
|---|---|
| サイト | http://localhost:8084 |
| 管理画面 | http://localhost:8084/wp-admin |
| 管理者 | ID `admin` / PW `admin` |
| phpMyAdmin | http://localhost:8085 |
| Mailpit | http://localhost:8027 |
| MySQL | localhost:13308 |
| やること | コマンド |
|---|---|
| 起動・再開 | `bash setup.sh` |
| 停止(DBは残る) | `docker compose down` |
| 作り直し(全部消す) | `docker compose down -v` |
| ログを見る | `docker compose logs -f wp` |
| サーバーからファイル取り込み | `bash pull-remote.sh` |
| サーバーからDB取り込み | `bash import-dump.sh` |
| 社内LANに公開 | `bash lan-access.sh` |
| GitHub連携(初回のみ) | `bash github-setup.sh` |
bash lan-access.sh
表示された `http://192.168.x.x:8084/` に、同じネットワークの別PCやスマホからアクセスできます。
Mac のファイアウォールはポート単位ではなくアプリ単位なので、Windows のような ポート開放の設定は要りません。もし繋がらない場合:
* システム設定 > ネットワーク > ファイアウォール > オプション で
| 通常のエックスサーバー | `<サーバーID>.xsrv.jp`(`sv*.xserver.jp` でも可) | この案件は XServerビジネス なので `colorspro.xbiz.jp` です。 ポートはどちらも 10022。 ① `.env` のサーバ情報を埋める <code> STG_HOST=colorspro.xbiz.jp STG_USER=colorspro STG_PATH=/home/colorspro/colors-pro.co.jp/public_html/qrset </code> `STG_PATH` が分からなければ、SSHして確認します。 <code bash> ssh -p 10022 colorspro@colorspro.xbiz.jp ls -d ~/colors-pro.co.jp/public_html/* </code> ② SSH秘密鍵を置く Xserver サーバーパネル > SSH設定 で - 「ONにする」で SSH を有効化 - 「公開鍵認証用鍵ペアの生成」→ 鍵をダウンロード ダウンロードした `<サーバーID>.key` を `docker\ssh\xserver.key` という名前で保存。 ==== あとはダブルクリックするだけ ==== <code powershell> .\github-setup.bat # Windows </code> <code bash> bash github-setup.sh # Mac / Linux </code> このスクリプトが自動でやること: - `git` / `gh`(GitHub CLI)の確認 - GitHub へのログイン(未ログインならブラウザが開く) - リポジトリ `Colors-ryomorita/qrset` の作成 or 接続 - `ssh-keyscan` でサーバのホスト鍵を取得 - Secrets を7つ自動登録(手作業でのコピペ不要) - コミット対象を表示して確認 → 初回 push - Actions のページをブラウザで開く `.env` や SSH秘密鍵がコミット対象に入っていたら、その場で中止する安全弁も入れてあります。 > GitHub CLI が未インストールなら、 > Windows: 管理者権限のPowerShellで `winget install –id GitHub.cli` > Mac: `brew install gh` > を実行してから再度どうぞ。 ==== 初回デプロイ ==== - https://github.com/Colors-ryomorita/qrset/actions を開く - 左の Deploy > 右上の Run workflow - `target` = `staging`、`dry_run` にチェックを入れたまま実行 → 転送されるファイル一覧だけが出ます - 意図しないファイルが無ければ、`dry_run` のチェックを外して再実行 - 以降は `git push` するだけで自動反映されます ==== 登録される Secrets ==== `github-setup.bat` / `github-setup.sh` が自動で入れるので手作業は不要ですが、中身は以下です。 ^Secret 名^内容^ | `SSH_HOST` | `.env` の `STG_HOST` | | `SSH_PORT` | `.env` の `STG_PORT`(既定 10022) | | `SSH_USER` | `.env` の `STG_USER` | | `SSH_KEY` | `docker\ssh\xserver.key` の中身 | | `SSH_KNOWN_HOSTS` | `ssh-keyscan` の出力 | | `DEPLOY_PATH` | `.env` の `STG_PATH` | | `SITE_URL` | `.env` の `STG_URL` | > GitHub Environments は使っていません。プライベートリポジトリで > Environments を使うには GitHub Pro 以上が必要なためです。 ==== 本番ドメインが決まったら ==== 同じ7つを `PRD_` を付けて追加登録するだけです。ワークフローの書き換えは不要。 <code powershell> gh secret set PRD_SSH_HOST –body “colorspro.xbiz.jp” –repo Colors-ryomorita/qrset gh secret set PRD_DEPLOY_PATH –body “/home/…/public_html” –repo Colors-ryomorita/qrset gh secret set PRD_SITE_URL –body “https:本番ドメイン” –repo Colors-ryomorita/qrset gh secret set PRD_SSH_KEY –repo Colors-ryomorita/qrset < docker\ssh\xserver.key # PRD_SSH_PORT / PRD_SSH_USER / PRD_SSH_KNOWN_HOSTS も同様 </code> 登録後は Run workflow で `target` = `production` を選べば本番へ反映されます。 `main` への push はステージングにしか行かないので、誤爆しません。 —- ===== 日々の作業フロー(ローカルで編集 → push → 反映) ===== ==== いちばん短い形 ==== <code powershell> cd C:\Docker-work\kyoto-tourism git add -A git commit -m “予約フォームの調整” git push </code> これだけで GitHub Actions が動き、数十秒で qrset に反映されます。 進行状況は https://github.com/Colors-ryomorita/qrset/actions で確認できます。 —- ==== ★ 最重要:Git に乗るもの / 乗らないもの ==== ここを取り違えると「ローカルでは直ったのにサーバーで変わらない」となります。 ^編集した場所^Git に乗る?^サーバーへ反映される?^ | `src\wp-content\themes\kyoto-baggage\` の中のファイル | ✅ | ✅ push で自動 | | `src\wp-content\plugins\` の中のファイル | ✅ | ✅ push で自動 | | `src\.htaccess` / `.user.ini` | ✅ | ⚠️ 手動実行で `deploy_root` を ON にしたときだけ | | WordPress管理画面で作った投稿・固定ページ・メニュー | ❌ | ❌ DBの中身なので運ばれません | | ACFのフィールドグループ設定 | ❌ | ❌ 同上(対処法は下に記載) | | 管理画面 > 設定 の各種オプション | ❌ | ❌ 同上 | | メディアライブラリにアップした画像 | ❌ | ❌ `storage\uploads\` は Git 管理外 | | WordPress 本体(wp-admin など) | ❌ | ❌ サーバー側のものをそのまま使用 | つまり Git が運ぶのは「コード」だけです。 「コンテンツ」(DBとuploads)は運ばれません。 —- ==== ケース別の手順 ==== === ① テーマのPHP・CSS・JSを直した === いちばん普通のケースです。VSCode などで直接編集します。 <code> C:\Docker-work\kyoto-tourism\src\wp-content\themes\kyoto-baggage\ </code> このフォルダはコンテナにそのままマウントされているので、保存した瞬間に http://localhost:8084 に反映されます。ビルドも再起動も不要です。 <code powershell> # 動作確認できたら git add -A git status # 何が変わったか確認 git commit -m “予約フォームのバリデーションを追加” git push </code> > WordPress管理画面の「テーマファイルエディター」は無効化してあります(`DISALLOW_FILE_EDIT`)。 > コンテナ内で直接編集すると Git に乗らないため、必ずホストPC側(Windows / Mac)のファイルを編集してください。 === ② 管理画面からプラグインを入れた/更新した === 管理画面 > プラグイン > 新規追加 でインストールすると、 実体は `src\wp-content\plugins\` に落ちてくるので そのまま Git 管理対象になります。 <code powershell> git status # 新しいプラグインのフォルダが出るはず git add -A git commit -m “Contact Form 7 を追加” git push </code> 反映後、サーバー側の管理画面で有効化してください。有効/無効の状態はDBなので運ばれません。 === ③ ACF のフィールドを追加・変更したい === このテーマは ACFのフィールドを PHP で定義しています。 <code> src\wp-content\themes\kyoto-baggage\function\acf.php </code> そのため 管理画面のGUIではなく、このファイルを編集します。編集すればただのコードなので、 普通に `git push` すればサーバーにも反映されます。DBを介さないので取りこぼしがありません。 > `function\acf.php` の冒頭コメントに、PHP定義にしている理由が3点書かれています > (Git配布できる / 環境間でフィールドキーがずれない / テーマ入れ替えで定義も入れ替わる)。 注意: 管理画面 > ACF > フィールドグループ からGUIで作ったものはDBに入り、 `git push` では運ばれません。GUIで試作した場合は、管理画面 > ACF > ツール > エクスポート で「PHPを生成」し、その内容を `function\acf.php` に貼り付けてください。 === ④ 投稿・固定ページ・設定を変えた === これは push では運べません。 サーバー側の管理画面で同じ操作をしてください。 大量にある場合は、ローカルのDBを書き出してサーバーに取り込む形になります(サイト全体の入れ替えになるので、慎重に)。 <code powershell> # ローカルDBを書き出す docker compose exec -u www-data wp wp db export /opt/project/docker/dbdump/local.sql </code> 逆に サーバーの内容をローカルに持ってくるのは用意してあります。 <code powershell> .\pull-remote.bat # テーマ・プラグイン・uploads (Mac: bash pull-remote.sh) .\import-dump.bat # DB(docker\dbdump\stg.sql を置いてから)(Mac: bash import-dump.sh) </code> —- ==== push する前のチェック ==== <code powershell> git status # 意図しないファイルが入っていないか git diff # 変更内容そのもの </code> `.env` と `docker\ssh\xserver.key` は `.gitignore` で除外済みですが、 新しく秘密情報を扱うファイルを作ったときは、先に `.gitignore` へ追加してください。 ==== 反映されたか確認する ==== - https://github.com/Colors-ryomorita/qrset/actions で緑チェックになっているか - https://qrset.colors-pro.co.jp/ を Ctrl + F5(キャッシュを無視して再読み込み) CSSやJSが古いままのときは、テーマ側で `wp_enqueue_style` にバージョン番号を付けると確実です。 ==== やり直したいとき ==== <code powershell> git log –oneline -10 # 履歴を見る git revert <コミットID> # 特定の変更を打ち消す(履歴は残る) git push # → 打ち消した状態がサーバーにも反映 </code> `git reset –hard` は履歴を壊すので、共有リポジトリでは `revert` を使ってください。 —- ===== 想定される依存プラグイン ===== `inc/spot/spot-acf.php` があるため ACF(Advanced Custom Fields) が必要になるはずです。 <code powershell> docker compose exec -u www-data wp wp plugin install advanced-custom-fields –activate </code> インストールしたプラグインは `src/wp-content/plugins/` に入り、そのまま Git 管理対象になります。 —- ===== メール確認 ===== `wp_mail()` は実送信されず、すべて Mailpit(http://localhost:8027)に届きます。 この仕組みは `docker/wp/mu-plugins/00-local-dev.php` によるもので、本番には配置されません。 ===== DeepL などの API キー ===== コードに直書きせず `wp-config.php` の `define()` か環境変数で持ってください (`wp-config.php` は Git にもデプロイにも含まれない設定にしてあります)。 ローカルで試すだけなら `docker/wp/mu-plugins/10-local-secrets.php` を作って `define()` すれば OK です。 このフォルダは本番へ転送されません。 ===== よく使う WP-CLI ===== <code powershell> docker compose exec -u www-data wp wp theme list docker compose exec -u www-data wp wp plugin list docker compose exec -u www-data wp wp option update blogname “HandsFree Kyoto” docker compose exec -u www-data wp wp search-replace 'http://localhost:8084' 'https:本番ドメイン' –dry-run </code> ===== ログの見かた ===== <code powershell> docker compose logs -f wp docker compose exec wp tail -f /var/www/html/wp-content/debug.log </code>