サブドメインごとに別のアプリを雑にデプロイする

はじめに

あどかれ空いてたのでどこかに埋めるので、N日目です。

近畿のでかい大学でブロックチェーンとかWebとかやってるinatatsuです。

VPSとかで複数のアプリ同居させてサブドメインで区切りたいな～～～～脳死でできないかな～～～～～～～？？？？？？

Docker(compose)使えばできます。

デプロイするアプリ

WebApp A

雑にReact + Nginx構成ですね。

デモで仮公開するときとかbuildめんどくさいって時に雑にリバースプロキシでちゃちゃっと処理します。

docker-compose.yml

version: "3"

services:
  front:
    image: node:16
    working_dir: /app
    volumes:
      - ./front:/app
    command: yarn start

  nginx:
    image: nginx
    ports:
      - 81:80
    volumes:
      - ./docker/nginx:/etc/nginx/conf.d

default.conf

server {
    listen 80;
    location / {
        proxy_pass http://front:3000;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

WebApp B

サーバーサイドとかdbとか含めたやつ。フロントはVueだね。buildしてもろて。。。
あ、リバースプロキシとCORSの記事書いてるので。おなしゃす。

https://qiita.com/inatatsu_csg/items/fb9438fab50cb718285b

docker-compose.yml

version: "3"

services:
  # FRONT END
  front:
    image: node:14
    working_dir: /app
    volumes:
      - ./src/front:/app
    command: npm run serve
    environment:
      TZ: "Asia/Tokyo"

  nginx:
    image: nginx
    ports:
      - 82:80
    volumes:
      - ./docker/nginx:/etc/nginx/conf.d


# BACK END
  server:
    image: node:14
    volumes:
      - ./src/server:/app
    working_dir: /app
    command: npm start

  db:
    image: mysql:5.7
    environment:
      TZ: "Asia/Tokyo"
      MYSQL_ROOT_PASSWORD: docker
      MYSQL_USER: docker
      MYSQL_PASSWORD: docker
    volumes:
      - ./docker/db:/docker-entrypoint-initdb.d
      - ./db:/var/lib/mysql
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci

default.conf

server {
    listen 80;
    

    location / {
        proxy_pass http://front:8080;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /api/ {
        proxy_pass http://server:3000;
        proxy_set_header Host $host:$server_port;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

WebApp C

やっとbuildしたかおまえ

buildしたファイルのリロード時のこととか書いてるので。おなしゃす。

https://qiita.com/inatatsu_csg/items/86586a9c808479260751

docker-compose.yml

version: "3"

services:

  nginx:
    image: nginx
    ports:
      - 83:80
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./build:/var/www

default.conf

server {
    listen 80;
    location / {
      root   /var/www;
      index  index.html index.htm;
      try_files $uri /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

役者は出揃った

デプロイするサブドメインを決めよう。(架空のURLです)

WebApp A : demo[.]hoge.com
webApp B : dev[.]hoge.com
webApp C : www[.]hoge.com

こんな感じでデプロイしましょうか

デプロイする

とりあえず3つのWebアプリケーションをdocker-composeであげます。
でもまあこれじゃサブドメインでうんぬんかんぬんはできてませんし、ポートが81~83ですね。

ここで第4の構成が登場します。

docker-compose.yml

version: '3'
services:
  nginx:
    image: nginx
    volumes:
      - ./nginx:/etc/nginx/conf.d
    ports:
      - 80:80

でました。80番ポートの使い手です。

default.conf

server {
  listen 80;

  server_name www.hoge.com;
  location / {
    proxy_pass http://www.hoge.com:83;
    proxy_set_header X-Forwarded-Host $server_name;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

server {
  listen 80;
  server_name dev.hoge.com;
  location / {
    proxy_pass http://dev.hoge.com:82;
    proxy_set_header Host $host:$server_port;
    proxy_set_header X-Forwarded-Host $server_name;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

server {
  listen 80;
  server_name demo.hoge.com;
  location / {
    proxy_pass http://demo.hoge.com:81;
    proxy_set_header Host $host:$server_port;
    proxy_set_header X-Forwarded-Host $server_name;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

こんな感じです。

サブドメインでのアクセスをそれぞれのnginxのポートへと飛ばします。

nginx -> nginx -> application container

って感じです。

本記事でやったこと

• リバースプロキシでCORS回避(別記事)
• SPAの404回避(別記事)
• nginxの2段構成(本記事)

開発環境から変わりうること

nginxのポート

デプロイするアプリで80番つかっちゃうと振り分けnginxが80使えないのでホスト側は80じゃないのにします。コンテナ側は80のままです。
443は勝手にやってくれ

開発アプリのポート

http://front:8080こんな感じでリバースプロキシするとdockerのネットワークでうまいことやってくれるのでホストとポートを繋がなくていいです。
開発中からCORS気にするならはじめからnginx挟んでもろて。
複数のアプリをデプロイするとポート番号被るのでポートずらさなきゃ～～～とか考えずにポートは繋がないでいいです。

おわりに

雑にサブドメイン切ってアプリをどんどん公開しよう。