# vite with Nginx on docker
目次
# はじめに
UIからJIRAのAPIを叩いて情報を取得するプロダクトを作りたくて
ついでにviteを導入してみようかと思って試した結果を備忘録的に残してます。
詰まったポイントに関してはQiitaの記事に入れておいたのでこちらを参考に。
Docker環境でvite+Nginxを動作させた時に詰まったポイント
# 追加作業
Qiitaの記事の後に以下の作業をやっています。
詰まったポイントの話とずれるのでQiitaの記事からは外してます。
- Nginxの設定の読み込み先とviteのコマンドをdevとprodで分岐
- Nginxにaccesslog出力を追加
- JIRAのAPIを叩くために、/apiできた場合のProxy設定を追加
こちらのブログでは上記について軽く残しておきたいと思います。
# Nginxの設定の読み込み先とviteのコマンドをdevとprodで分岐
docker-compose.ymlを編集
↓↓↓before↓↓↓
version: "3"
services:
vite:
image: node:12.6.0
container_name: vite
working_dir: /var/local/app
volumes:
- .:/var/local/app:cached
environment:
- HOST=0.0.0.0
command: /bin/sh -c "yarn cache clean && yarn install && yarn dev"
proxy_nginx_vite:
image: nginx:1.19.1
volumes:
- ./config/nginx/dev.conf:/etc/nginx/nginx.conf:cached
- ./logs/nginx:/var/log/nginx:cached
container_name: proxy_nginx_vite
ports:
- 8080:80
depends_on:
- vite
↓↓↓after↓↓↓
version: "3"
services:
vite:
image: node:12.6.0
container_name: vite
working_dir: /var/local/app
volumes:
- .:/var/local/app:cached
environment:
- HOST=0.0.0.0
proxy_nginx_vite:
image: nginx:1.19.1
container_name: proxy_nginx_vite
ports:
- 8080:80
depends_on:
- vite
docker-compose.dev.ymlを新規作成
version: "3"
services:
vite:
command: /bin/sh -c "yarn cache clean && yarn install && yarn dev"
proxy_nginx_vite:
volumes:
- ./config/nginx/dev.conf:/etc/nginx/nginx.conf:cached
- ./logs/nginx:/var/log/nginx:cached
docker-compose.dev.ymlを読み込むようにコマンドを変更
// before
docker-compose -f docker-compose.yml up --build
// after
docker-compose -f docker-compose.yml -f docker-compose.dev.yml up --build
# Nginxにaccesslog出力を追加
Nginxのconfファイルにaccesslogの出力を追加。
error_log /var/log/nginx/error.log;
events{
}
http {
// ここから追加
access_log /var/log/nginx/access.log;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
gzip on;
gzip_http_version 1.0;
gzip_disable "msie6";
gzip_proxied any;
gzip_min_length 1024;
gzip_comp_level 6;
gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript application/json image/svg+xml;
// ここまでを追加
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
listen 80;
server_name localhost;
location / {
proxy_pass http://vite:3000/;
proxy_intercept_errors on;
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
}
# JIRAのAPIを叩くために、/apiできた場合のProxy設定を追加
server以下に/apiからのアクセスの場合の処理を追加。
なおjiraに関してはBasicAuthを利用する想定。
本来はクライント側から投げる想定だけど先に確認だけしたかったので一回nginx側の設定に直埋め込み。
このままgitとかにアップしたら死ぬので注意。
location /api/ {
proxy_set_header Authorization "Basic {passwordを入れる}";
proxy_pass https://xxx.atlassian.net/rest/api/3/search;
break;
}
# 参考
- WebSocket connection can not work inside Docker container
- Allow different frontend port
- feat(dev): add config for websocket connection
- NginxのリバースプロキシでWebソケットを通す際の設定
- Meteor WebSocket handshake error 400 with nginx
- Nginxを用いたWebSocketサーバのReverseProxy構成及びSSL/TLS接続
- github/azalea
- jira basic auth
- 【vite】 Vue3.0もReactも!ノーバンドルなビルドツール「vite」を試してみる
- 実践編ーDockerを使ってnginxでリバースプロキシを立ててみる