使用 kubernetes 在 nginx 中部署 React js 构建目录

Question

在 Nginx 服务器中部署 React js（构建目录）静态文件。

使用 kubernetes，我正在运行 nginx 服务器来为静态文件的 React js“build”目录提供服务。我可以在浏览器中访问简单的 index.html。但不是带有 react js 代码的 index.html。根目录中有 index.html 文件、静态目录和其他文件。目录结构复制到此路径。

nginx.conf 如下所示

events {

    worker_connections  1024;

}

http {

    server {

        listen 80;

        root /usr/share/nginx/html;

    #index index.html;

        location / {

      index index.html; 

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

        }

    location /static/ { 

       autoindex on;

       root /usr/share/nginx/html/static/;

    }   

    }

}

在浏览器中，没有加载 index.html，但在源代码中（在浏览器中右键单击 > 选择源代码），可以使用 index.html 代码。从浏览器中的源复制的格式化 index.html 文件位于此路径中。我预测 javascript(css,js) 代码未执行或在浏览器中加载时出现问题。否则是nginx配置加载javascript文件有问题。

如何正确配置 nginx 以部署 Reactjs 构建目录文件？

Answer 1

下面的代码对我有用。server {    listen 80;    root /usr/share/nginx/html;    index index.html index.htm;    server_name xyz.application.com;    server_name localhost;     location / {     ssi on;    set $inc $request_uri;    if (!-f $request_filename) {        rewrite ^ /index.html last;    }    index index.html;        try_files $uri $uri/index.html /index.html =404;    }设置重写重定向到 index.html 页面。我不确定ssi的影响，在代码中设置$inc $request_uri。

Answer 2

try_files不会告诉nginx提供静态文件。在没有任何其他操作的情况下到达右大括号会导致它为静态文件提供服务。try_files 测试文件在本地文件系统中是否存在，并且可能会重写 URL。您的文件 ia 空格中有语法错误。记得为 nginx创建服务- 输入 LoadBalancer 并在部署配置文件中引用它。如果有多个服务器匹配请求的 IP 地址和端口，则必须添加服务器。这是您应该如何执行此过程的示例。确保您遵循教程中的每一步：nginx-configuration - 有 PHP 应用程序的练习示例，但使用 ReactJS 应用程序重现的步骤相同。您的 conf 文件应如下所示：events {    worker_connections  1024;}http {    server {        listen 80;        root /usr/share/nginx/html;        index index.html index.htm;        server_name your_server_name_or_IP        location / {             try_files $uri $uri/index.html /index.html;        }        location /static/ {             autoindex on;            root /usr/share/nginx/html/static/;        }      }}