0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@qiita_hukuta(yumi miya)

初心者がChatGPTに聞きながらDockerでWordPress環境を作った記録｜.envとGitHub管理まで

0
Posted at

DockerでWordPressのローカル環境を作りたい。

そう思って調べてみると、いろいろな記事が出てきます。
でも、初心者にとって本当に怖いのは、コマンドそのものではありません。

「このコマンドは何をしているのか」
「このファイルはGitHubに上げてもいいのか」
「.envって何？」
「docker compose up -d はどこで実行するの？」
「エラーが出たら、どこを見ればいいの？」

このあたりが分からないまま、とりあえずコピペで進めてしまいます。

私もこれまで、検索で出てきたコマンドを意味が分からないまま貼り付けて、動いたらラッキー、止まったらお手上げ、という状態によくなっていました。

今回は、自宅のMacにDockerをインストールするところから、WordPressを起動し、GitHubに必要なファイルだけをpushするところまでを、ChatGPTに確認しながら進めました。
この記事は、その作業ログです。
ただの手順メモではなく、「なぜその設定にするのか」「どこで迷いやすいのか」も一緒に残していきます。

この記事でやったこと

WordPressの制作・検証用に、Dockerでローカル開発環境を作成しました。Docker Desktopのインストール確認から、WordPressとphpMyAdminにアクセスできるところまでを記録します。

環境

  • macOS Tahoe 26.5.2
  • Docker Desktop 4.80.0 (232116)
  • Docker Compose version v5.1.4
  • WordPress 7.0
  • MySQL 8.0
  • phpMyAdmin 5.2.3

Docker Desktopのインストール

Docker Desktopは、Mac / Windows / Linuxでコンテナを動かすための公式アプリです。公式ドキュメントでも、Docker DesktopはGUI付きでコンテナ・イメージ・アプリを管理できます。

私はMacを使っているので、Mac版を中心にやっていきます。

インストール前に確認すること

画面左上のAppleマークから、「このMacについて」を開いて確認します。

  • 使用しているチップ
    「Apple M1 / M2 / M3 / M4」などなら Apple Silicon版。
    「Intel」と書いてあれば Intel Mac版 です。
  • macOSのバージョン
    Docker Desktopのリリースノートでは、近年のバージョンでmacOSの対応条件が上がっており、macOS Sonoma 14以降が必要になる流れが示されています。古いmacOSのままだとインストールできない可能性があります。

MacにDocker Desktopをインストールする手順

  1. 公式のDocker Desktop for Macから、自分のMacに合う方を選んでダウンロードします。
    Apple SiliconのMacなら、Download for Mac - Apple Silicon
    Intel Macなら、Download for Mac - Intel Chip

  2. ダウンロードした .dmg ファイルを開く
    中にある Docker.app を、Applications / アプリケーション フォルダにドラッグします。
    その後、アプリケーションフォルダから Docker を起動します。

初回起動時に、Docker Desktop の利用規約への同意画面が出た場合は、Acceptをクリックしてください。
この画面は、「Docker Desktopを使うなら規約に同意してね。商用利用の場合、会社が従業員250人超、または年間売上1,000万ドル超なら有料契約が必要です」という意味です。自宅PCでの学習・練習用なら、Acceptで問題ありません。Close を押すと、規約に同意しないの扱いになり、Docker Desktopを使うことができません。

その次に、Docker Desktopが必要な設定を自動で入れる選択を聞かれる画面が出ます。Use recommended settings が選択されたまま Finish をクリックで大丈夫です。通常のWordPress練習環境なら、Advanced settingsを触る必要はありません。

さらに、Macのパスワードを求められる可能性があります。その場合は、Macにログインするときのパスワードを入力してください。

Welcome to Docker の画面が出てきた場合は、右上の Skip をクリック。今回やることは自宅PCでWordPress練習環境を作るだけなので、Dockerアカウントへのサインインはしなくても大丈夫です。この画面は、
「仕事用なら会社メールでログインをおすすめします」
「個人利用ならPersonalでも使えます」
という案内です。

ここまでの画面を乗り越えたら、やっとDocker Desktopとご対面です。左下に Engine running と出ていたら、Docker本体は起動できています。

この画面でも色々とできますが、今回は、Dockerで何をやっているかを理解したいのでコマンドでやっていきます。

インストール確認

せっかく出会えたDocker Desktopですが、この画面はそのままにしておきターミナルを起動します。
アプリケーション > ユーティリティ > ターミナル
または Spotlight検索で「ターミナル」と入力して開きます。

開いたら、まずこれを1行ずつ実行します。

Bash
docker --version

次に、

Bash
docker compose version

さらに動作確認として、

Bash
docker run hello-world

これで、

Bash
Hello from Docker!

の表示が出れば成功です。
もしエラーで止まるようなら、Docker Desktopを閉じてしまっている可能性が大です。Docker Desktopは立ち上げたままにしておきましょう。画面が邪魔なら最小化でOKです。
ちなみに、次回パソコン起動時に、Docker Desktopを起動させずに docker compose up -d をやってしまうと、見慣れない英語のエラーメッセージが出て慌てます。そうならないためにも、一番最初にDocker Desktopを起動をしましょう。

Docker環境の管理

早速環境構築を進めたいところですが、今後複数の環境を構築することを想定して、Docker環境を管理しておきましょう。
私の場合、今後の作業の流れはこの予定を組んでいます。

  1. 普通のWordPressポートフォリオ
  2. WordPressカスタマイズ練習環境
  3. ヘッドレスCMS検証環境
  4. Next.js / React 表示側の環境
  5. 案件ごとの検証環境
    と、WordPressとフロントエンドが乱立するはずなので、これらを踏まえてルールを決めました。
フォルダ構成
Desktop/
└── local-dev/
    ├── wordpress/
    │   ├── wp-portfolio/
    │   ├── wp-practice-swell/
    │   └── wp-headless-api/
    ├── frontend/
    │   └── next-headless-front/
    └── client-test/
        └── sample-company/
ポート番号のルール
WordPress本体: 8100番台
phpMyAdmin: 9100番台
フロントエンド: 3000番台

WordPress系
8101: wp-portfolio
8102: wp-practice-swell
8103: wp-headless-api

phpMyAdmin系
9101: wp-portfolio
9102: wp-practice-swell
9103: wp-headless-api

Next.js / React系
3001: next-headless-front
3002: frontend-practice
DB名のルール
wp_portfolio
wp_practice_swell
wp_headless_api
DBユーザー名のルール
DB_NAME: wp_portfolio
DB_USER: wp_portfolio_user
DB_PASSWORD: wp_portfolio_pass
管理表の項目
環境名
フォルダ名
用途
WordPress URL
phpMyAdmin URL
WordPressポート
phpMyAdminポート
DB名
DBユーザー
DBパスワードの保管場所
起動コマンド
停止コマンド
備考

パスワード本体も管理表に入れたいところですが、「.envに記載」などの保管場所を記載するようにしておきます。

GitHubの練習も兼ねるので、こちらも以下のルールを決めておきます。

  • .env はGitHubに上げない。
  • .env.example はGitHubに上げる。
  • docker-compose.yml では ${変数名} で読み込む。

VS Codeの確認

VS Codeで編集している場合は、コマンドでも起動できるように設定しておくと便利です。
まずはコマンドでVS Codeが開く設定があるかを確認します。

Bash
code --version

もし、

Bash
command not found: code

になる場合は、VS Codeを開いて、Command + Shift + Pを押します。
検索欄に、

Shell Command

と入力して、

Shell Command: Install 'code' command in PATH

を選びます。
これでターミナルから、

Bash
code .

が使えるようになります。

WordPress練習環境を作る

まずは、フォルダ作りから。
Finderで一つ一つ新規作成していってもいいのですが、今回はコマンドでやってみましょう。

Bash
cd ~/Desktop
mkdir -p local-dev/wordpress
cd local-dev/wordpress
mkdir wp-portfolio
cd wp-portfolio
code .

これを実行すると、VS Codeが起動して、作成したフォルダが開かれています。ここで、以下の5つのファイルを作ります。

wp-portfolio/
├── docker-compose.yml
├── .env
├── .env.example
└── .gitignore
└──local-login.md

.envで設定値を管理する

GitHubの練習もしたかったので、パスワードやポート番号などの設定値は、docker-compose.yml に直接書かず、.env ファイルに分けることにしました。
.env の env は environment の略で、「環境設定ファイル」という意味です。
.env には本物の設定を書きます。

env
WP_PORT=8101
PMA_PORT=9101

DB_NAME=wp_portfolio
DB_USER=wp_user
DB_PASSWORD=データベースのパスワードを入れる
DB_ROOT_PASSWORD=ルートのパスワードを入れる

.env.example には、GitHubに上げるための見本を書きます。

env
WP_PORT=8101
PMA_PORT=9101

DB_NAME=your_database_name
DB_USER=your_database_user
DB_PASSWORD=your_database_password
DB_ROOT_PASSWORD=your_root_password

.env はGitHubに上げません。
.env.example はGitHubに上げます。

これにより、必要な環境変数は共有しつつ、本物のパスワードは公開しない形にできます。

docker-compose.ymlを作成

docker-compose.ymlは何者かをチャッピー先生に聞いたら、このように答えてくれました。

docker-compose.ymlは料理でいう レシピ です。

Docker本体はキッチン。
WordPressやMySQLは材料。
.env は調味料や分量のメモ。
docker-compose.yml は「何をどう組み合わせて料理にするか」の手順書です。
レシピがないと、材料はあっても同じ料理を再現できません。

ということで、今回のdocker-compose.yml は以下のようにしました。

YAML
services:
  wordpress:
    image: wordpress:latest
    ports:
      - "${WP_PORT}:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: ${DB_NAME}
      WORDPRESS_DB_USER: ${DB_USER}
      WORDPRESS_DB_PASSWORD: ${DB_PASSWORD}
    volumes:
      - ./html:/var/www/html
    depends_on:
      - db

  db:
    image: mysql:8.0
    environment:
      MYSQL_DATABASE: ${DB_NAME}
      MYSQL_USER: ${DB_USER}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
    volumes:
      - db_data:/var/lib/mysql

  phpmyadmin:
    image: phpmyadmin:latest
    ports:
      - "${PMA_PORT}:80"
    environment:
      PMA_HOST: db
    depends_on:
      - db

volumes:
  db_data:

ポイントは、直接値を書かずに、

YAML
${DB_NAME}

のように .env から読み込む形にしていることです。
本当は、パスワードも暗号化が必要ですが、今回はローカル内の練習用なので、別ファイルでの管理にするところでとどめています。

###Git管理から除外するファイルを決める
.gitignore には、GitHubに上げたくないものを書きました。

# Environment variables
.env

# Local login information
local-login.md

# WordPress core files
html/

# OS files
.DS_Store

# Editor files
.vscode/

今回、WordPress本体が入る html/ はGit管理から外しました。
理由は、WordPress本体ファイル一式をGitHubに入れるとリポジトリが重くなり、管理が大変になるからです。
将来的に自作テーマを作る場合は、html/ 全体ではなく、テーマフォルダだけをGit管理する形にする予定です。

html/wp-content/themes/自作テーマ名/

隠しファイルの確認

コマンドでファイルを確認すると、あるはずのファイルが見つからないことがあります。
今回の場合は、.env や .gitignore のように、. から始まるファイルが該当します。
これらは隠しファイルです。
通常のlsコマンドでは表示されないことがあります。
確認するには以下を使います。

Bash
ls -a

より詳しく確認するならこちら

Bash
ls -la

Dockerを起動

docker-compose.ymlがある wp-portfolioフォルダで、以下を実行します。
VS Codeで作業しているなら、wp-portfolioフォルダを開いている状態で、VS Codeからターミナルを開けばOK。

Bash
docker compose up -d

起動後、ブラウザで以下を確認。

WordPress：http://localhost:8101
phpMyAdmin：http://localhost:9101

WordPressの初期設定画面が表示されれば成功です。

WordPressのログイン情報は別ファイルで管理

WordPressの管理画面ログイン情報は、.env とは別に local-login.md で管理することにしました。
ただし、これはGitHubに上げないファイルです。
置き場所は、WordPressの公開ディレクトリである html/ の中ではなく、docker-compose.yml と同じ階層にします。

Bash
wp-portfolio/local-login.md

html/ の中にログイン情報を置くのは危険なので避けます。

Gitの初期設定とコミット

Git管理を始めるために、以下を実行しました。

Bash
git init

git statusで現在の状態を確認。

Bash
git status

Git管理対象として以下が表示されました。

Bash
.env.example
.gitignore
docker-compose.yml

それ以外のファイルやディレクトリが出ていたら.gitignore に追加。
その後、必要なファイルだけをaddしてコミットしました。

Bash
git add .env.example .gitignore docker-compose.yml
git commit -m "Add Docker WordPress environment"

コミットメッセージは日本語でも問題ありませんが、GitHub上で見せることを考えて英語にしました。

Gitのユーザー名とメールアドレス設定

コミット時に、Gitから名前とメールアドレスが自動設定されたというメッセージが出ました。GitHubと連携するなら、明示的に設定しておいた方がよいため、以下で確認・設定しました。

Bash
git config --global user.name "名前"
git config --global user.email "GitHubに登録しているメールアドレス"

GitHubにリポジトリを作成

GitHubで wp-portfolio というPrivateリポジトリを作成しました。
このとき、GitHub側では以下を追加しませんでした。

README
.gitignore
license

理由は、ローカル側にすでに .gitignore などがあるためです。
GitHub側で先に作ると、ローカルとの内容がずれて面倒になる場合があります。

SSHでpushしようとして詰まった

最初、SSHでGitHubに接続しようとしたところ、以下のようなメッセージが出ました。

The authenticity of host 'github.com' can't be established.
Are you sure you want to continue connecting?

これは初回SSH接続時の確認です。
その次に、

Permission denied (publickey).

が出ました。
これは、Mac側のSSHキーがGitHubに登録されていない状態です。
今回はSSHキー設定は後回しにして、HTTPSのURLに変更してpushしました。

Bash
git remote set-url origin https://github.com/ユーザー名/wp-portfolio.git
git push -u origin main

GitHub認証画面が出たので、VS Codeとの連携を許可して進めました。

GitHubに必要なファイルだけpushできた

最終的にGitHubには、必要なファイルだけが上がりました。
上がってよいものは以下です。

docker-compose.yml
.env.example
.gitignore
README.md

上げないものは以下です。

.env
local-login.md
html/

README.mdを追加

GitHubに上げるリポジトリには、何の環境なのか、どう起動するのかを書いた README.md が必要です。

今回は以下の内容を追加しました。

# wp-portfolio

Dockerで構築するWordPressポートフォリオサイトのローカル開発環境です。

## 使用技術

- Docker
- Docker Compose
- WordPress
- MySQL
- phpMyAdmin

## 起動方法

`.env.example` をコピーして `.env` を作成します。

```bash
cp .env.example .env
```
コンテナを起動します。

```bash
docker compose up -d
```

## 停止方法

```bash
docker compose down
```

## URL

WordPress:

http://localhost:8101

phpMyAdmin:

http://localhost:9101

## 注意事項

`.env` と `local-login.md` はGit管理に含めません。

WordPress本体ファイルを含む `html/` もGit管理対象外にしています。

## Theme

- Parent theme: SWELL
- SWELL version: 2.17.1
- Child theme: SWELL CHILD MyPortfolio
- Local Docker environment does not require SWELL activation.
- Production site should be activated from SWELL設定 > アクティベート.

1. DockerではSWELLを手動インストール
2. 子テーマで制作
3. SWELL本体のバージョンをREADMEにメモ
4. 本番サイトでは正式にユーザー認証
5. 本番とDockerでSWELLのバージョンを揃える

最後のThemaはワードプレスのためのものです。

注意事項

.env と local-login.md はGit管理に含めません。
WordPress本体ファイルを含む html/ もGit管理対象外にしています。

READMEを追加した後、以下でコミットしました。

bash
git add README.md
git commit -m "Update README"
git push

git statusの読み方

途中で git status の表示も確認しました。

Bash
On branch main

これは、今いるブランチが main という意味です。

Bash
Your branch is up to date with 'origin/main'.

これは、ローカルの main とGitHub側の origin/main が同じ状態という意味です。

Bash
Untracked files:
        README.md

これは、README.md がまだGitに追跡されていない新規ファイルという意味です。
git add README.md を実行すると、コミット対象に入ります。
git commit を実行すると、その変更が履歴として保存されます。

終了方法

作業を終えるときは、wp-portfolio フォルダで以下を実行します。

Bash
docker compose down

これでWordPress、MySQL、phpMyAdminのコンテナが停止します。
DBデータはvolumeに残るので、次回も同じ環境で起動できます。

終了時に気をつけること

docker compose down -v にしてしまうと、DBデータが入っているvolumeまで削除されてしまいます。
docker compose down -v を使うときはこんな時です。

  • WordPressを完全に初期化したいとき
  • DBが壊れた、設定を間違えた、ログインできなくなったなどで、環境をまっさらに戻したいとき
  • Dockerの練習で、起動から初期化まで何度も試したいとき

今回のようにWordPressの設定や投稿データを残したい場合は、通常の docker compose down だけにします。

あと終了時には、念のため以下も確認します。

Bash
git status

GitHubにpushし忘れているコミットがなければ、作業終了です。

今回やって分かったこと

今回チャッピー先生と並走しながらの作業で分かったのは、DockerでWordPressを動かすこと自体よりも、周辺の管理が重要だということです。

特に大事だったのは以下です。

・複数環境を前提にポート番号を決める
・DB名を環境ごとに分ける
・.envで秘密情報を管理する
・.env.exampleをGitHubに上げる
・.gitignoreで上げないファイルを明確にする
・GitHubには必要なものだけをpushする
・READMEに起動方法を書く

Dockerは単に環境を作る道具ですが、管理が杜撰だとあとで混乱します。
今回は、最初からGitHub管理や複数環境を意識して作れたので、今後WordPressのポートフォリオ制作、SWELL検証、ヘッドレスCMS検証にもつなげやすい土台ができました。

次にやること

次回は、WordPressの初期設定を行います。
WordPressの構築は、レンタルサーバーでは何度もやっているのですが、Docker上では初めてなので、どんな違いがあるのか楽しみです。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?