More than 3 years have passed since last update.
サブドメインごとに別のアプリを雑にデプロイする
はじめに
あどかれ空いてたのでどこかに埋めるので、N日目です。
近畿のでかい大学でブロックチェーンとかWebとかやってるinatatsuです。
VPSとかで複数のアプリ同居させてサブドメインで区切りたいな～～～～脳死でできないかな～～～～～～～？？？？？？
Docker(compose)使えばできます。
デプロイするアプリ
WebApp A
雑にReact + Nginx構成ですね。
デモで仮公開するときとかbuildめんどくさいって時に雑にリバースプロキシでちゃちゃっと処理します。
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
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
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
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
version: "3"
services:
nginx:
image: nginx
ports:
- 83:80
volumes:
- ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
- ./build:/var/www
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の構成が登場します。
version: '3'
services:
nginx:
image: nginx
volumes:
- ./nginx:/etc/nginx/conf.d
ports:
- 80:80
でました。80番ポートの使い手です。
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挟んでもろて。
複数のアプリをデプロイするとポート番号被るのでポートずらさなきゃ～～～とか考えずにポートは繋がないでいいです。
おわりに
雑にサブドメイン切ってアプリをどんどん公開しよう。
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme