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

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

近畿のでかい大学でブロックチェーンとかWebとかやってる[inatatsu](https://twitter.com/_inatatsu_csg_)です。

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挟んでもろて。
複数のアプリをデプロイするとポート番号被るのでポートずらさなきゃ～～～とか考えずにポートは繋がないでいいです。

# おわりに

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