reactjs - 如何始终重定向到 Nginx Docker 中的 index.html？

Question

我正在使用 Docker 的 nginx:1.16.0-alpine 图像用于服务 react 应用程序(之前构建)，我想重定向到 index.html任何情况下的页面(在什么 URL 中)

nginx.conf 文件内容如下:

user  nginx; worker_processes  auto;

error_log  /var/log/nginx/error.log warn; pid       
/var/run/nginx.pid;

events {
    worker_connections  1024; }

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;

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

        location ~ ^/$ {
            rewrite  ^.*$  /index.html  last;
        }
    }
}

实际上添加了server部分，其他行都是默认的!

Dockerfile内容也如下:

FROM nginx:1.16.0-alpine

COPY ./build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

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

为确保从镜像构建容器并进入其中的 shell 后，文件 /etc/nginx/nginx.conf 具有上述内容。

但问题是:当我浏览 url http://localhost:3000/login (例如)，它不会重定向到 http://localhost:3000/index.html 。它显示:

404 Not Found nginx/1.16.0

(Docker 容器在输出端口 3000 和本地端口 80 上运行)

有谁知道为什么它不起作用!？
(我也搜索过类似的方法，但没有成功!)

更新:
本页React-router and nginx 没有解决问题。

Answer 1

注释下面一行

# include /etc/nginx/conf.d/*.conf;

为什么？由于线路

include /etc/nginx/conf.d/*.conf;

加载 default.conf 并忽略您的服务器配置。

此外，你需要在你的服务器中包含root信息(之前由default.conf提供)

---

如何重现

将以下2个文件放在同一个文件夹下执行

docker build -t test . && docker run --rm -p 8080:80 test

Dockerfile

FROM nginx:1.16.0-alpine

# COPY ./build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

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

nginx.conf

user nginx; worker_processes auto;

error_log /var/log/nginx/error.log warn; pid
/var/run/nginx.pid;

events { worker_connections 1024; }

http { include /etc/nginx/mime.types; default_type application/octet-stream;

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for"';

access_log  /var/log/nginx/access.log  main;

sendfile        on;
#tcp_nopush     on;

keepalive_timeout  65;

#gzip  on;

#include /etc/nginx/conf.d/*.conf;

    server {
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location ~ ^/$ {
        rewrite  ^.*$  /index.html  last;
    }
    listen       80;
    server_name  localhost;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
}