開発環境構築 まとめ

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

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:

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

{
    "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)"
        ],
    },
}