Zenn
🐳

【Docker】Docker起動中に特定のホスト名でローカル環境を表示

2023/10/29に公開
Docker
tech

dockerを起動中、localhostのホスト名で開発を進めてもよいですが、同じホスト名で本番環境を再現したローカル環境が欲しいときもあります。
※リリース済みのWordPessサイトをローカル環境で再現する時など、dumpしたsqlファイルの内容を置換するのは面倒ですよね。。

とういことで、Docker起動中は特定のホスト名でローカル環境を表示する設定にできたのでメモ。
※環境はMac M2

ローカルPCの/etc/hostsファイルを編集

/etc/hostsファイルは「ホスト名とIPアドレスの対応付けを記載するファイル」です。
参考

編集します
※Windowだと場所はC:\Windows\System32\drivers\etc\hostsにあるそう

sudo vi /etc/hosts

一番下に下記を追加

/etc/hosts
# local
127.0.0.1   www.hoge.com
127.0.0.1   hoge.com

これでwww.hoge.comまたはhoge.comをブラウザで検索した際にローカル環境が表示されるようになる。

docker-compose.ymlファイルを作成

今回は例としてphpとapacheの環境を作成

docker-compose.yml
// Docker Composeバージョン3の構文を使用
version: '3.7'
// Dockerコンテナの設定を定義
services:
  php:
    image: php:8.2-apache
    // ローカル環境の./htmlディレクトリをコンテナ内の/var/www/htmlディレクトリにマウント
    volumes:
      - ./html:/var/www/html
    // ホストのポート80をコンテナのポート80にマッピング
    ports:
      - 80:80
    // Dockerネットワークの設定
    networks:
      - mysite
// ブリッジドライバーを使用して登録したネットワークを設定
networks:
  mysite:
    driver: bridge

dockerを起動して./htmlに配置したphpファイルが実行されたらOK
現在さらにSSL化する方法を模索中。。

さらにWordPress環境を実装

docker-compose.yml
version: "3.7"
services:
  db:
    image: mysql:8.0
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password # rootユーザのパスワード
      MYSQL_DATABASE: db_local # WordPress用データベース名
      MYSQL_USER: wp_user # WordPress用データベース接続ユーザ名
      MYSQL_PASSWORD: password # WordPress用データベース接続パスワード
  wordpress:
    image: wordpress:latest
    restart: always
    depends_on:
      - db
    ports:
      - 80:80
    environment:
      WORDPRESS_DB_HOST: db:3306 # データベースサーバ名：ポート番号
      WORDPRESS_DB_USER: wp_user # WordPress用データベース接続ユーザ名(dbの内容に合わせる)
      WORDPRESS_DB_PASSWORD: password # WordPress用データベース接続パスワード(dbの内容に合わせる)
      WORDPRESS_DB_NAME: db_local # WordPress用データベース名(dbの内容に合わせる)
      WORDPRESS_DEBUG: 1 # デバッグモードON
    volumes:
      - ./html:/var/www/html
  phpmyadmin:
    platform: linux/x86_64 # Mac対応
    image: phpmyadmin/phpmyadmin:latest
    restart: always
    environment:
      PMA_HOST: db # phpMyAdminが接続するMySQLデータベースのホストを指定
      MYSQL_ROOT_PASSWORD: password
      MEMORY_LIMIT: 128M
      UPLOAD_LIMIT: 100M
    depends_on:
      - db
    ports:
      - 8080:80
volumes:
    wordpress:
    db_data:
networks:
  mysite:
    driver: bridge

さらにWordPress + Node.js環境を作成

さらにDockerで作成したWordPress環境上にNode.jsをインストールする方法

まずはdocker-compose.ymlファイル

docker-compose.yml
version: "3.7"
services:
  db:
    image: mysql:8.0
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: password # rootユーザのパスワード
      MYSQL_DATABASE: db_local # WordPress用データベース名
      MYSQL_USER: wp_user # WordPress用データベース接続ユーザ名
      MYSQL_PASSWORD: password # WordPress用データベース接続パスワード
  wordpress:
    build:
      context: .
      dockerfile: Dockerfile
    restart: always
    depends_on:
      - db
    ports:
      - 80:80
    environment:
      WORDPRESS_DB_HOST: db:3306 # データベースサーバ名：ポート番号
      WORDPRESS_DB_USER: wp_user # WordPress用データベース接続ユーザ名(dbの内容に合わせる)
      WORDPRESS_DB_PASSWORD: password # WordPress用データベース接続パスワード(dbの内容に合わせる)
      WORDPRESS_DB_NAME: db_local # WordPress用データベース名(dbの内容に合わせる)
      WORDPRESS_DEBUG: 1 # デバッグモードON
    volumes:
      - ./html:/var/www/html
  phpmyadmin:
    platform: linux/x86_64 # Mac対応
    image: phpmyadmin/phpmyadmin:latest
    restart: always
    environment:
      PMA_HOST: db # phpMyAdminが接続するMySQLデータベースのホストを指定
      MYSQL_ROOT_PASSWORD: password
      MEMORY_LIMIT: 128M
      UPLOAD_LIMIT: 100M
    depends_on:
      - db
    ports:
      - 8080:80
volumes:
    wordpress:
    db_data:
networks:
  mysite:
    driver: bridge

Dockerfileでwordpressのイメージをカスタマイズ（node.jsのインストール）

Dockerfile
# 公式のWordPressイメージを使用
FROM wordpress:latest

# Node.jsとnpmをインストール
RUN curl -sL https://deb.nodesource.com/setup_18.x | bash -
RUN apt-get update && apt-get install -y nodejs

起動

docker compose -d --build

Discussion