開発環境構築 まとめ
開発環境構築のまとめです。開発は、WSL + Docker + VSCode(Remote Development)で行います。なお、この記事は個人的なメモとなりますので詳細解説はしておりません。
- Windows
- 10 home (20H2)
- WSL
- 2
- Ubuntu
- 20.04 LTS
- Docker Desktop for Windows
- 4.6.1 (76265)
- Git
- 2.30.2
- VSCode
- 1.66.2
Docker
コンテナの作成には、VSCodeと拡張機能のRemote Developmentを使用します。
ビルドコンテキスト
/home/name/project_dir/
|-- .devcontainer/
| |-- docker-image/
| | |-- Dockerfile
| | `-- .ini
| |-- .env
| |-- devcontainer.json
| `-- docker-compose.yml
`-- src/
|-- bin/
`-- public_html/
`-- wp/
.env
Dockerに渡す環境変数を設定します。
CONTAINER_NAME=wordpress
PORT_WP=8080
PORT_PA=8081
PORT_DB=3306
USER_NAME=name
USER_ID=1000
GROUP_ID=1000
APACHE_DOCUMENT_ROOT=/var/www/html/public_html
WP_DIR=wp
.docker-compose.yml
build:args
で、.envで定義した環境変数をDockerfileへ渡します。environment
で、.envで定義した環境変数をコンテナへ渡します。
docker-compose config
で、現在のcomposeファイルの確認と表示ができます。
version: '3'
services:
web:
build:
context: ./wordpress
args:
UID: ${USER_ID}
GID: ${GROUP_ID}
UNAME: ${USER_NAME}
APACHE_DOCUMENT_ROOT: ${APACHE_DOCUMENT_ROOT}
image: wordpress
container_name: ${CONTAINER_NAME}
ports:
- ${PORT_WP}:80
volumes:
- ../src:/var/www/html
working_dir: ${APACHE_DOCUMENT_ROOT}/${WP_DIR}
environment:
LOCALHOST_PORT: ${PORT_WP}
WP_DIR: ${WP_DIR}
WORDPRESS_DB_HOST: db:${PORT_DB}
WORDPRESS_DB_NAME: wordpress
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
WORDPRESS_DEBUG : 1
WORDPRESS_CONFIG_EXTRA: |
define('SAVEQUERIES', true);
define('WP_POST_REVISIONS', false);
if (isset($$_GET['debug']) && $$_GET['debug'] == 'debug') {
define('WP_DEBUG', true);
}
tty: true
stdin_open: true
depends_on:
- db
phpmyadmin:
image: phpmyadmin:latest
ports:
- ${PORT_PA}:80
environment:
PMA_HOST: db:${PORT_DB}
PMA_USER: wordpress
PMA_PASSWORD: wordpress
depends_on:
- db
db:
image: mariadb:10.5
ports:
- ${PORT_DB}:3306
command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --default-time-zone=Asia/Tokyo
volumes:
- db_data:/var/lib/mysql
environment:
MARIADB_ROOT_PASSWORD: password
MARIADB_DATABASE: wordpress
MARIADB_USER: wordpress
MARIADB_PASSWORD: wordpress
MYSQL_TCP_PORT: ${PORT_DB}
TZ: Asia/Tokyo
volumes:
db_data:
Dockerfile
マルチステージビルドを利用しています。
FROM node:14.18.1-slim as node
FROM wordpress:php7.4-apache
ARG UID=${USER_ID}
ARG GID=${GROUP_ID}
ARG UNAME=${USER_NAME}
ARG APACHE_DOCUMENT_ROOT= ${APACHE_DOCUMENT_ROOT}
COPY --from=node /usr/local/bin/node /usr/local/bin/node
COPY --from=node /usr/local/lib/node_modules /usr/local/lib/node_modules
RUN ln -s /usr/local/bin/node /usr/local/bin/nodejs && \
ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm && \
ln -s /usr/local/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npx
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
COPY --from=wordpress:cli-php7.4 /usr/local/bin/wp /usr/local/bin/wp
COPY ./.ini /usr/local/etc/php/conf.d/php.ini
RUN sed -ri -e 's!/var/www/html!'${APACHE_DOCUMENT_ROOT}'!g' /etc/apache2/sites-available/*.conf && \
sed -ri -e 's!/var/www/!'${APACHE_DOCUMENT_ROOT}'!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf
RUN apt-get update && apt-get -y install --no-install-recommends \
openssh-client \
ssh-agent-filter \
git
RUN pecl install xdebug && \
docker-php-ext-enable xdebug && \
rm -r /tmp/pear
RUN groupadd -g $GID $UNAME && \
useradd -u $UID -g $GID -o -s /bin/bash -m $UNAME && \
usermod -aG www-data $UNAME
USER $UID
src (マウントディレクトリ)
srcディレクトリをコンテナへマウントします(docker-composeのvolumes
で定義)。
注意点として、src以下、public_htmlなどの下位ディレクトリの作成をローカル側で済ますことが挙げられます。なぜなら、コンテナ作成時、working_dir
で指定したディレクトリが存在しない場合は自動で作成されるのですが、それだと、ユーザーがrootになってしまい、パーミッションの問題が生まれてしまうからです。ローカルで作成しておくことで、所有者が引き継がれます。
VSCode
初期設定
settings.json
「Ctrl + Shift + P」でコマンドパレットを表示し、Preferences: Open Settings(JSON)を開く。
{
"editor.bracketPairColorization.enabled": true, // ブラケットの開始と終了を同じ色に
"editor.fontFamily": "Source Code Pro, Consolas, 'Courier New', monospace",
"git.ignoreLegacyWarning": true,
"indentRainbow.colors": [
"rgba(255,255,64,0.04)",
"rgba(127,255,127,0.04)",
"rgba(255,127,255,0.04)",
"rgba(79,236,236,0.04)"
],
"workbench.editor.enablePreview": false, // 常に新規エディタでファイルを開く
"workbench.tree.indent": 10, // ファルダ階層のインデント幅
"workbench.iconTheme": "vscode-icons", // エクスプローラーのアイコン
"[php]": {
"editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?" // 変数のダブルクリックで$を選択範囲に含める
},
}
拡張機能
ローカルには最低限の拡張機能だけをインストールし、開発時に必要な拡張機能は、Remote Developmentを利用して各コンテナでインストールします。
Remote Development
devcontainer.json
devcontainer.jsonは、VSCode用のコンテナ設定ファイルです。下記は基本的に使うものだけを記入していますが、VSCodeで使う拡張機能やコンテナの内容によって変わってきます。
{
"name": "project name", // VScodeで表示されるコンテナ名
"dockerComposeFile": "./docker-compose.yml",
"service": "web", // Docker Compose で接続するサービス名
"workspaceFolder": "/var/www/html",
"overrideCommand": false, // コンテナーのデフォルトコマンドの代わりに/bin/sh -c "while sleep 1000; do :; done"を実行するか
"extensions": [ // 拡張機能
"howardzuo.vscode-favorites",
"ms-ceintl.vscode-language-pack-ja",
"oderwat.indent-rainbow"
],
"settings": {
"indentRainbow.colors": [
"rgba(255,255,64,0.04)",
"rgba(127,255,127,0.04)",
"rgba(255,127,255,0.04)",
"rgba(79,236,236,0.04)"
],
},
}
Git
コンテナの初回起動後
$ git config --global user.name 'Name'
$ git config --global user.email '12345678+example@users.noreply.github.com'
$ git config --global init.defaultBranch main
GitHub
リポジトリ作成
GitHubにリポジトリを作成します。
本番サーバーに自動デプロイをする場合はOrganizationアカウントに、それ以外の場合は個人アカウントにリポジトリを作成します。
エラー
コンテナの作成、起動失敗
docker logs <コンテナ名>
でエラーメッセージを確認。
更新履歴
- VSCod v1.66 から編集履歴(ローカル履歴)が標準で管理できるようになったので、拡張機能であるLocal Historyを削除 - 22.04.02
- 本番サーバへのデプロイをGitHub Actionsへ変更したため、拡張機能からSFTPを削除 - 22.04.19