为什么nginx不把我的react index.html作为后备

4c8rllxm  于 2023-04-05  发布在  Nginx
关注(0)|答案(1)|浏览(192)

我有两个docker镜像,一个是我的一个nginx服务我的react应用程序构建的文件,另一个是一个后端express服务器,都运行在同一台机器上。我现在的问题是我的前端应用程序使用react路由器创建前端路由作为房间。我第一次通过react-router useHistory API访问路由,它像预期的那样工作。但是在我刷新后,404找不到nginx
这是我的nginx.conf文件。据我所知,当一个请求进来时,nginx会查找最长的匹配路径,在我的例子中,路由类似于HqHvNw。所以nginx会找到location /作为匹配路由。因为它没有找到HqHvNw目录,所以它福尔斯,并提供文件index.html' in/usr/share/nginx/html`。但目前,它没有像我预期的那样工作,它返回404未找到。

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';
            }
        }
    }
}

我得到的日志是这样的,为什么它不提供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放入容器中,以确保所需的文件在目录中。
  • 我甚至chmod -R 777整个html目录,以确保它没有任何权限问题。

如有误解请指正,如有指教,不胜感激!谢谢!
编辑:这是我的前端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;"]
8e2ybdfx

8e2ybdfx1#

我不建议覆盖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

相关问题