Vite React 在使用 Docker Nginx 时不起作用，抛出连接被拒绝的错误。

huangapple
go评论126阅读模式
英文:

Vite React not working with docker Nginx, throwing connection refused

问题

我正在尝试将我的应用程序放入容器中。目前，我正在使用React与Vite，Django后端和Nginx作为服务器。 Django部分正常工作，我能够通过Nginx发出请求并传递响应。 但是，当我尝试向Vite发出请求时，Nginx会抛出错误：2023/07/27 21:37:00 [error] 10#10: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.25.0.1, server: _, request: "GET / HTTP/1.1", upstream: "http://172.25.0.2:5137/", host: "localhost"。

我的docker-compose.yml：

  1. version: '3.8'
  3. services:
  4.   api:
  5.     container_name: api
  6.     build:
  7.       context: ./api
  8.       dockerfile: Dockerfile
  9.     expose:
  10.       - 8000
  11.     env_file:
  12.       - .env.dev
  14.   app:
  15.     container_name: app
  16.     build:
  17.       context: ./app
  18.       dockerfile: Dockerfile
  19.     expose:
  20.       - 5137
  22.   nginx:
  23.     container_name: server
  24.     image: nginx:latest
  25.     volumes:
  26.       - ./nginx/:/etc/nginx/conf.d/
  27.     command: "/bin/sh -c 'while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"
  28.     ports:
  29.       - "80:80"
  30.     depends_on:
  31.       - api
  32.       - app

我的vite.config.js：

  1. import { defineConfig } from 'vite';
  2. import react from '@vitejs/plugin-react';
  4. // https://vitejs.dev/config/
  5. export default defineConfig({
  6.     plugins: [react()],
  7.     server: {
  8.         watch: {
  9.             usePolling: true,
  10.         },
  11.         host: true,
  12.         strictPort: true,
  13.         port: 5173,
  14.     },
  15. });

我的Dockerfile：

  1. FROM node:latest
  3. WORKDIR /usr/src/app
  5. COPY package.json /usr/src/app/
  6. COPY package-lock.json /usr/src/app/
  7. RUN npm ci
  9. COPY . /usr/src/app/
  11. CMD ["npm", "run", "dev"]

我的nginx.conf：

  1. upstream api {
  2.     server api:8000;
  3. }
  5. upstream app {
  6.     server app:5137;
  7. }
  9. server {
  11.     server_name _;
  13.     listen 80;
  14.     listen [::]:80;
  16.     location /api/ {
  17.         proxy_pass http://api;
  18.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  19.         proxy_set_header Host $host;
  20.         proxy_redirect off;
  21.         client_max_body_size 25M;
  22.     }
  24.     location / {
  25.         proxy_pass http://app;
  26.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  27.         proxy_set_header Host $host;
  28.         proxy_redirect off;
  29.         client_max_body_size 25M;
  30.     }
  32. }

我尝试将Vite容器中的5137端口打开到容器网络外部，并尝试在浏览器中使用http://localhost:5137进行访问，但它没有起作用。

任何帮助将不胜感激。

英文:

I'm trying to put my application in containers. Currently, I'm using React with Vite, a Django Backend and an Nginx as the server. The Django part is working fine, I'm able to make requests through Nginx and deliver responses. But, when I try to make requests to Vite, Nginx throws the error: 2023/07/27 21:37:00 [error] 10#10: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.25.0.1, server: _, request: "GET / HTTP/1.1", upstream: "http://172.25.0.2:5137/", host: "localhost".

My docker-compose.yml:

  1. version: '3.8'
  3. services:
  4.   api:
  5.     container_name: api
  6.     build:
  7.       context: ./api
  8.       dockerfile: Dockerfile
  9.     expose:
  10.       - 8000
  11.     env_file:
  12.       - .env.dev
  14.   app:
  15.     container_name: app
  16.     build:
  17.       context: ./app
  18.       dockerfile: Dockerfile
  19.     expose:
  20.       - 5137
  22.   nginx:
  23.     container_name: server
  24.     image: nginx:latest
  25.     volumes:
  26.       - ./nginx/:/etc/nginx/conf.d/
  27.     command: "/bin/sh -c 'while :; do sleep 6h & wait $${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"
  28.     ports:
  29.       - "80:80"
  30.     depends_on:
  31.       - api
  32.       - app

My vite.config.js:

  1. import {defineConfig} from 'vite'
  2. import react from '@vitejs/plugin-react'
  4. // https://vitejs.dev/config/
  5. export default defineConfig({
  6.     plugins: [react()],
  7.     server: {
  8.         watch: {
  9.             usePolling: true,
  10.         },
  11.         host: true,
  12.         strictPort: true,
  13.         port: 5173,
  14.     }
  15. })

My Dockerfile:

  1. FROM node:latest
  3. WORKDIR /usr/src/app
  5. COPY package.json /usr/src/app/
  6. COPY package-lock.json /usr/src/app/
  7. RUN npm ci
  9. COPY . /usr/src/app/
  11. CMD ["npm", "run", "dev"]

My nginx.conf:

  1. upstream api {
  2.     server api:8000;
  3. }
  5. upstream app {
  6.     server app:5137;
  7. }
  9. server {
  11.     server_name _;
  13.     listen 80;
  14.     listen [::]:80;
  16.     location /api/ {
  17.         proxy_pass http://api;
  18.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  19.         proxy_set_header Host $host;
  20.         proxy_redirect off;
  21.         client_max_body_size 25M;
  22.     }
  24.     location / {
  25.         proxy_pass http://app;
  26.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  27.         proxy_set_header Host $host;
  28.         proxy_redirect off;
  29.         client_max_body_size 25M;
  30.     }
  32. }

I have tried to open the 5137 port in the Vite container to outside of the container network and access it in the browser with http://localhost:5137, but it didn't work.

Any help would be appreciated.

答案1

得分: 0

你的代码中指定了 5173 端口，但你暴露并查询的是 5137 端口。
请修改你的代码。

希望这有所帮助！

英文:

In your code you gave 5173 port , but you exposed and queried the 5137 port.
Change your code.

Hope that helps!

huangapple
  • 本文由 发表于 2023年7月28日 05:54:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/76783630.html
  • nginx
  • nginx-reverse-proxy
  • reactjs
  • vite
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定