React nginx配置,一个端口代理多个项目（转发后找不到CSS，JS及图片资源问题解决）

为了解决React项目部署在Nginx后找不到CSS、JS及图片资源的问题，你需要确保Nginx配置文件正确处理了静态资源。以下是一个基本的Nginx配置示例，用于部署多个React项目：

server {
    listen 80;
 
    server_name example.com;
 
    location / {
        root /path/to/your/projects/project1/build;
        try_files $uri /index.html;
    }
 
    location /project2/ {
        alias /path/to/your/projects/project2/build/;
        try_files $uri $uri/ /project2/index.html;
    }
 
    # 其他可能的location配置...
}

在这个配置中：

• 第一个location /块代理了第一个React项目。
• 第二个location /project2/ { ... }块代理了第二个React项目，并且通过alias指令正确设置了项目的路径。

确保每个React项目在构建时生成的静态资源位于build目录下，并且在Nginx中通过root或alias指令正确指向这些资源。

try_files $uri $uri/ /index.html;指令确保了对于任何请求，Nginx会首先尝试提供实际存在的文件，如果找不到，则回退到index.html文件，从而允许React的前端路由接管。

请根据你的实际项目路径和需求调整root或alias指令的路径。