时间戳

首页 > 解决方案 > Nginx 在为多个 React 应用程序提供服务时冲突静态文件

reactjs - Nginx 在为多个 React 应用程序提供服务时冲突静态文件

问题描述

我目前正在尝试使用 Nginx 设置多个 React Apps 项目。到目前为止，每当我遇到静态文件冲突时，我都会将一个文件夹中的所有内容复制到另一个文件夹中（是的，这是一个糟糕的解决方案，但到目前为止它仍然有效）。问题是现在我在同一台服务器上有多个项目，虽然以前的解决方案仍然可以工作，但很快就会一团糟。我查看了 Stack Overflow 和许多网站，我找到了一个看起来像我想要做的配置，但它无法正常工作。

这是我的 nginx.conf 文件：

#user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    server_names_hash_bucket_size 64;

    #gzip  on;

    index  index.html index.htm;

    map $http_referer $webroot {
        "/project1/main"            "/home/username/project1main/build";
        "/project1/admin"           "/home/username/project1admin/build";
        "/project2/main"            "/home/username/project2main/build";
        "/project2/admin"           "/home/username/project2admin/build";
    }

    include /etc/nginx/conf.d/*.conf;
}

这是我的 server.conf 文件：

server {
    listen    80;
    server_name gcloud-server;

    location /project1/main {
        alias      /home/username/project1main/build;
        try_files  $uri $uri/ /index.html =404;
    }
    location /project1/admin {
        alias      /home/username/project1admin/build;
        try_files  $uri $uri/ /index.html =404;
    }

    location /project2/main {
        alias      /home/username/project2main/build;
        try_files  $uri $uri/ /index.html =404;
    }
    location /project2/admin {
        alias      /home/username/project2admin/build;
        try_files  $uri $uri/ /index.html =404;
    }

    location /static {
        root       $webroot;
    }
}

有没有办法像这样解决这个问题？或者我是否坚持设置一个 /static 位置，我必须在其中复制每个项目的静态文件？

提前致谢。

标签： reactjsnginxdevops

解决方案

据我所知，alias指令是如何工作的，您遇到了以下问题。假设您有一个/project1/main/some/path/file请求：

    location /project1/main {
        alias      /home/username/project1main/build;
        # here our internal variables are:
        # $document_root = "/home/username/project1main/build"
        # $uri = "/project1/main/some/path/file"
        try_files  $uri $uri/ /index.html =404;
        # 1) try_files checks the existence of $document_root$uri physical file
        # this is "/home/username/project1main/build/project1/main/some/path/file"
        # which is absent
        # 2) try_files checks the existence of $document_root$uri/ directory
        # this is "/home/username/project1main/build/project1/main/some/path/file/"
        # which is absent
        # 3) you've got a 404 HTTP error
    }

root当您使用指令时，不会发生此问题，而是以alias这种方式工作。你能做的是

    # use regex location match and capture URI suffix in a $1 variable
    location ~ /project1/main(.*) {
        alias      /home/username/project1main/build;
        # here our internal variables are:
        # $document_root = "/home/username/project1main/build"
        # $uri = "/project1/main/some/path/file"
        # $1 = "/some/path/file"
        try_files  $1 $1/index.html =404;
        # checked file is $document_root$1
        # this is "/home/username/project1main/build/some/path/file"
        # request would be served if this file exists
    }

推荐阅读