在添加try_files指令后,nginx仅提供JS静态构建文件中的React HTML代码

xxslljrj  于 2023-02-15  发布在  Nginx
关注(0)|答案(1)|浏览(212)

我正在使用此多阶段构建Dockerfile构建React应用映像:

FROM node:13.12.0-alpine as build

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json ./
COPY package-lock.json ./

RUN npm config set @bit:registry https://node.bit.dev
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

COPY . ./

RUN npm run build

FROM nginx
COPY --from=build /app/build /usr/share/nginx/html

然后在port 3000上的容器中运行它。
除此之外,我还运行了一个nginx容器,其中包含下一个配置文件:

server {
    listen 80 default_server;
    listen [::]:80;

    server_name _;
    server_tokens off;

    return 301 https://$host$request_uri;

}

server {
    listen 443 default_server ssl http2;
    listen [::]:443 ssl http2;

    server_name domain.com;

    ssl_certificate /etc/letsencrypt/live/domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/domain.com/privkey.pem;

    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        proxy_pass http://xxx.xxx.xxx.xx:3000;
    }

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }

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

现在,当我尝试访问域名时,重定向似乎工作正常,但nginx似乎不能正确地提供文件。在JS静态主块文件中,我只得到html代码:

我想这一定是try_files指令的问题,因为如果我注解掉那一行,我可以看到第一页,而且,如果我没有使用nginx,打开防火墙中的端口3000,第一页又可以看到了。
有谁能用这种配置带我走正确的方向吗?谢谢

ssm49v7z

ssm49v7z1#

问题是我编写了try_files指令,用于将所有内容重定向到我的index.html,以便React可以处理在我的服务器上运行的nginx容器中的路由,而不是在我的React映像中通过多阶段构建构建的路由。一旦我在React容器中的配置文件中编写了该指令,并将其从nginx中删除,所有内容都开始正常工作。

相关问题