【Docker】Nginxを使ったローカル開発環境を構築する方法

Docker

2025.09.23

Webアプリケーションの開発では、実際のサーバー構成に近い形でローカル環境を構築できると便利です。DockerとNginxを組み合わせれば、軽量かつ柔軟な開発環境を簡単に用意できます。ここではNginxを使ったローカル開発環境の構築手順を紹介します。

前提条件
ディレクトリ構成
docker-compose.ymlの作成
Nginxの設定ファイル
HTMLファイルを配置
コンテナを起動する
動的言語との組み合わせ
まとめ

前提条件

– DockerとDocker Composeがインストール済みであること
– 基本的なLinuxコマンドやWebサーバーの知識があること

ディレクトリ構成

以下のようなシンプルな構成を想定します。

project/
├─ docker-compose.yml
├─ nginx/
│   └─ default.conf
└─ src/
    └─ index.html

docker-compose.ymlの作成

Nginxの公式イメージをベースに、ローカルのsrcディレクトリをコンテナ内にマウントします。

version: '3.9'

services:
  nginx:
    image: nginx:latest
    ports:
      - "8080:80"
    volumes:
      - ./src:/usr/share/nginx/html:ro
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro

Nginxの設定ファイル

default.confにNginxの設定を記述します。ここではシンプルに静的ファイルを配信する例を示します。

server {
  listen 80;
  server_name localhost;

  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ =404;
  }
}

HTMLファイルを配置

src/index.htmlを作成して動作確認用の内容を記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Docker + Nginx 開発環境</title>
</head>
<body>
  <h1>ローカル環境が動作しています！</h1>
</body>
</html>

コンテナを起動する

以下のコマンドを実行すると、Nginxコンテナが立ち上がります。

docker-compose up -d

ブラウザで http://localhost:8080 にアクセスし、作成したindex.htmlが表示されれば成功です。

動的言語との組み合わせ

Nginxは静的ファイル配信に適していますが、PHPやNode.jsなどと組み合わせたい場合は、別のサービスを追加してリバースプロキシとして利用します。例：Nginx＋PHP-FPMの連携。

services:
  nginx:
    image: nginx:latest
    ports:
      - "8080:80"
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
      - ./src:/var/www/html
    depends_on:
      - php

  php:
    image: php:8.1-fpm
    volumes:
      - ./src:/var/www/html