初めてDockerでAWSにWordPressを導入

モチベーション

　ポートフォリオサイトが欲しいと思いつつ、技術的な負担があり後回しにしてきたものの丁度良い機会があって、WordPress環境をAWSのEC2上に構築してみた。データビジュアライゼーションと3D物理造形に取り組んでいるので、Three.jsを使って3DCGファイルをアップロードできる環境にする。

構築のステップ

1. Docker上にWordpress環境を構築、ローカルで検証
2. AWSにEC２上サイトを構築
3. DockerでEC２上にデプロイして動作確認
4. Three.jsを使って動かすテーマを作成。手持ちのBlenderファイルを使って動作を確認する

1 dockerでのWordpress環境構築

・Dockerをローカル環境にインストールするところからスタート。まずはWordPressとMySQLのdocker-compose.yamlファイルを作成。homeにdockerディレクトリを作成し、docker-compose.yamlを置く。
・no matching manifest for linux/arm64/v8 in the manifest list entriesのエラーが発生。調べたところM1 macに発生するもの。platform: linux/x86_64を追記することで解決
・docker-compose up -dでコンテナを稼働させローカルホストでの起動を確認

services:
  wordpress:
    image: wordpress
    restart: always
    ports:
      - "8000:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: password
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wordpress:/var/www/html

  db:
    platform: linux/x86_64
　　 image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: root_password
    volumes:
      - ./db:/var/lib/mysql

2 AWSにEC2サイトを構築

・AWSにログイン後、EC2でインスタンスを作成する
　- EC2インスタンスの作成
・t3.micro
・AMI: Amazon Linux
　- ElasticIPへ移動して新たなIPを割り当てる。その後、EC2インスタンスと関連付けでパブリックIPの設定が完了
・生成したキーをSSHフォルダに移動しておく

% mv /Users/keiichimiyamoto/Downloads/kmw.pem ~/.ssh/
% chmod 400 ~/.ssh/kmw.pem

・ターミナルからEC2インスタンスにアクセスする。とりあえず、疎通確認の為にApacheを動かして確認してみる

% ssh -i ~/.sshxxx.pem [e-mail]
% sudo yum update -y
% sudo yum install httpd -y
% sudo systemctl start httpd.service
% sudo systemctl status httpd.service

・一旦sshでの接続を切断して、テスト用HTML(なんでも良い)のindex.htmlをサーバーにアップロードしてブラウザで疎通確認する

% exit
% scp -i ~/.sshxxx.pem [e-mail]:/tmp
% ssh -i ~/.sshxxx.pem [e-mail]
% sudo mv /tmp/index.html /var/www/html
% sudo sudo chmod 644 /var/www/html/index.html

・パーミッションに引っかかるので、一旦tmpに上げてからファイルを移動すると良い。移動してからパーミッションを変更する
・無事EC2サーバの動作確認を完了

3 DockerでEC２上にデプロイ

・そもそもDockerってなんだっけ？というのがあってまとめる

• Dockerイメージ　コンテナ起動の為の設定ファイルをまとめたもの
• Dockerコンテナ　実際のアプリケーションの動作環境
• レジストリ　Dockerイメージを保存する場所（Docker Hubなど）
• Dockerfile　設計図。編集することで、環境構築ができる。
• Docker Hub　イメージの共有のプラットフォーム

・理解を整理してみる

• 今回やりたいことはDockerイメージからDockerコンテナを生成
• Dockerfileでイメージをレポジトリに登録して使う。しかし、今回はWordpressとmySQLで構成するので、Docker-composeというコマンドで使うdocker-compose.yamlを使って既に公式が登録しているDockerイメージを使う

・まずサーバーにDockerをインストールする

% sudo dnf install -y docker
% sudo systemctl start docker
% sudo systemctl enable docker
（ユーザー登録もしておく）
% sudo usermod -aG docker $USER

・インストール状況を確認

$ docker version
Client:
Version: 25.0.8
API version: 1.44
Go version: go1.24.4
Git commit: 0b
.....

・早速ローカルで作成したdocker-compose.yamlをサーバに /optにdockerフォルダを作成
・yamlのあるフォルダで起動させるが動作していない様子。chatGPTのによるとlibcrypt.so.1というライブラリが必要とのこと。Amazon Linux2023では特にこの問題が発生するらしい。
$ sudo yum install -y libxcrypt-compat
・docker compose v1をインストール。無事成功した模様

mkdir -p \~/.docker/cli-plugins
sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" \
-o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
$ docker-compose --version
docker-compose version 1.29.2, build 5becea4c

再度v1のフォーマットdocker-compose up -d を試す。ようやくインストールできたよう

$ sudo docker-compose up -d

064b2d298fba: Pull complete
df9a4d85569b: Pull complete
Digest: sha256:4bc6bc963e6d8443453676cae56536f4b8156d78bae03c0145cbe47c2aad73bb
Status: Downloaded newer image for mysql:5.7
Creating tmp\_wordpress\_1 ... done
Creating tmp\_db\_1        ... done

4. Three.jsを使って動かすテーマを作成。手持ちのBlenderファイルを使って動作を確認する

・3Dポートフォリオギャラリーを作成する方法のうち、 Sketchfabを使う方法かThree.js + WordPressのいずれかになる。リアルタイムデータを表示するならThree.js一択だが、BlenderデータならSketchfabでも。
・Sketchfabを試したものの、あまり複雑な動きは表現出来なさそう
・Three.jsで表示させるテーマを作成。WordPressの /opt/docker/wordpress/wp-content/themes/に新規テーマ用のフォルダを作成
・以下のファイルをchatGPTにお願いして作成
　-　style.css
　-　functions.php
　-　index.php
　-　js/threejs-loader.js
・メディアライブラリに手持ちのBlenderデータをアップロード。.blendから.glbにエキスポートするがデフォルトのファイルサイズ上限2Mを超えるためアップできない様子。まずfunctions.phpにアップロードを許可するコードを追記する

function allow_glb_uploads($mimes) {
$mimes['glb'] = 'model/gltf-binary';
return $mimes;
}
add_filter('upload_mimes', 'allow_glb_uploads');

・その後WordPressのMIMEタイプチェックセキュリティ制限が必要なようなので。wp-config.php の設定変更を試してみる。以下を追記することでアップロード可能になった

define('ALLOW_UNFILTERED_UPLOADS', true);

・WordPress管理画面「外観 > テーマ」で有効化（管理画面で「3D Works」というカスタム投稿タイプが表示される）
・アップロード可能となる

積み残し作業

・Three.jsファイルは表示されたが、見え方や解像度、カメラ位置や照明の調整が必要。Blender側の設定読み込みも可能だが、threejs-loader.jsの設定を修正してベストな状態にしたい
・リアルタイムデータを収集するのに　fastAPIを噛ませてデータを3D化する