Question

任何人都可以推荐最佳实践nginx配置在单个域上运行多个React应用程序吗？这些应用程序将在不同的根目录中提供。

所以app1和app2在www.domain.com上运行，并且服务为：

var t = "27:20"
var res = foo(t)
document.writeln(res);
function foo(st){
    var splittedSt = st.split(":")
    var days = parseInt(splittedSt[0] / 24) + " d";
    var hours = parseInt(splittedSt[0] % 24) + " h";
    var minutes = splittedSt[1] + " min";
    return days + " " + hours + " " + minutes
}

App1来自 / TMP1 / app1的

App2来自 / TMP2 / APP2

Answer 1

我不是反应应用程序的专家，但这里有一些简单的方法。

在这两种情况下，请确保您的应用程序了解它是从子文件夹提供的，因此您需要使用/app1/或/app2/为所有请求添加前缀。

选项1：

这个例子只是最简单的配置，它提供静态文件。

server {
  server_name www.domain.com;

  # Serve files for different applications from different paths

  # Matched location will automatically search files under /tmp1
  # For example request "GET /app1/index.html" returns file /tmp1/app1/index.html
  location /app1 {
    root /tmp1;
  }

  location /app2 {
    root /tmp2;
  }
}

您只需确保文件夹名称与请求中的子文件夹名称匹配。

选项2：

执行此操作的其他方法是将子文件夹后的请求与regex匹配并使用try_files。这样你的根文件夹路径可以是任何东西。

# Serve files from subfolders using regex
# This comes with additional bonus of matching all requests to the index.html which is usually prefered for react apps
server {
  server_name www.domain.com;

  # Now your root can be anywhere and it doesn't need to contain folder 'app1'
  location /app1/(.*) {
    root /tmp1/app1;
    try_files $1 index.html;
  }

  location /app2/(.*) {
    root /tmp2/app2;
    try_files $1 index.html;
  }
}

Answer 2

放置

rewrite ^/app1/(.*)$ /$1 break;

在

location /app1/ {

使用Nginx在单个域上运行多个React Apps

2 个答案:

选项1：

选项2：