如何使用 Nginx 从子路径为 React 提供服务

Question

我的设置是一个由 Gunicorn 和 Nginx 提供服务的 Django 应用程序。我一次添加 React 一页，因此我只需要从 React 提供特定页面。为了更容易使用 Nginx 进行路由，我决定让每个 React 路由都以 /v2/ 开头。

因此，Nginx conf 文件现在看起来像这样：

upstream backend_server {
    server backend:8000;
}

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name example.com *.example.com;
    deny 143.198.76.27;

    location /v2/ {
        alias /usr/share/nginx/html;
        try_files $uri /index.html;
    }

    location / {
        proxy_pass http://backend_server$request_uri;
        ....
    }
}

在 package.json 中，我添加了主页：

{
  "name": "frontend",
  "homepage": "/v2",
   ...
}

我还尝试调整我的 BrowserRouter 的 basename：

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter basename="/v2">
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

出于测试目的，我制定了 3 条路线：

function App() {
  return (
   <Routes>
     <Route path="/" element={<CounterPage/>}/>
     <Route path="/v2" element={<CounterPage/>}/>
     <Route path="/v2/test" element={<CounterPage/>}/>
   </Routes>
  );
}

我的 Docker 映像的 nginx 构建过程如下所示（并且文件已验证存在）：

FROM ghcr.io/digibrainllc/example/frontend:latest as build

# Create production build
RUN npm run build

# Production Nginx image with frontend build files
# to be served by Nginx
FROM nginx:1.21-alpine

# Copy the frontend build files over to the directory
# which Nginx serves from
COPY --from=build /frontend/build /usr/share/nginx/html

# Remove the default Nginx settings
RUN rm /etc/nginx/conf.d/default.conf
COPY /nginx/conf/nginx.prod.conf /etc/nginx/conf.d

example.com/v2：

404 未找到

我需要为 React 提供服务的所有 example.com/v2 路由，并将其余路由路由到 Django。

我怎样才能做到这一点？

Answer 1

好的，我成功了。为了更仔细地检查，我查看了 Nginx 日志：docker logs [nginx_id]。

在调试过程中，我删除了别名并向主服务器块添加了root。

然后 nginx 日志显示路径为 /usr/share/nginx/html/v2/ ，但未找到该文件。因此，我登录到 nginx 容器 docker exec -it [nginx_id] sh 并将构建文件从 /usr/share/nginx/html 复制到 /usr/共享/nginx/html/v2。这使得文件被发现......

所以更改是：

• 在 nginx 中添加根块
• 更改我的 Dockerfile 以将 frontend/build 文件复制到 usr/share/nginx/html /v2 代替。

Nginx.conf：

upstream backend_server {
    server backend:8000;
}

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name example.com *.example.com;
    deny 143.198.76.27;
    root /usr/share/nginx/html;

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

    location / {
        proxy_pass http://backend_server$request_uri;
        ....
    }
}

Nginx Dockerfile：

# Copy the frontend build files over to the directory
# which Nginx serves from
COPY --from=build /frontend/build /usr/share/nginx/html/v2

我知道这会很简单 XD