SPA 構成でフロントとAPIサーバー、どちらもホットリロードできる開発環境をつくる
https://gyazo.com/f0bc43f70436ab4ecf8782d2611e5613
やりたいこと
ホットリロード: コードを変更したら即座に反映される
フロント (Vue.js) のコードをホットリロードしながら開発できるように
APIサーバー(Go) のコードをホットリロードしながら開発できるように
フロント
Vue CLI とかでセットアップすればホットリロードの環境が手に入る
ソースを変更すると即座にコンパイルが走る
コンパイルが終わるとブラウザ側にも変更が適応される(リロード不要)
開発サーバーだと WebSocket で変更を通知してるっぽい
フロントのコードは Mac の Docker で動かすと遅いのでローカルで動かす
サーバー
HotReload が効くAPIサーバーを用意
Go であれば fresh みたいなツールを入れると検知 → コンパイル → 再実行してくれる
Front のコードを検知しないよう要設定
こっちは Docker にいれといてもよさそう
中間ファイルが少ないからIOのレイテンシが少ない?
Nginx
本番を想定して同じホストでフロントとサーバーを提供するため Nginx を挟む
ブラウザはこの Nginx を叩いて開発版ページへアクセス
サーバーと一緒に docker-compose に突っ込んどくと便利
フロント側は WebSocket も通るようにプロキシする
host.docker.internal というホスト名で docker-compose の中から docker-compose を動かしているホストへアクセスできる
code:nginx.conf
upstream api {
server api:8000;
}
upstream front {
server host.docker.internal:8080;
}
server {
listen 80;
access_log /dev/stdout;
error_log /dev/stderr warn;
root /opt/shared/www/;
sendfile on;
tcp_nopush on;
keepalive_timeout 120;
client_max_body_size 30m;
location /api {
proxy_http_version 1.1;
proxy_set_header Connection "";
proxy_redirect off;
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location / {
try_files $uri @front;
}
location @front {
proxy_http_version 1.1;
proxy_set_header Connection "";
proxy_redirect off;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
docker-compose とフロントの DevServer 立ち上げれば見れるようになった
果たしてこれが最適解なのだろうか…