Points stuck when running vite + Nginx in Docker environment
TL;DR I wanted to create a vite + Nginx configuration on Dokcer, Since there were some points that were clogged, I will leave it as a memorandum.
In addition, since I am cheating by directly playing with the source of the library, Basically, I think it's good to wait for the official update.
About vite
Official repository vite is a build tool created by Vue.js author Evan You.
Vue-cli has various bundle tools, but vite is unnecessary, so I think the best feature is that the dev server runs at high speed. Really fast.
By the way, it seems that Rollup is used for the build.
Run in Docker environment
Well, I would like to get into the main subject of this time. Prepare to build Nginx + vite environment on Dokcer environment. It is assumed that communication is performed with HOST (8080) => Nginx (80) => vite (3000).
- The explanation of the construction of the Docker environment itself is omitted.
The final directory structure looks like this:
.
├── 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
At the moment, docker-compose.yml and Nginx configuration files are as follows.
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;
}
}
}
Launching Docker environment (1st time)
After preparing the environment, start it with the following command.
docker-compose -f docker-compose.yml up --build
At this point, the following error is displayed and it is not displayed.
Since it was necessary to set up to use WebSocket with Nginx, modify the Nginx conf file as soon as possible.
Fix for using Websocket communication with Nginx
Make corrections by referring to the following.
Settings when passing Websockets with Nginx reverse proxy
Add the following to the conf file.
dev.conf
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
~~Omission~~
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
Nginx conf file at this point
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;
}
}
}
Launching Docker environment (2nd time)
Now restart dokcer.
docker-compose -f docker-compose.yml up --build
The previous error is resolved and the display itself is displayed, but the page refreshes repeatedly. Looking at the console, I get the following error:
It seems to be different from the previous error, but this also seems to be related to WebSocket.
Change the direction of PORT of WebSocket communication of vite
I'm connecting to the Docker container from host on port 8080.
Since vite itself is running on port 3000,
I tried to go to see localhost: 3000 by WebSocket communication, but I couldn't connect => It seems that it was refreshed repeatedly.
↓ From here onward, self-responsibility ↓
Edit by directly playing with the files in the library
The URL used for Websocket communication is generated in the 33rd line of the file in node_modules / vite / dist / client / client.ts, but the PORT pulled here is still 3000. There seems to be.
Since ISSUE was also standing in the vite repository, I will try to connect by force for reference.
WebSocket connection can not work inside Docker container Corresponding part of the code in the official repository
//Execute command in docker container
docker exec -it vite bash
//Install without vim
apt-get update
apt-get install vim
//Edit the following file
vi node_modules/vite/dist/client/client.js
// before
const socketUrl = `${socketProtocol}://${location.hostname}:${__PORT__}`;
↓ ↓ ↓ Change to the following ↓ ↓ ↓
// after
//Specify the PORT number of the destination to see from HOST
const socketUrl = `${socketProtocol}://${location.hostname}:8080`;
Launching Docker environment (3rd time)
Mokkai restart
docker-compose -f docker-compose.yml up --build
It worked safely without refreshing.
What will happen in the future
To be honest, it is not preferable to move it in this state.
However, if you look at the PR hanging from ISSUE earlier I feel that config for WebSocket is likely to be added.
feat(dev): add config for websocket connection
I don't know how it will be reflected, but is it likely that the following will look like this? It is an imagination.
js:vite.config.js
module.exports = {
socketPort: 8080
}
Conclusion
I went to the point where it works for the time being, I think it is difficult to use it as it is. If you don't have a configuration like this one, this kind of problem won't occur.
There are still some areas that are still under development, so it seems that we need to spend a lot of time and effort.
For hobbies and personal use, the local server startup is quick and very comfortable, so If you are using Vue, please give it a try!
reference
-[Vite] Vue3.0 and React! Try the unbundled build tool "Vite" -Practice-Try to set up a reverse proxy with nginx using Docker
Recommended Posts