Как обслуживать сервер разработки Vite за обратным прокси-сервером Nginx
Я работаю над монорепозиторием Typescript, используя turborepo, который содержит несколько микросервисов (nextjs, expressjs, create-react-app).
каждый из этих микросервисов обслуживается в своем собственном PORT.
Чтобы сделать процесс разработки более плавным, мы решили добавить сервер Nginx (в образе docker), который будет собирать все порты от каждого микросервиса и резервировать их все под одним PORT.
Когда я попытался добавить Vite react app и поместить его за тот же сервер Nginx, это не сработало, потому что он пытается получить доступ к файлам в node_modules на моей локальной машине.
У кого-нибудь есть обходной путь?
Ниже пример моих конфигов:
Файл конфигурации Nginx:
upstream imgproxy {
server imgproxy:3000;
}
server {
listen 80;
location / {
return 301 https://$host:3000$request_uri;
}
}
server {
listen 443 ssl;
client_max_body_size 240M;
ssl_certificate cert/localhost3000.crt;
ssl_certificate_key cert/localhost3000.key;
location /api/v1/auth {
proxy_pass http://host.docker.internal:4001;
}
location /dashboard {
proxy_pass https://host.docker.internal:3001;
}
location /api/v1/blogs {
proxy_pass http://host.docker.internal:4010;
}
location / {
proxy_pass http://host.docker.internal:4200;
}
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
include h5bp/tls/policy_balanced.conf;
# Custom error pages
include h5bp/errors/custom_errors.conf;
# Include the basic h5bp config set
include h5bp/basic.conf;
}
Мой vite.conf.ts
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react-swc";
import fs from "fs";
import tsconfigPaths from "vite-tsconfig-paths";
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
return {
base: "/dashboard",
server: {
port: 3001,
https: {
cert: fs.readFileSync("../../nginx/cert/localhost3000.crt"),
key: fs.readFileSync("../../nginx/cert/localhost3000.key"),
},
},
plugins: [react(), tsconfigPaths()],
};
});
Ошибки Nginx:
2023/05/05 13:54:02 [error] 33#33: *2 open() "/etc/nginx/html/dashboard/node_modules/.vite/deps/react_jsx-dev-runtime.js" failed (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /dashboard/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=12d55949 HTTP/1.1", host: "localhost:3000", referrer: "https://localhost:3000/dashboard/src/index.tsx"
172.20.0.1 - - [05/May/2023:13:54:02 +0000] "GET /dashboard/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=12d55949 HTTP/1.1" 404 178 "https://localhost:3000/dashboard/src/index.tsx" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36" "-"
172.20.0.1 - - [05/May/2023:13:54:02 +0000] "GET /dashboard/@react-refresh HTTP/1.1" 200 3393 "https://localhost:3000/dashboard" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36" "-"
2023/05/05 13:54:03 [error] 33#33: *2 open() "/etc/nginx/html/dashboard/node_modules/.vite/deps/react.js" failed (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /dashboard/node_modules/.vite/deps/react.js?v=12d55949 HTTP/1.1", host: "localhost:3000", referrer: "https://localhost:3000/dashboard/src/index.tsx"
172.20.0.1 - - [05/May/2023:13:54:03 +0000] "GET /dashboard/node_modules/.vite/deps/react.js?v=12d55949 HTTP/1.1" 404 178 "https://localhost:3000/dashboard/src/index.tsx" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36" "-"
2023/05/05 13:54:03 [error] 35#35: *6 open() "/etc/nginx/html/dashboard/node_modules/.vite/deps/react-redux.js" failed (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /dashboard/node_modules/.vite/deps/react-redux.js?v=12d55949 HTTP/1.1", host: "localhost:3000", referrer: "https://localhost:3000/dashboard/src/index.tsx"
172.20.0.1 - - [05/May/2023:13:54:03 +0000] "GET /dashboard/node_modules/.vite/deps/react-redux.js?v=12d55949 HTTP/1.1" 404 178 "https://localhost:3000/dashboard/src/index.tsx" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36" "-"
172.20.0.1 - - [05/May/2023:13:54:03 +0000] "GET /dashboard/@fs/C:/Users/nader/Documents/devProjects/boilerplate/packages/browser/core-ui/DarkModeProvider/index.tsx HTTP/1.1" 200 2026 "https://localhost:3000/dashboard/src/index.tsx" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36" "-"
Привет, Зак, спасибо за ваш вопрос, я не пытаюсь обслуживать сборку продукта, я только перенаправляю порт разработки с localhost: 3001/dashboard на localhost: 3000/dashboard для более удобной разработки.
Ответы 2
На первый взгляд кажется, что приложение реакции, которое вы пытаетесь развернуть, не было должным образом докеризовано. Даже если вы пытаетесь только перенаправить порт разработки, вам все равно понадобится файл докеры, чтобы иметь все необходимые шаги по настройке приложения реакции, такие как «установка npm» или «установка пряжи» и т. д. Если все ясно, умный Решением для его решения было бы создание тома внутри контейнера nginx и предоставление ему необходимых файлов извне контейнера по тому же пути, как этот, если внутри файла компоновки докера:
volume:
- react_app/node_modules : /etc/nginx/html/dashboard/node_modules
Я предполагаю, что вы открыли порт контейнера Nginx 80 для порта хоста докера 3000, поэтому запросы к прокси поступают на localhost:3000. Таким образом, запросы к localhost:3000 являются проксированными запросами.
Скорее всего, ваш файл конфигурации не был получен Nginx, поэтому он не обнаруживает конфигурацию обратного прокси-сервера и пытается прочитать файл из своего каталога статического содержимого.
Если он обнаружил конфигурацию прокси-сервера и по какой-то причине целевое приложение не работает или недоступно, вы увидите ошибку 502, как показано ниже, вместо 404
172.17.0.1 - - [13/May/2023:19:43:13 +0000] "GET /foo/hello HTTP/1.1" 502 497 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36" "-"
Вы можете проверить это, обратившись к URL-адресу прокси-сервера после закрытия вашего реагирующего приложения. Если Nginx по-прежнему регистрирует 404 вместо 502, он не обнаружил настройки прокси-сервера.
Кроме того, для работы путь контекста местоположения должен заканчиваться косой чертой, как показано ниже.
location /foo/ {
proxy_pass http://Lan-IP-Of-Docker-Host:8080/;
}
Кроме того, я не уверен, что установлено для host.docker.internal, если вы используете контейнер на локальном хосте, проверьте, есть ли в вашем файле hosts запись, сделанная докером для host.docker.internal, сопоставленная с 127.0.0.1
Файл хоста Windows 10: C:\Windows\System32\drivers\etc\hosts
Файл хостов Linux: /etc/hosts
Если установлено значение 127.0.0.1, то прокси не будет корректно пересылать запрос, так как он будет разрешаться на петлевой адрес внутри самого контейнера. Вы можете сначала протестировать эту конфигурацию, заменив host.docker.internal имя хоста на IP-адрес локальной сети хоста Docker. Для меня это мой локальный адрес в локальной сети, например 10.0.1.x
Наконец, я создал простой Dockerfile для Nginx и протестировал прокси, изменив default.conf файл, см. код ниже. Попробуйте запустить прокси с этой конфигурацией, чтобы увидеть, работает ли это.
Докерфи
FROM nginx:1.23.4
COPY default.conf /etc/nginx/conf.d/default.conf
default.conf
server {
listen 80;
listen [::]:80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
# REVERSE PROXY SETTING, Context path ends with forward slash
location /foo/ {
proxy_pass http://Lan-IP-Of-Docker-Host:8080/;
}
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
Команды сборки, запуска и остановки Docker
docker build -t test-nginx ./
//Container will be removed after its stopped because of --rm
docker run --rm --name test-nginx -p 3000:80 test-nginx
//Stops immediately
docker stop test-nginx -t 0
Есть ли причина, по которой вы не пытаетесь обслуживать производственную сборку vite?