# 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;
}

# 参考