WordPressウェブサイトをDocker&Svelteを使ってローカル環境で開発する①〜準備編


※ 当ページには【広告/PR】を含む場合があります。
2022/06/11
2022/08/19
【Svelte Framework入門】Svelteを使ってJavascript/CSSからSVG曲線チャートを描く
WordPressウェブサイトをDocker&Svelteを使ってローカル環境で開発する②〜テーマ開発編

今回は何回かの記事に分けて、
「SvelteとWordPressの連携」をテーマに扱った記事を紹介していきます。

WordPressは言わずもがな、世界中でもっとも利用されているCMSの一つです。

機能的にも充実しており、WordPressでECサイトのような高機能サイトを独自に構築する場合、WooCommerceに代表されるような決済APIをプラグインとして手軽に連携することが出来るため、ネットショップを一からフルスクラッチするよりはWordPressベースで構築することで比較的楽に開発作業ができます。

ネットショップサイトを作るならフロントエンド周りは、JSフレームワークだとReactやVue、Next.js等で実装されているページが多いようです。

実績や実例が多く紹介されてあるReactでECサイトを作るのが一番楽そうに思えますが、今回は出来れば軽量なサイト設計にしたいことと、まだやられている例の少なそうなチャレンジ性の高さからSolid.jsやSvelteなどを利用したいと考えていました。

WordPress界隈だとまだまだヘッドレスCMS等での設計に本格採用されるケースは少ないようですが、とりあえず鋭意勉強中のSvelteを使ってWordPressページを作成していきます。

今回は手始めに、手元の環境でプレビューしながら開発できるように、WordPress用のDockerコンテナを構築するまでの手順を考えていきます。


合同会社タコスキングダム|蛸壺の技術ブログJavascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き

超JavaScript 完全ガイド 2024

Docker 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をインストール]ボタンを押すと、

合同会社タコスキングダム|蛸壺の技術ブログ

というように設定が完了します。


合同会社タコスキングダム|蛸壺の技術ブログJavascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き

超JavaScript 完全ガイド 2024

ローカル環境版の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コンテナが保持しているリソースは、
Wordpress REST APIで外部から操作することができます。

Wordpress REST APIを利用するには、WordpressのアカウントIDとパスワードを利用する必要があります。

本記事では、
Wordpress REST APIには触れませんが、今後急に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=<ログインパスワード>
        
これで、ローカルの開発用コンテナからWordpress REST APIを呼び出す際に、環境変数からユーザー名とパスワードを付与することが可能です。


合同会社タコスキングダム|蛸壺の技術ブログJavascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き

超JavaScript 完全ガイド 2024

Wordpressのローカル開発用Dockerコンテナの構築

先程の節まででは、Docker上で単なるワードプレスが起動しただけでしたので、ここからさらにギアを上げて
「WordPressプラグイン開発のコンテナ」を盛り込んでいきましょう。

先程のdocker-compose.ymlを以下のように新しいサービス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は以下のDockerfileをビルドしたイメージで利用します。

            
            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フォルダを編集するための前処理

wordpress Docker イメージにおいて、Wordpressプログラム本体は/var/www/htmlというフォルダ内に置かれています。

本来であれば、LinuxにWordpressに導入するための手順として、以下のサイトで説明されているように、Wordpress公式のダウンロードページからバイナリプログラムをダウンロードして、適切なディレクトリにリソースを手動で展開する流れとなっています。

参考サイト|WordPressのインストールと設定

/var/www/html内のファイルの中身は、Wordpressそのものですので、フォルダ構造はこちらの参考サイト|WordPress のフォルダ構成で詳しく解説されているように、多岐に渡るWordpressの機能が全て詰まっているものになります。

まずは、Docker版のWordpressイメージからこのWordpress中身を直接を扱うための前処理について触れましょう。

実は、先程のdocker-composeを初回起動した際に、現在の
wordpressコンテナから/var/www/html以下にあるリソースが、ローカルのwordpressフォルダにコピーされています。

ただし
wordpressコンテナからコピーされたリソースファイルは、権限をもつユーザー名・グループ名がwww-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/groupを確認するか、書き換え可能な任意のファイルをls -lして見てください。)

以下のchownコマンドでフォルダごと権限を上書きします。

            
            $ sudo chown -hR [ユーザー名]:[グループ名] wordpress
        
これでwordpressフォルダ内のリソースは全て書き換え可能になりました。

これでWordpressのテストサイトが書き換え可能になっているかを簡単に確認してみます。

ダッシュボードからデモとして使えるテーマの内、
Tewnty Twentyを選択します。

合同会社タコスキングダム|蛸壺の技術ブログ

合同会社タコスキングダム|蛸壺の技術ブログ

この
Tewnty Twentyというテーマのスタイルファイルは、wordpress/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のリソースを直接編集して独自のウェブサイトに作り上げることはかなり煩雑な作業になって現実的ではありません。

ウェブサイトを効率よく開発するためには、何かしらの
「フレームワーク」を利用しながらWordpressのテーマの中身を拡張する必要があります。

ここでは主題の通り、
「Svelte」アプリでWordpressのテーマの各リソースを適切に統合していくことを目指します。

前段階として兎にも角にも、SvelteでSPA(シングルページアプリケーション)が構築出来るようにしておかないといけません。

以前、SvelteフレームワークとTypescriptで開発環境を構築する方法を記事にしていました。

合同会社タコスキングダム|蛸壺の技術ブログ
【Svelte Framework入門】Svelteの開発環境をDocker Alpine内で簡単に構築する

Alpine LinuxコンテナからSvelteアプリ開発環境を構築するやり方を紹介します。

この記事で説明した手順で、起動中の開発用コンテナ・
wp6-devの中にアタッチして、wordpressをプロジェクトにもSvelteを導入する作業を行います。

ちなみにこのコンテナは中身を色々と拡張するので、インタラクティブモードで一旦中に入って操作します。

            
            $ 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アプリがビルド出来るまで作業します。

合同会社タコスキングダム|蛸壺の技術ブログ

問題なくSvelteアプリが単独で立ち上がればここではOKです。


合同会社タコスキングダム|蛸壺の技術ブログJavascript(js)&Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍&教材の手引き

超JavaScript 完全ガイド 2024

まとめ

今回の記事ではDocker/Docker-composeを活用した、WordpressウェブサイトとSvelteアプリを統合する上で欠かせない環境の準備作業をまとめてみました。

次回からはWordpressのテーマとSvelteのビルド済みリソースをどのように統合していくかを考えて行く予定です。