More than 3 years have passed since last update.

Nginxでドメイン名によってアクセスを振り分けてみた

Posted at 2021-05-12

はじめに

以下記事をほぼほぼ参考に試してみた備忘録です。
https://qiita.com/South_/items/7bdb1f373410cb1c907b

jwilder/nginx-proxy っていうimageのnginxをプロキシとして使うとヘッダーで設定したホスト名でアクセスを割り振ってくれる。

ディレクトリ構成

$ tree
.
├── docker-compose.yml
├── web
│   └── index.html
├── web2
│   └── index.html
└── web3
    └── index.html

docker-compose.yml

$ cat docker-compose.yml 
version: '3'

services:
  nginx-proxy:
    image: jwilder/nginx-proxy
    ports:
      - 80:80
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro

  web:
    image: nginx
    environment:
      - VIRTUAL_HOST=web.localhost
    volumes:
      - ./web:/usr/share/nginx/html

  web2:
    image: nginx
    environment:
      - VIRTUAL_HOST=web2.localhost
    volumes:
      - ./web2:/usr/share/nginx/html

  web3:
    image: nginx
    environment:
      - VIRTUAL_HOST=web3.localhost
    volumes:
      - ./web3:/usr/share/nginx/html

htmlファイルを用意

webコンテナ

<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>webコンテナのページ</title>
  </head>
  <body>
    <h1>webコンテナのページ</h1>
  </body>
</html>

web2コンテナ

<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>web2コンテナのページ</title>
  </head>
  <body>
    <h1>web2コンテナのページ</h1>
  </body>
</html>

web3コンテナ

<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>web3コンテナのページ</title>
  </head>
  <body>
    <h1>web3コンテナのページ</h1>
  </body>
</html>

docker-compose実行

$ docker-compose up -d
Creating nginx_reverse_proxy_as_multidomainserver_web_1         ... done
Creating nginx_reverse_proxy_as_multidomainserver_web3_1        ... done
Creating nginx_reverse_proxy_as_multidomainserver_web2_1        ... done
Creating nginx_reverse_proxy_as_multidomainserver_nginx-proxy_1 ... done

動作検証

$ curl -H 'Host:web.localhost' 0.0.0.0
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>webコンテナのページ</title>
  </head>
  <body>
    <h1>webコンテナのページ</h1>
  </body>
</html>

$ curl -H 'Host:web2.localhost' 0.0.0.0
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>web2コンテナのページ</title>
  </head>
  <body>
    <h1>web2コンテナのページ</h1>
  </body>
</html>

$ curl -H 'Host:web3.localhost' 0.0.0.0
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>web3コンテナのページ</title>
  </head>
  <body>
    <h1>web3コンテナのページ</h1>
  </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up