我有两个docker镜像,一个是为我的reaction应用程序构建的文件提供服务的a nginx,另一个是后端Express服务器,两者都在同一台机器上运行.我现在的问题是,我的前端应用程序使用Reaction路由来创建作为房间的前端路由.当我第一次通过Reaction-Routing useHistory API访问该路由时,它按预期工作.但我刷新后,我在ngix上找不到404.

这是我的nginx.conf文件.据我所知,当一个请求进入时,nginx会查找最长的匹配路径,在我的例子中,路由大约是HqHvNw.因此,nginx找到location /作为匹配的路由.并且因为它没有找到目录HqHvNw,所以它后退,并提供文件index.html' in /usr/share/nginx/html`.但目前,它没有像我预期的那样工作,它返回了404 Not Found.

http {
    server {
        listen 80;
        root  /usr/share/nginx/html;

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

            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain; charset=utf-8';
                add_header 'Content-Length' 0;
                return 204;
            }
            if ($request_method = 'POST') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            }
            if ($request_method = 'GET') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            }
        }
    }
}

我得到的日志(log)是这样的,为什么它不支持index.html文件?

2023/04/02 19:50:35 [error] 9#9: *1 open() "/usr/share/nginx/html/HqHvNw" failed (2: No such file or directory), client: xx.xxx.xx.xx, server: , request: "GET /HqHvNw HTTP/1.1", host: "yy.yy.y.yy"

我试过的东西:

  • 我已经将docker exec放入容器中,以确保所需的文件位于目录中.
  • 我甚至对整个html目录进行了chmod -R 777次判断,以确保不存在任何权限问题.

如果我误解了什么,请纠正我,任何建议也将不胜感激!谢谢!

编辑:这是我的前端dockerfile

FROM node:alpine as builder
WORKDIR /client
COPY package.json ./
COPY package-lock.json ./
COPY ./ ./
RUN npm install --force
RUN npm run build

FROM nginx:alpine

COPY ./.nginx/nginx.conf /etc/nginx/nginx.conf

## Remove default nginx index page
RUN rm -rf /usr/share/nginx/html/*

# Copy from the stage 1
COPY --from=builder /client/build /usr/share/nginx/html

RUN ls -la /usr/share/nginx/html

ENTRYPOINT ["nginx", "-g", "daemon off;"]

推荐答案

我不建议覆盖主nginx conf文件,除非您打算正确地这样做(您的文件遗漏了几个重要的指令,比如events).

相反,请提供/etc/nginx/conf.d/default.conf中的默认站点配置

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html; # ? this is all I added to the existing file
    }

    # etc...
}

您的Dockerfile还可以通过更好地利用层缓存进行更优化

FROM node:alpine as builder
WORKDIR /client

# Copy build files first
COPY package.json .
COPY package-lock.json .

# Install dependencies
RUN npm ci

# Copy source code
COPY . .

# Build
RUN npm run build

FROM nginx:alpine

COPY ./.nginx/nginx.conf /etc/nginx/conf.d/default.conf

# Copy from the stage 1
COPY --from=builder /client/build /usr/share/nginx/html

最后,不要忘记将文件设置为.dockerignore,以避免复制不必要的文件

.git/
build/
node_modules/
Dockerfile

Node.js相关问答推荐

我的位置也移动时左右拖动谷歌 map

带有apache Couch-db和Nano的推荐引擎:过滤特定用户的视图

关于Node.js中的AES加密库的问题

为什么我收到此错误:MissingSchemaError:架构尚未为模型&业务&注册

无法生成仅具有生产依赖项的 node 类型脚本项目

在函数上执行 toString 的Typescript 会产生奇怪的字符 (path_1, (0, Promise.writeFile))

我的 React + Express 应用程序不断向我的数组添加一个空对象

当API返回400状态代码时,使用Reactjs fetch获取错误消息

nyc 代码覆盖不适用于 NodeJs Express 服务器

Mongoose post中间件触发deleteMany

我正在try 在公共目录中使用 Express.js 项目部署 Angular 静态构建

MongoDB - 查找查询以判断是否存在少量字段,结合字段上的 AND

Electron 模板(Typescript + Webpack)中的这个 Electron Forge ERROR 是什么?

将 AllowDiskUse true 添加到 node.js 中的 MongoDB 聚合?

Winston http 日志(log)级别的行为与 info 不同

如何让我的 Next.js 应用在运行 ubuntu-latest 的 Azure 应用服务中启动?

Node JS:自动 Select `http.get`与`https.get`

如何使用 Puppeteer 从输入中删除现有文本?

使用 node.js 循环 JSON

在 Node.js 中混合使用 JavaScript 和 TypeScript