プログラミング PR

FileZillaの練習にも!docker-composeを使ってWordPress開発環境構築(初心者からでもOK!)

記事内に商品プロモーションを含む場合があります

皆さんDockerを使ってますでしょうか!?

最近、Wordpressの開発を試してみようと思ってローカル開発環境を構築しようとしていたのですが、どうせならDockerを使ってローカル環境を整えようかと思っていたのですが、これがfilezillaを使ってやろうとしたら、まぁまぁ苦労したので共有です!

というか、意外にもこの手の記事少なかったので何かのヒントになれば。。。

 

WordPressの開発環境で有名どころはLocalですが、こんな悩みがある場合は特に売ってつけかと思います

  • Rubyなど、他にも開発したいからローカルに余計なアプリケーションはいれたくない!
  • Docker入っているからせっかくなら、Dockerで開発したい
  • なんか、Dockerで開発したらレベルアップしそう

という場合は、ぜひ参考にしてください!

初心者の方にもなるべくわかりやすい解説を心がけていますが、Dockerとはなんぞやについてはこの記事では割愛しております!

とにかくローカル開発環境で使えることを目標にしております!!

筆者の環境

  • MacBookAir M1チップ

Dockerインストールから

兎にも角にも、Dockerインストールしていない方はまずこちらから

Intel系(Windows,MacOS(Intelチップ),Linux)

Appleシリコン系(M1,M2チップのMacOS)

自分のPCがどれ使っているかが重要!

MacOSの場合は、Appleシリコンなのか、Intelなのか重要!!

そして、Windowsユーザーは別途WSL2を使ってUnbuntuをインストールしてLinux環境を構築する必要があります

これについては、別途解説記事を作ろうかと思いますが、一旦マイクロソフトの公式サイトからインストールしてみてください

そんなに難しくはないです!!

ただし、Linux環境なので、コマンドを使わないといけないため初心者にはハードルが高いかと思います!

試したことは無いのですが、DockerデスクトップというGUIで操作するツールがあるのですが、こちらでDockerのイメージを作成、docker-composeでコンテナを作るということ自体は可能ですので、「WSL2の構築わからん!」という方は一旦Dockerデスクトップでも良きかと!(というか、ローカルでエクスプローラーからファイルをいじることがあると思うので、こっちの方がいいかも?)

Dockerよくわからない!という方はこちらの本で学習してみるのもおすすめです!

Dockerの概念から実践的なコンテナの作り方まで学習できます

ローカル環境でWordpress開発

順番にいきます

以下3つのファイルを作成していきます

FROM wordpress:latest

# VSFTPDサーバをインストールする
RUN apt-get update && \
    apt-get install -y vsftpd openssh-server

# FTPユーザーを作成する
ARG FTP_USER_NAME
ARG FTP_USER_PASS
RUN useradd -m ${FTP_USER_NAME} && \
    echo "${FTP_USER_NAME}:${FTP_USER_PASS}" | chpasswd && \
    usermod -aG www-data ${FTP_USER_NAME}

# SSHユーザーを作成する
ARG SSH_USER_NAME
ARG SSH_USER_PASS
RUN useradd -m ${SSH_USER_NAME} && \
    echo "${SSH_USER_NAME}:${SSH_USER_PASS}" | chpasswd && \
    usermod -aG www-data ${SSH_USER_NAME}

# FTP/SSHの設定をする
COPY vsftpd.conf /etc/vsftpd.conf
RUN echo "root:${SSH_USER_PASS}" | chpasswd
RUN sed -i 's/#PermitRootLogin prohibit-password/PermitRootLogin yes/' /etc/ssh/sshd_config
RUN mkdir /run/sshd

# WordPressのディレクトリに権限を与える
RUN chown -R ftpuser:ftpuser /var/www/html/wp-content/themes/ && \
    chmod -R 755 /var/www/html/wp-content/themes/ && \
    chmod -R g+w /var/www/html/wp-content/themes/

# フォルダ名をビルド前に指定すること
COPY . /var/www/html/wp-content/themes/practice1

# FTP/SSHのポートを開く
EXPOSE 21 22
version: "3"

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

  wordpress:
    depends_on:
      - db
    build:
      context: .
      args:
        FTP_USER_NAME: ftpuser
        FTP_USER_PASS: ftppassword
        SSH_USER_NAME: sshuser
        SSH_USER_PASS: sshpassword
    ports:
      - "8000:80"
      - "21:21"
      - "22:22"
      - "30000-31000:30000-31000"
    restart: always
    privileged: true
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
# 起動前にthemes/フォルダ名を指定すること volumes: - .:/var/www/html/wp-content/themes/practice1 volumes: db_data:
listen=NO
listen_ipv6=YES
anonymous_enable=YES
local_enable=YES
write_enable=YES
local_umask=022
dirmessage_enable=YES
use_localtime=YES
xferlog_enable=YES
connect_from_port_20=YES
chroot_local_user=NO
secure_chroot_dir=/var/run/vsftpd/empty
pam_service_name=vsftpd
rsa_cert_file=/etc/ssl/certs/ssl-cert-snakeoil.pem
rsa_private_key_file=/etc/ssl/private/ssl-cert-snakeoil.key
ssl_enable=NO
pasv_enable=YES
pasv_min_port=30000
pasv_max_port=31000
user_sub_token=$USER
local_root=/home/ftpuser

 

これらのファイルを作成したら、以下のコマンド(またはDockerデスクトップから)イメージの作成、コンテナの起動をします

docker-compose build
docker-compose up

 

これでlocalhost:8000をブラウザのURLに入力するとローカル環境のWordpressが起動します

 

また、忘れてはならないのが、ビルド前にthemes/ファイル名を変更しておくことです!

別にしなくても問題ないのですが、一応しておくと良いですね

 

以上で、ローカル環境のDockerコンテナを使った開発環境は完了です!

続いてはFileZillaを使った、やや本番に近い形を想定した場合の開発です

FileZillaを使った開発

Dockerfileやdocker-compose.ymlとvsftpd.confはそのままで、先程のビルドと起動を行います

 

そうしたらコンテナに入る必要があるので、以下のコマンドをMacならターミナルを起動して操作します

(Windowsならコマンドプロンプトだけど、以下のコマンドで全部いけるかは検証していないのでわかりません。。。WSL2環境ならいけます!)

# dockerコンテナのIDを調べる
docker ps

# 先程調べたIDを以下のところに追記する
docker exec -it コンテナID /bin/bash

# vsftpdを起動する
service vsftpd start

# このままだと権限の問題でFileZillaに接続できないので以下設定する
chmod -R 755 wp-content/themes/
chown -R ftpuser wp-content/themes/

FileZillaで以下を設定
ホスト:localhost
通信:FTP
ポート:21
user: ftpuser
pw: ftpuser

以上で、FileZillaを使った開発が可能になります

docker psについては以下のような出力が出るので、そのうちのCONTAINER IDに該当するa324987f4688をコピーすればOK

CONTAINER ID   IMAGE            COMMAND                  CREATED        STATUS       PORTS                                                                                  NAMES
a324987f4688   blog-wordpress   "docker-entrypoint.s…"   2 hours ago    Up 2 hours   0.0.0.0:21-22->21-22/tcp, 0.0.0.0:30000-31000->30000-31000/tcp, 0.0.0.0:8000->80/tcp   blog-wordpress-1

dockerコンテナはdokcer-compose downなどでコンテナを止めるたびに、IDが変わります。

そのため、手間ですが一回一回docker psでIDを確認する必要があります。

この辺もう少し楽にしたいのですが、そこまで自分は使わないのでいいかなと思ってます(上手いことできたら共有します!)

さいごに

おそらくどこかで詰まるような気もしますが、ひとまず、docker-compose buildとdocker-compose upができれば、wordpressのテーマ開発自体は問題なくできるので、一旦それでやってみてはいかがでしょうか!?

他にカスタマイズしてみてやりやすい方法あれば、それを採用してもOKです!

 

また、プログラミング初学者や転職における記事も紹介しているのでこちらも合わせてチェックしてみてください!

 

https://anikiblog.com/web-career1/

 

https://anikiblog.com/order_programming_learning/

関連記事