【日常记录-JS】多个react打包的dist目录如何同时放到一个nginx上生效

Author：赵志乾
Date：2024-08-26
Declaration：All Right Reserved！！！

1. 简介

        多个React打包的dist目录同时放到一个Nginx服务器上并使其生效，需要通过Nginx的配置文件来区分不同的项目，并确保它们能够分别被正确地访问。这通常可通过定义不同的server块或在同一个server块内使用不同的location块来实现。

2. 使用不同的server块

        若Nginx服务器有多个域名或子域名指向它，则可以为每个React应用配置一个独立的server块，每个块监听不同的域名或端口。

# 第一个React应用的配置  
server {  
    listen 80;  
    server_name app1.example.com;  
  
    location / {  
        root /path/to/react-app1/dist;  
        index index.html index.htm;  
        try_files $uri $uri/ /index.html;  
    }  
}  
  
# 第二个React应用的配置  
server {  
    listen 80;  
    server_name app2.example.com;  
  
    location / {  
        root /path/to/react-app2/dist;  
        index index.html index.htm;  
        try_files $uri $uri/ /index.html;  
    }  
}

3. 使用同server块下的不同location块

        若所有的React应用都使用相同的域名，但拥有不同的路径前缀，则可以在同一个server块内配置多个location块。

server {  
    listen 80;  
    server_name example.com;  
  
    # 第一个React应用  
    location /app1/ {  
        alias /path/to/react-app1/dist/; # 注意这里使用alias而非root，因为路径中有/app1/  
        try_files $uri $uri/ /app1/index.html; # 确保index.html的路径也更新  
    }  
  
    # 第二个React应用  
    location /app2/ {  
        alias /path/to/react-app2/dist/;  
        try_files $uri $uri/ /app2/index.html;  
    }  
  
    # 其他配置...  
}

        注意：在使用alias时，需要注意Nginx解析路径的原理。alias指定的路径是相对于location中指定的URI前缀，如上面示例中的/app1/index.html实际会被Nginx解析为/path/to/react-app1/dist/index.html。