代码之家  ›  专栏  ›  技术社区  ›  Rachel

将Nginx与Create React App dev server和npm start一起使用

  •  0
  • Rachel  · 技术社区  · 5 年前

    令人沮丧的问题。我在一个服务器上创建了一个react项目,该服务器必须使用Nginx进行外部连接/HTML服务器。本质上我需要做的是使用nginx作为代理服务器,当URL被输入浏览器时,请求被路由到localhost:3000,react应用程序生成结果,并由nginx提供给客户端。

    这是到目前为止的nginx文件,但我无法让它工作。一些问题:

    1. 根指定是否需要指向react项目中的/public目录以获取索引。html?

    2. 假设你跑了 npm start 编译完成后,在浏览器中输入FQDN,它将路由到localhost:3000

    到目前为止,我的Nginx配置

        server_name         server-name.com;   
        listen              443 ssl;
        ssl_certificate     /etc/letsencrypt/live/site-name/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/site-name/privkey.pem;
        ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers         HIGH:!aNULL:!MD5;
    
        proxy_read_timeout 60s;
        client_max_body_size 64M;
        
        # should this be routed to /public in the react project to pick up index.html?
        # root /var/www/html;
    
        index index.html index.htm;
    
        location / {
            #try_files $uri $uri/ =404;
            
            # Make sure React Application return is index.html so client routing remains in sync/reachable        
            #try_files $uri /index.html;
       
            proxy_pass  http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }    
    
        location /_api {
           rewrite ^/_api/(.+) /$1 break;
            include uwsgi_params;
            uwsgi_pass 127.0.0.1:3030;
        }
    }
    
    server {
        server_name         server-name.com   
        listen              80;
    
        allow 10.0.0.0/16;
        deny all;
    
        proxy_read_timeout 60s;
        client_max_body_size 64M;
    
        # Should this be routed to /public in the react project to pick up index.html?
        # root /var/www/html;
    
        index index.html index.htm;
    
        location / {
            #try_files $uri $uri/ =404;
            
            # Make sure React Application return is index.html so client routing remains in sync/reachable        
            try_files $uri /index.html;
    
        }    
    
        location /_api {
            include uwsgi_params;
            uwsgi_pass 127.0.0.1:3030;
       }
    } 
    
    0 回复  |  直到 5 年前
        1
  •  0
  •   Sumit Kumar    5 年前

    打开你的nginx file vi sites enabled/default,如果你不知道怎么做,请告诉我。

    然后从该文件中删除所有内容并简单粘贴:

    server {
        listen 80;
        client_max_body_size 10M;
        server_name YourWebsiteNameWithDomain yourIPV4;
        location / {
            proxy_pass http://127.0.0.1:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
         }
    }
    

    别忘了重新启动nginx

    推荐文章