Punkte, die beim Ausführen von vite + Nginx in der Docker-Umgebung hängen bleiben

TL;DR Ich wollte eine vite + Nginx-Konfiguration auf Dokcer erstellen. Es gab einen Teil des Punktes, der blockiert war, also werde ich ihn als Memorandum belassen.

Da ich betrüge, indem ich direkt mit der Quelle der Bibliothek spiele, Grundsätzlich finde ich es gut, auf das offizielle Update zu warten.

Über vite

Offizielles Repository vite ist ein Build-Tool, das vom Vue.j-Autor Evan You erstellt wurde.

Vue-cli enthielt verschiedene Bundle-Tools, aber vite ist nicht erforderlich Ich denke, das beste Feature ist, dass der Dev-Server mit hoher Geschwindigkeit läuft. Wirklich schnell.

Übrigens scheint Rollup für den Build verwendet zu werden.

In Docker-Umgebung ausführen

Nun, ich möchte auf das Hauptthema dieser Zeit eingehen. Bereiten Sie sich darauf vor, eine Nginx + vite-Umgebung in der Dokcer-Umgebung zu erstellen. Es wird angenommen, dass die Kommunikation mit HOST (8080) => Nginx (80) => vite (3000) erfolgt.

Die Erläuterung des Aufbaus der Docker-Umgebung selbst entfällt.

Die endgültige Verzeichnisstruktur sieht folgendermaßen aus:

.
├── 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

Im Moment lauten die Konfigurationsdateien docker-compose.yml und Nginx wie folgt.

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

Starten der Docker-Umgebung (1. Mal)

Starten Sie die Umgebung nach der Vorbereitung mit dem folgenden Befehl.

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

Zu diesem Zeitpunkt wird der folgende Fehler angezeigt und nicht angezeigt.

Da die Einrichtung von WebSocket mit Nginx eingerichtet werden musste, ändern Sie die Nginx-Konfigurationsdatei so bald wie möglich.

Fix für die Verwendung der Websocket-Kommunikation mit Nginx

Nehmen Sie die folgenden Korrekturen vor.

Einstellungen beim Übergeben eines Web-Sockets mit dem Reverse-Proxy von Nginx

Fügen Sie der conf-Datei Folgendes hinzu.

`dev.conf`


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

~~Unterlassung~~

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

Nginx conf-Datei an dieser Stelle

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

Starten der Docker-Umgebung (zweites Mal)

Starten Sie nun dokcer neu.

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

Der vorherige Fehler wurde behoben und die Anzeige selbst wird angezeigt, die Seite wird jedoch wiederholt aktualisiert. Wenn ich auf die Konsole schaue, erhalte ich den folgenden Fehler.

Es scheint sich vom vorherigen Fehler zu unterscheiden, aber es scheint auch mit WebSocket in Zusammenhang zu stehen.

Ändern Sie die Richtung von PORT für die WebSocket-Kommunikation von vite

Ich verbinde mich vom Host über Port 8080 mit dem Docker-Container. Da vite selbst auf Port 3000 läuft, Ich habe versucht, localhost: 3000 per WebSocket-Kommunikation aufzurufen, konnte aber keine Verbindung herstellen => Es scheint, dass es wiederholt aktualisiert wurde.

↓ Von hier an Selbstverantwortung ↓

Bearbeiten Sie, indem Sie direkt mit den Dateien in der Bibliothek spielen

Die für die Websocket-Kommunikation verwendete URL wird in der 33. Zeile der Datei in "node_modules / vite / dist / client / client.ts" generiert, aber der hier gezogene PORT ist immer noch 3000. Es scheint zu geben.

Da ISSUE auch im Vite-Repository stand, werde ich versuchen, eine Verbindung mit Gewalt als Referenz herzustellen.

WebSocket connection can not work inside Docker container Entsprechender Teil des Codes im offiziellen Repository

//Befehl im Docker-Container ausführen
docker exec -it vite bash

//Installiere ohne vim
apt-get update
apt-get install vim

//Bearbeiten Sie die folgende Datei
vi node_modules/vite/dist/client/client.js

// before
const socketUrl = `${socketProtocol}://${location.hostname}:${__PORT__}`;
↓ ↓ ↓ Wechseln Sie zu den folgenden ↓ ↓ ↓
// after
//Geben Sie die PORT-Nummer des Ziels an, das von HOST angezeigt werden soll
const socketUrl = `${socketProtocol}://${location.hostname}:8080`;

Starten der Docker-Umgebung (3. Mal)

Mokkai neu starten

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

スクリーンショット 2020-09-06 9.48.45.png

Es funktionierte sicher ohne Auffrischung.

Was wird in Zukunft passieren?

Um ehrlich zu sein, ist es nicht vorzuziehen, es in diesem Zustand zu bewegen.

Wenn Sie sich jedoch die PR ansehen, die früher bei ISSUE hängt Ich bin der Meinung, dass wahrscheinlich eine Konfiguration für WebSocket hinzugefügt wird.

feat(dev): add config for websocket connection

Ich weiß nicht, wie es sich widerspiegeln wird, aber ist es wahrscheinlich, dass das Folgende so aussieht? Es ist eine Einbildung.

`js:vite.config.js`


module.exports = {
  socketPort: 8080
}

Fazit

Ich ging zu dem Punkt, an dem es vorerst funktioniert, Ich denke, es ist schwierig, es so zu benutzen, wie es ist. Wenn Sie es nicht so konfigurieren, haben Sie kein solches Problem.

Es gibt noch einige Bereiche, die sich noch in der Entwicklung befinden. Es scheint also, dass wir viel Zeit und Mühe aufwenden müssen.

Der lokale Serverstart ist schnell und sehr komfortabel für Hobbys und den persönlichen Gebrauch Wenn Sie Vue verwenden, probieren Sie es bitte aus!