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


2022/06/11

今回は何回かの記事に分けて、
「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コンテナを構築するまでの手順を考えていきます。


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

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

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


ローカル環境版の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用のプラグイン開発など、フロントエンド周りをカスタマイズしていく場合、さらに別のDockerコンテナからwordpressコンテナ側へのリソースを編集する必要があります。

WordPressプラグイン開発のコンテナの詳細に関しては次回以降の記事で解説していく予定ですが、ローカル開発環境からwordpressコンテナにログインできるように、以下のように
.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=<ログインパスワード>
        
次回はユーザー名とログインパスワードをDockerコンテナ内部で定義したシェル変数から、ローカルDockerコンテナ間アクセスさせるところから説明していきます。

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。