Points bloqués lors de l'exécution de vite + Nginx dans l'environnement Docker
TL;DR Je voulais créer une configuration vite + Nginx sur Dokcer, Il y avait une partie du point qui était bloquée, je vais donc la laisser sous forme de mémoire.
De plus, puisque je triche en jouant directement avec la source de la bibliothèque, En gros, je pense qu'il est bon d'attendre la mise à jour officielle.
À propos de vite
Dépôt officiel vite est un outil de construction créé par l'auteur de Vue.js Evan You.
Vue-cli incluait divers outils de bundle, mais vite n'est pas nécessaire, donc Je pense que la meilleure caractéristique est que le serveur de développement fonctionne à grande vitesse. Très rapide.
Au fait, il semble que Rollup soit utilisé pour la construction.
Exécuter dans l'environnement Docker
Eh bien, je voudrais entrer dans le sujet principal de cette fois. Préparez-vous à créer un environnement Nginx + vite sur l'environnement Dokcer. On suppose que la communication est effectuée avec HOST (8080) => Nginx (80) => vite (3000).
- L'explication de la construction de l'environnement Docker lui-même est omise.
La structure finale du répertoire ressemble à ceci:
.
├── 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
Pour le moment, les fichiers de configuration docker-compose.yml et Nginx sont les suivants.
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;
}
}
}
Lancement de l'environnement Docker (1ère fois)
Après avoir préparé l'environnement, démarrez-le avec la commande suivante.
docker-compose -f docker-compose.yml up --build
À ce stade, l'erreur suivante s'affiche et ne s'affiche pas.
Comme il était nécessaire de configurer l'utilisation de WebSocket avec Nginx, modifiez le fichier de configuration Nginx dès que possible.
Correction de l'utilisation de la communication Websocket avec Nginx
Faites des corrections en vous référant à ce qui suit.
Paramètres lors du passage d'un socket Web avec le proxy inverse de Nginx
Ajoutez ce qui suit au fichier conf.
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;
Fichier de configuration Nginx à ce stade
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;
}
}
}
Lancement de l'environnement Docker (deuxième fois)
Maintenant, redémarrez dokcer.
docker-compose -f docker-compose.yml up --build
L'erreur précédente est résolue et l'affichage lui-même est affiché, mais la page s'actualise à plusieurs reprises. Quand je regarde la console, j'obtiens l'erreur suivante.
Cela semble être différent de l'erreur précédente, mais il semble également être lié à WebSocket.
Changer la direction de PORT pour la communication WebSocket de vite
Je me connecte au conteneur Docker depuis l'hôte sur le port 8080.
Puisque vite lui-même fonctionne sur le port 3000,
J'ai essayé d'aller voir localhost: 3000 par la communication WebSocket, mais je n'ai pas pu me connecter => Il semble qu'il a été rafraîchi à plusieurs reprises.
↓ A partir de là, responsabilité personnelle ↓
Modifier en jouant directement avec les fichiers de la bibliothèque
L'URL utilisée pour la communication Websocket est générée dans la 33ème ligne du fichier dans node_modules / vite / dist / client / client.ts, mais le PORT extrait ici est toujours de 3000. Il semble y avoir.
Puisque ISSUE se trouvait également dans le référentiel vite, j'essaierai de me connecter de force pour référence.
WebSocket connection can not work inside Docker container Partie correspondante du code dans le référentiel officiel
//Exécuter la commande dans le conteneur Docker
docker exec -it vite bash
//Installer sans vim
apt-get update
apt-get install vim
//Editez le fichier suivant
vi node_modules/vite/dist/client/client.js
// before
const socketUrl = `${socketProtocol}://${location.hostname}:${__PORT__}`;
↓ ↓ ↓ Passer à ce qui suit ↓ ↓ ↓
// after
//Spécifiez le numéro de PORT de la destination à voir depuis HOST
const socketUrl = `${socketProtocol}://${location.hostname}:8080`;
Lancement de l'environnement Docker (3ème fois)
Redémarrage de Mokkai
docker-compose -f docker-compose.yml up --build
Cela a fonctionné en toute sécurité sans rafraîchissement.
Que se passera-t-il dans le futur
Pour être honnête, il n'est pas préférable de le déplacer dans cet état.
Cependant, si vous regardez le PR suspendu à ISSUE plus tôt J'ai l'impression qu'une configuration pour WebSocket est susceptible d'être ajoutée.
feat(dev): add config for websocket connection
Je ne sais pas comment cela sera reflété, mais est-il probable que ce qui suit ressemblera à ceci? C'est une imagination.
js:vite.config.js
module.exports = {
socketPort: 8080
}
Conclusion
Je suis allé au point où ça marche pour le moment, Je pense qu'il est difficile de l'utiliser tel quel. Si vous n'avez pas de configuration comme celle-ci, ce genre de problème ne se produira pas.
Certains domaines sont encore en développement, il semble donc que nous devions consacrer beaucoup de temps et d'efforts.
Le démarrage du serveur local est rapide et très confortable pour les loisirs et l'utilisation personnelle, donc Si vous utilisez Vue, essayez-le!