Docker 환경에서 vite + Nginx를 실행했을 때 막힌 포인트

TL;DR

vite + Nginx의 구성을 Dokcer에서 만들고 싶었습니다.
일부 막힌 포인트가 있었으므로 비망록적으로 남겨 둡니다.

또한 도서관의 소스를 직접 만나서 속이고 있기 때문에,
기본적으로 공식 업데이트를 기다리는 것이 길까 생각합니다.

vite 정보

공식 리포지토리
vite는 Vue.js의 저자 Evan You가 만든 빌드 도구입니다.

Vue-cli에서는 여러 번들 도구를 넣었지만 vite는 불필요하기 때문에,
dev 서버가 고속으로 동작하는 것이 제일의 특징이라고 생각합니다.
진짜로 빠르다.

덧붙여서 빌드에는 Rollup를 이용하고 있는 것 같습니다.

Docker 환경에서 이동

그런데 이번 본제에 들어가고 싶습니다.
Dokcer 환경에 Nginx+vite 환경을 구축할 준비를 합니다.
HOST(8080) => Nginx(80) => vite(3000)로 통신을 한다고 가정합니다.

※Docker 환경의 구축 그 자체의 설명은 생략합니다.

최종 디렉토리 구성은 다음과 같은 형태가 됩니다.

.
├── config
│   └── nginx
│       └── dev.conf
├── docker-compose.yml
├── index.html
├── logs
│   └── nginx
│       └── error.log
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── index.css
│   └── main.js
└── yarn.lock

현재 docker-compose.yml과 Nginx 설정 파일은 다음과 같습니다.

docker-compose.yml

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

dev.conf

error_log       /var/log/nginx/error.log;

events{
}

http {
    server {
        listen 80;
        server_name localhost;

        location / {
            proxy_pass http://vite:3000/;
            proxy_intercept_errors on;
        }
    }
}

Docker 환경 시작(1회째)

환경을 준비한 후 다음 명령으로 시작합니다.

docker-compose -f docker-compose.yml up --build

이 시점에서는 다음 오류가 표시되지 않습니다.



Nginx에서 WebSocket을 사용하려면 설정이 필요했기 때문에 빨리 Nginx conf 파일을 수정합니다.

Nginx에서 Websocket 통신을 사용하기위한 수정

다음 둘레를 참고로 수정합니다.

Nginx 리버스 프록시로 웹 소켓을 통과 할 때 설정

다음을 conf 파일에 추가합니다.

dev.conf

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

~~中略~~

proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade; 
proxy_set_header Connection $connection_upgrade;

이 시점의 Nginx conf 파일

dev.conf

error_log       /var/log/nginx/error.log;

events{
}

http {
    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;
        }
    }
}

Docker 환경 시작 (2 번째)

여기서 dokcer를 다시 시작합니다.

docker-compose -f docker-compose.yml up --build

이전의 에러는 해소되어 표시 자체는 됩니다만, 반복 페이지의 리프레쉬가 달립니다.
console을 보면 다음과 같은 오류가 발생합니다.



이전의 에러와는 다른 것 같습니다만 이것도 WebSocket 관련인 것 같습니다.

vite WebSocket 통신의 PORT 방향을 변경합니다.

호스트에서 포트 8080에서 Docker 컨테이너에 연결되어 있습니다.
vite 자체는 포트 3000에서 시작하고 있기 때문에,
WebSocket 통신으로 localhost:3000 를 보러 가려고 하지 않는다 => 반복적으로 리프레시 되고 있는 모양.

↓ 여기에서 먼저 자기 책임 ↓

라이브러리의 파일을 직접 Fucked 편집

node_modules/vite/dist/client/client.ts 내의 파일의 33행째로 Websocket 통신에 사용하는 URL을 생성하고 있습니다만, 여기에서 당겨 오는 PORT가 3000인 채로 두고 있는 것 같습니다.

vite의 리포지토리에도 ISSUE가 서 있었으므로 참고로 무리하게 연결되도록 해 봅니다.

WebSocket connection can not work inside Docker container
공식 리포지토리 코드의 해당 부분

// dockerコンテナ内でコマンドを実行
docker exec -it vite bash

// vimがなければインストール
apt-get update
apt-get install vim

// 以下のファイルを編集
vi node_modules/vite/dist/client/client.js

// before
const socketUrl = `${socketProtocol}://${location.hostname}:${__PORT__}`;
↓↓↓以下に変更↓↓↓
// after
// HOSTから見に行く先のPORT番号を具体的に指定
const socketUrl = `${socketProtocol}://${location.hostname}:8080`;

Docker 환경 시작 (3 번째)

엄청난 재부팅

docker-compose -f docker-compose.yml up --build

리프레시도 하지 않고 무사히 움직였습니다.

앞으로 어떻게 될 것인가?

솔직히 이 상태에서 움직이는 것은 바람직하지 않습니다.

단지 조금 전의 ISSUE에 매달려 있는 PR 보면
WebSocket용 config가 추가될 것 같은 기색을 느낍니다.

feat(dev): add config for websocket connection

어떻게 반영되는지 모르겠지만, 다음은 이런 느낌이 될까? 라는 상상입니다.

vite.config.js

module.exports = {
  socketPort: 8080
}

결론

우선 동작하면 지금까지 갔습니다만,
과연 이대로 사용해 가는 것은 엄격하다고 생각합니다.
이번과 같은 구성으로 하지 않으면 이런 문제는 발생하지 않습니다만,,,,.

아직 절찬 개발 중인 곳도 있으므로, 여러가지 수고를 하는 부분은 필요할 것 같습니다.

취미나 개인으로 사용하는 분에는 로컬에서의 서버 기동도 빠르고 매우 쾌적하므로,
Vue를 사용하는 사람들은 꼭 사용해보십시오!

참고

【Vite】 Vue3.0도 React도! 노 번들 빌드 도구 "Vite"를 사용해보십시오.

실천 편 - Docker를 사용하여 nginx에서 리버스 프록시를 세워보십시오.