如何为预渲染 React App 配置 nginx？答案

【问题标题】：How configure nginx for prerender React App?如何为预渲染 React App 配置 nginx？
【发布时间】：2019-07-11 12:02:33
【问题描述】：

我有 React 应用程序。

它在本地机器上运行良好（app + prerender-spa-plugin）。我使用命令 http-server 将它运行到 ./build 包中

但是服务器上出现问题 - 就像我使用 serve-s 命令启动它一样。

服务器上有带有 nginx 镜像的 docker。

我尝试重新配置 nginx，使其对不同的 URL 使用不同的 index.html，但又失败了

路由到保存静态图像的目录有问题吗？

如何解决？或者我在哪里可以找到有关它的信息？

【问题讨论】：

标签： reactjs nginx prerender

【解决方案1】：

您必须在 nginx 服务器上创建虚拟主机并将其指向应用程序的构建文件夹。不要忘记运行npm run build。

简单的 nginx 配置

server {

    listen 80;
    listen [::]:80;

    root /var/www/reactjsapp/build;
    index index.html index.htm;

    server_name reactjsapp.com;

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

        location ~ /\.ht {
            deny all;
        }

}

【讨论】：

【解决方案2】：

我决定了。我的配置

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

来自官方文档：“可以通过在名称末尾指定斜杠来检查目录是否存在，例如“$uri/”。”

https://i.stack.imgur.com/PusBE.png

【讨论】：