カテゴリー
WordPressウェブサイトをDocker＆Svelteを使ってローカル環境で開発する①〜準備編
※ 当ページには【広告/PR】を含む場合があります。
2022/06/11
2022/08/19
今回は何回かの記事に分けて、
WordPressは言わずもがな、世界中でもっとも利用されているCMSの一つです。
機能的にも充実しており、WordPressでECサイトのような高機能サイトを独自に構築する場合、WooCommerceに代表されるような決済APIをプラグインとして手軽に連携することが出来るため、ネットショップを一からフルスクラッチするよりはWordPressベースで構築することで比較的楽に開発作業ができます。
ネットショップサイトを作るならフロントエンド周りは、JSフレームワークだとReactやVue、Next.js等で実装されているページが多いようです。
実績や実例が多く紹介されてあるReactでECサイトを作るのが一番楽そうに思えますが、今回は出来れば軽量なサイト設計にしたいことと、まだやられている例の少なそうなチャレンジ性の高さからSolid.jsやSvelteなどを利用したいと考えていました。
WordPress界隈だとまだまだヘッドレスCMS等での設計に本格採用されるケースは少ないようですが、とりあえず鋭意勉強中のSvelteを使ってWordPressページを作成していきます。
今回は手始めに、手元の環境でプレビューしながら開発できるように、WordPress用のDockerコンテナを構築するまでの手順を考えていきます。
Docker wordpressイメージの導入
おおよそ
リソースファイルの追加
適当なプロジェクトフォルダを
my_wp $ mkdir my_wp
$ cd my_wp
今回はカスタムイメージは利用しないので、docker-composeだけでWordPress開発環境を構築します。
$ touch docker-compose.yml
で空の設定ファイルを作成し、以下の内容に編集しましょう。
version: '3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
MYSQL_DATABASE: ${MYSQL_DATABASE}
MYSQL_USER: ${MYSQL_USER}
MYSQL_PASSWORD: ${MYSQL_PASSWORD}
wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- "8000:80"
restart: always
environment:
WORDPRESS_DB_HOST: ${WORDPRESS_DB_HOST}
WORDPRESS_DB_USER: ${WORDPRESS_DB_USER}
WORDPRESS_DB_PASSWORD: ${WORDPRESS_DB_PASSWORD}
volumes:
db_data:
docker-composeで処理するコンテナ内の環境変数は
.env $ touch .env
作成した
.env MYSQL_ROOT_PASSWORD=somewordpress
MYSQL_DATABASE=wordpress
MYSQL_USER=wordpress
MYSQL_PASSWORD=wordpress
WORDPRESS_DB_HOST=db:3306
WORDPRESS_DB_USER=wordpress
WORDPRESS_DB_PASSWORD=wordpress
Docker Compose ビルド
では、先程docker-compose.ymlを元にデタッチモードでDockerコンテナを起動してみます。
$ docker-compose up -d
$ docker-compose ps
Name Command State Ports
-----------------------------------------------------------------------------------------------------------
sveltewordpress_db_1 docker-entrypoint.sh mysqld Up 3306/tcp, 33060/tcp
sveltewordpress_wordpress_1 docker-entrypoint.sh apach ... Up 0.0.0.0:8000->80/tcp,:::8000->80/tcp
正常に起動したら、ここで一度
http://localhost:8000アクセスしてみると、WordPressの初期設定が開始されることが分かります。
言語は
[日本語][次へ]
ここでは、ウェブサイトの基本情報を入力していきます。
とりあえずローカルでの閉じた環境とはいえ、WordPressの本番と同様に以下の登録項目は必須のようです。
サイトのタイトル: ウェブサイトの概要等。例)svelte-wp-example
ユーザー名: ユーザー名。例)taco777@wp
パスワード: ログインパスワード。
メールアドレス: 連絡先となるEメールアドレス。例)hoge@tacoskingdom.com
検索エンジンでの表示: 今回はローカルなので関係のないオプション
後でいくらでも変更が効くようですので、適当な値を入力しましょう。
基本情報を入力後に、
[WordPressをインストール]
というように設定が完了します。
ローカル環境版のWordPressを使ってみる
では先程で初期設定が完了しましたので、先程設定したユーザー名とパスワードを使って一度ログインしてみましょう。
確かにWordPressが起動しているようです。
見ての通り中身はWordPressそのものですので、後は通常通りWordPressのページを編集なりしていくことで(もちろんローカルですので誰もサイトに訪れることはありませんが)ブログサイトになります。
ちなみにこのローカルのWordPress環境を停めても設定は維持されるのかどうか少し気になっている方もいると思うので、起動しているDockerコンテナを停止してみます。
$ docker-compose down
そして、再び再起動してみます。
$ docker-compose up -d
再度、
http://localhost:8000
これは、docker内部できちんとWordPress内部のデータベースが永続化されているためで、データベースの保存場所はLinuxOS環境下では以下のように確認することができます。
$ sudo ls /var/lib/docker/volumes | grep db_data
sveltewordpress_db_data
もし、データベースごと消去したい場合には、以下のコマンドで該当のデータベースを消去することができます。
$ docker-compose down --volumes
このクリーンアップコマンドを利用すると、データベースのみならず、コンテナとネットワークも同時に初期化されますのでご注意ください。
管理者ダッシュボードへのログイン
管理者画面に戻る場合には、
http://localhost:8000/wp-admin
開発用DockerコンテナからWordpressの内部DBへのアクセス権限を設定する
Dockerを用いたWordPressのローカル開発環境だと、Wordpressコンテナ(アプリケーション側)とMySQLコンテナ(内部データベース側)が分離された形でそれぞれバックグラウンドで稼働した状態になっています。
以降で説明しますがプラグイン開発など、フロントエンド周りをカスタマイズしていくため、共有リソース(Wordpressリソース本体の入っている
/var/www/html他方で、画像やブログ記事のテキストデータのような、MySQLコンテナが保持しているリソースは、
本記事では、
.env MYSQL_ROOT_PASSWORD=somewordpress
MYSQL_DATABASE=wordpress
MYSQL_USER=wordpress
MYSQL_PASSWORD=wordpress
WORDPRESS_DB_HOST=db:3306
WORDPRESS_DB_USER=wordpress
WORDPRESS_DB_PASSWORD=wordpress
#👇以下を追記
WP_USER=<登録したユーザー名>
WP_AP_PASS=<ログインパスワード>
これで、ローカルの開発用コンテナから
Wordpressのローカル開発用Dockerコンテナの構築
先程の節まででは、Docker上で単なるワードプレスが起動しただけでしたので、ここからさらにギアを上げて
dev version: '3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
MYSQL_DATABASE: ${MYSQL_DATABASE}
MYSQL_USER: ${MYSQL_USER}
MYSQL_PASSWORD: ${MYSQL_PASSWORD}
wordpress:
depends_on:
- db
image: wordpress:latest
ports:
- "8000:80"
restart: always
environment:
WORDPRESS_DB_HOST: ${WORDPRESS_DB_HOST}
WORDPRESS_DB_USER: ${WORDPRESS_DB_USER}
WORDPRESS_DB_PASSWORD: ${WORDPRESS_DB_PASSWORD}
#👇プラグイン拡張のためにVOLUMEの追加も行う
volumes:
- ./wordpress:/var/www/html
#👇Wordpressプラグイン開発用のコンテナ
dev:
image: wp_dev:node14.19
build: .
user: "node:node"
container_name: wp6-dev
environment:
NODE_ENV: ${NODE_ENV}
volumes:
- ./:/usr/src/app
stdin_open: true
working_dir: "/usr/src/app"
ports:
- "4200:4200"
tty: true
volumes:
db_data:
今回のプラグイン開発によるWordpress開発の手法では、共有ボリューム上のリソースを書き換えるので各コンテナサービス間の通信はあまり問題になりませんが、
Wordpress REST APIまた、環境変数の定義(
.env MYSQL_ROOT_PASSWORD=somewordpress
MYSQL_DATABASE=wordpress
MYSQL_USER=wordpress
MYSQL_PASSWORD=wordpress
WORDPRESS_DB_HOST=db:3306
WORDPRESS_DB_USER=wordpress
WORDPRESS_DB_PASSWORD=wordpress
WP_USER=<登録したユーザー名>
WP_AP_PASS=<ログインパスワード>
#👇以下を追記
NODE_ENV=development
新たに追加したdocker-composeサービス・
dev FROM node:14.19-alpine
RUN apk update && apk upgrade && \
apk add --no-cache bash openssh git ca-certificates wget curl
ENV PS1="[\u@\w]$"
CMD ["bash"]
この例ではnode.js v14のnodeイメージを利用しています。 node.jsのバージョンは、開発に使うnpmパッケージの状況を見て適切に組み換えてください。
ここまでで現在のプロジェクトフォルダの中身は以下のようになっています。
$ tree
.
├── Dockerfile
├── .env
└── docker-compose.yml
ここで一旦docker-composeからイメージのビルドを行います。
$ docker-compose build
ビルドしたイメージに問題が無ければ、各コンテナを起動させてみます。
$ docker-compose up -d
$ docker-compose ps
NAME COMMAND SERVICE STATUS PORTS
svelte-wordpress-db-1 "docker-entrypoint.s…" db running 33060/tcp
svelte-wordpress-wordpress-1 "docker-entrypoint.s…" wordpress running 0.0.0.0:8000->80/tcp, :::8000->80/tcp
wp6-dev "docker-entrypoint.s…" dev running
これでdocker-composeで定義したコンテナが全てスタンバイ状態で起動していることが分かります。
wordpressフォルダを編集するための前処理
/var/www/html本来であれば、LinuxにWordpressに導入するための手順として、以下のサイトで説明されているように、Wordpress公式のダウンロードページからバイナリプログラムをダウンロードして、適切なディレクトリにリソースを手動で展開する流れとなっています。
/var/www/htmlまずは、Docker版のWordpressイメージからこのWordpress中身を直接を扱うための前処理について触れましょう。
実は、先程のdocker-composeを初回起動した際に、現在の
wordpress/var/www/htmlwordpressただし
wordpresswww-data $ ls -la wordpress/
合計 244
drwxr-xr-x 5 www-data www-data 4096 7月 3 17:49 .
-rw-r--r-- 1 www-data www-data 261 6月 10 12:47 .htaccess
-rw-r--r-- 1 www-data www-data 405 2月 6 2020 index.php
#...中略
-rw-r--r-- 1 www-data www-data 4748 4月 11 20:42 wp-trackback.php
-rw-r--r-- 1 www-data www-data 3236 6月 9 2020 xmlrpc.php
そこで、これらのファイルにアクセスするために、リソースの権限を現在のお手元のユーザー名・グループ名に書き換えます。 (なおユーザー名・グループ名が分からないときは、
cat /etc/groupls -l以下のchownコマンドでフォルダごと権限を上書きします。
$ sudo chown -hR [ユーザー名]:[グループ名] wordpress
これで
wordpressこれでWordpressのテストサイトが書き換え可能になっているかを簡単に確認してみます。
ダッシュボードからデモとして使えるテーマの内、
Tewnty Twenty
この
Tewnty Twentywordpress/wp-content/themes/twentytwenty/style.cssということで、このスタイルファイルを空にするとどうなるのかやってみましょう。
$ cd wordpress/wp-content/themes/twentytwenty
#👇後で戻せるようにバックアップをコピー
$ cp style.css style.copy.css
#👇style.cssの中身を空っぽにする
$ cp /dev/null style.css
これでWordpressサイトを再度読み込んでみると、
期待通り(？)にCSSスタイルが消えて、スタイルなしのHTMLページになりました。
これでDockerからWordpressサイトをカスタマイズしていく開発環境のベースが構築できたことになります。
Svelteアプリ開発用のコンテナも構築する
先程の説明で、Wordpressのウェブページのテーマが自由に編集・カスタマイズ出来ることは分かりました。
ですが、wordpressのリソースを直接編集して独自のウェブサイトに作り上げることはかなり煩雑な作業になって現実的ではありません。
ウェブサイトを効率よく開発するためには、何かしらの
ここでは主題の通り、
前段階として兎にも角にも、SvelteでSPA(シングルページアプリケーション)が構築出来るようにしておかないといけません。
以前、SvelteフレームワークとTypescriptで開発環境を構築する方法を記事にしていました。
この記事で説明した手順で、起動中の開発用コンテナ・
wp6-devwordpressちなみにこのコンテナは中身を色々と拡張するので、インタラクティブモードで一旦中に入って操作します。
$ docker-compose exec dev bash
[node@/usr/src/app]$ #...インタラクティブモードで以下作業する
ちなみに、wordpressフォルダ内のリソースの権限をこのコンテナ内から確認すると、
$ ls -la wordpress/
total 244
drwxr-xr-x 5 node node 4096 Jul 3 08:49 .
-rw-r--r-- 1 node node 261 Jun 10 03:47 .htaccess
-rw-r--r-- 1 node node 405 Feb 6 2020 index.php
#...中略
-rw-r--r-- 1 node node 32051 Apr 11 11:42 wp-signup.php
-rw-r--r-- 1 node node 4748 Apr 11 11:42 wp-trackback.php
-rw-r--r-- 1 node node 3236 Jun 8 2020 xmlrpc.php
となっていることも確認できます。
プロジェクトにSvelteアプリケーション用のフォルダ・
svelte-app $ mkdir svelte-app && cd svelte-app
後はもう
問題なくSvelteアプリが単独で立ち上がればここではOKです。
まとめ
今回の記事ではDocker/Docker-composeを活用した、WordpressウェブサイトとSvelteアプリを統合する上で欠かせない環境の準備作業をまとめてみました。
次回からはWordpressのテーマとSvelteのビルド済みリソースをどのように統合していくかを考えて行く予定です。
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー