無料で出来るローカル開発

端的に言いますと、自分のPCの中に擬似的にサーバーを設置し、そのサーバーを使用してwebサイトやアプリケーションを開発することです。

例えば、webサイトを制作するには、webサーバーが必要でして、そのサーバーにHTMLファイルなどを置くことで、その情報がブラウザに表示されるという仕組みです。

サーバーには色々な種類がありますが、個人レベルでよく使われているのが俗に言うレンタルサーバーです。

レンタルサーバーを使用するには少々コストがかかります。初期費用や使用料やドメイン取得費などですね。

webサイトやwebアプリケーションは有料のサーバーを使用して作られますが、いきなり本番で開発するのではなく、まずはプロトタイプを作り、挙動や機能、デザインなどを確認する行為がローカル開発です。

ローカル開発用のソフトウェアは無料でインストールできるため費用はかかりません。

Dockerのインストール方法

ローカル開発で使用するフリーソフトウェアはいくつかあります。下記の3点は利用者が多く有名です。

私のPCはMacなので、以前はMAMPを使用していましたが、原因不明のエラーが多かった(M1チップが原因？)のと、Dockerのほうがシームレスで便利なので、最近はDocker一択です。

当然おすすめはDockerなのですが、気になる方はXAMMPやMAMPでも構わないと思うので、ご自身で調べてみてください。

下記サイトご参照ください。

WordPressのインストール

DockerでWordPressを使うには、Composeが必要ですが、Dockerが問題なくインストールできれば、composeはすぐに使用可能です。特別に何かをする必要はありません。

まず、プロジェクト用の空ディレクトリを準備し、移動します。

1. mkdir my_wp
2. cd my_wp

その中にdocker-compose.ymlファイルを作成します。

1. touch docker-compose.yml

docker-compose.ymlファイルの中に以下コードを記述

1. version: '3'
3. services:
4.   db:
5.     platform: linux/x86_64 # M1チップ対応のため追記
6.     image: mysql:5.7
7.     volumes:
8.       - db_data:/var/lib/mysql
9.     restart: always
10.     environment:
11.       MYSQL_ROOT_PASSWORD: somewordpress
12.       MYSQL_DATABASE: wordpress
13.       MYSQL_USER: wordpress
14.       MYSQL_PASSWORD: wordpress
16.   wordpress:
17.     depends_on:
18.       - db
19.     image: wordpress:latest
20.     ports:
21.       - "8010:80"
22.     restart: always
23.     environment:
24.       WORDPRESS_DB_HOST: db:3306
25.       WORDPRESS_DB_USER: wordpress
26.       WORDPRESS_DB_PASSWORD: wordpress
27.     volumes:
28.       - ./elon_task_ver2:/var/www/html/wp-content/themes/elon_task_ver2 # オリジナルテーマ開発のための設定
29. volumes:
30.   db_data:

最後に、プロジェクトディクレトリの上で下記コードを入れ、実行します。プロジェクトディクレトリは、docker-compose.ymlが置いてあるディレクトリのことです。この時にやりがちなのがDockerを起動せずにコードを実行することです。実行してもエラーになるので注意しましょう。

1. docker-compose up -d

以上の設定を行うと、WordPressはDockerホスト上のポート番号8000番を使い、稼働することになります。ちなみにこの　docker compose up -d　と言うコマンドはテーマを追加した際、docker composeを再起動させる目的でも使用しますので、頭の片隅に入れておきましょう。再起動しないと、新しいテーマが追加されません。

Docker Desktop for Mac や Docker Desktop for Windows を利用している場合、IP アドレスとしては http://localhost を利用しますので、ブラウザから http://localhost:8000 にアクセスしてください。

そうすると、WordPressインストール設定画面に飛びます。

あとはWordPressをセットアップするだけです。

WordPressのディレクトリ構造を把握する

プロジェクトディレクトリ上で以下コマンドを実行すると起動中のコンテナを確認できます。

1. docker container ls

中身を見たい場合は、WordPressのコンテナのNAMES要素をコピーし、bashコマンドで実行します。

1. docker exec -it docker_wp-wordpress-1 /bin/bash

これでWPのコンテナ内に入ることができました。ディレクトリ一覧が確認したい場合、ls -al を実行します。ご存知の方は多いかと思いますが、WordPressディレクトリは下記画像のような構成になっています。

Docker composeの止め方

以下のコマンドでcomposeをシャットダウン及びクリーンアップできます。ただし、メディアライブラリなどに保存した画像がなくなることがあるので注意してください。

docker-compose down
コンテナとデフォルトネットワークが削除されます。 ただし WordPress データベースは残ります。

docker-compose –volumes
コンテナとデフォルトネットワーク、さらに WordPress データベースも削除します。

私がDockerでWordPress開発を始めた理由

1. Dockerはwebエンジニア界では便利な必須ツール
2. MAMPよりシームレスで工数少なく本番環境に移行できる
3. 原因不明のエラーでMAMPが利用できなくなる

1&2について

Dockerはソフトウェア開発において、大手企業も利用するツールです。

Dockerでローカル開発したコードをそのまま本番環境に移行できるのが一番の魅力で、工数を減らせるし、開発スピードも格段に早くなります。

また、業界全体の潮流に、自分だけ逆らう理由はないとも思います。

3について

以前はMAMP(フリープラン)を利用してWordPress開発をしていたのですが、ある日からApacheが起動しなくなるエラーが増えました。

いくら調べても、いくら時間をかけても、いくらググっても、全く解決できません。

同じようなエラーが起きた方のブログを拝見すると、修正するのは諦めて、再度インストールをしたと記されていました。

確かに再インストールするとまた使えるようになるのですが、WordPressも再インストールが必要ですし、データベースもまた新しく作らなくてはいけません。無駄に手間が増えるだけでした。

一回だけならまだしも、このエラーが頻出すると本当に気が滅入ります。思えば、MacのM1チップ搭載マシンに替えてから多くなった気がします。

というわけで、MAMPはやめてDockerを利用することにしましたが、Dockerではそのようなエラーは起きておらず、パス指定などもシームレスに行えるため、結果的に良かったと感じています。