代理传递错误 404 Not Found nginx/1.25.3 with Docker 和 nginx conf template

Question

我知道这可能看起来像是重复的，但我尝试了许多不同的配置，但我就是无法让它工作！基本上这是我的设置。

nginx.conf.模板：

upstream backend {
    server localhost:5003;
}

server {
    listen       3000;
    server_name  localhost;

    root /usr/share/nginx/html;

    index index.html;

    location /api/ {
        proxy_pass http://localhost:5003/;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

注意反斜杠！其他答案说缺少这个，为什么我可能有问题，但我确保有反斜杠，我也尝试了不同的方法，所以在 /api/ 中使用反斜杠，但在 proxy_pass http://localhost:5003 中不使用反斜杠，等等。作品:( 我还更改了这个文件来硬编码一些东西，但之前它们是变量，所以这就是为什么它是一个模板配置文件。

我的dockerfile：

# Use the official Node.js runtime as the base image
FROM node:18.19 AS build

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install dependencies
RUN npm ci

# Copy the entire application code to the container
COPY . .

# Build the React app for production
RUN npm run build

FROM nginx:1.25.3-alpine

# Copy the built React app to Nginx's web server directory
COPY --from=build /usr/src/app/dist /usr/share/nginx/html

COPY nginx.conf.template /etc/nginx/templates/default.conf.template

# Start Nginx when the container runs
CMD ["nginx", "-g", "daemon off;"]

Docker 撰写文件：

services:
  frontend:
    container_name: frontend
    env_file: .env
    restart: always
    ports:
      - 3000:3000

我使用以下命令启动我的 docker 容器：

docker-compose up --build -d

还要验证一切是否良好，我会

docker exec frontend nginx -s reload

和

docker exec frontend nginx -T

查看正在使用的确切配置。

但是，当我尝试访问

localhost:3000/api/health

时，我得到了

404 Not Found
nginx/1.25.3

但是如果我用

npm run dev

（使用 VITE）启动前端，那么

localhost:3000/api/health

就会按预期工作！

这是我的工作 vite.config.js：

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react-swc";
import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return defineConfig({
    plugins: [
      react(),
      svgr({
        svgrOptions: {
          // svgr options
        },
      }),
    ],
    optimizeDeps: {
      exclude: ["js-big-decimal"],
    },
    test: {
      globals: true,
      environment: "jsdom",
    },
    server: {
      watch: {
        usePolling: true,
      },
      host: true,
      strictPort: true,
      port: env.FRONTEND_HTTP_PORT,
      proxy: {
        "/api": {
          target: env.BACKEND_SERVICE_URL,
          changeOrigin: true,
        },
      },
    },
  });
};

奇怪的是，它在我的暂存环境中运行得非常好！如果需要，我可以分享那里使用的确切配置，但我的本地配置现在已经偏离了，因为我已经破解了这种状态。虽然有效的暂存配置的一件事是我没有任何反斜杠，所以它是

location /api

并且 proxy_pass 末尾也没有反斜杠。

Answer 1

代替

proxy_pass http://localhost:5003

，考虑

http://frontend:3000

并在“docker-compose.yml”文件中将Nginx和前端设置在同一网络中。

但是，仅此配置不足以满足生产环境，需要额外的设置。我会使用 shell 脚本，例如 https://github.com/patternknife/docker-blue-green-runner 上的多星示例提供的脚本。一个很好的参考例子是https://github.com/hagopj13/node-express-boilerplate。