使用Nginx和Create-React-App开发服务器并启动npm

瑞秋

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

因此,到目前为止,这里是nginx文件,但是我无法使其正常工作。一些问题:

  1. 根名称是否需要定向到react项目中的/ public目录以获取index.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;
   }
} 
苏米特·库马尔

如果您不知道该怎么做,请打开vi启用站点/默认设置的nginx文件。

然后从该文件中删除所有内容,只需粘贴:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

React App无法使用npm start启动服务器

Create-react-app:服务器(npm 启动脚本)是什么?

React App:使用React服务器启动API服务器

开发服务器的create-react-app和url基本路径

Create-react-app:如何定义开发服务器的上下文路径

create-react-app的开发服务器不会自动刷新

在docker容器内部运行带有create-react-app的开发服务器

React Build工具和开发服务器

用create-react-app启动启动纱线时,服务器的文档根目录在哪里?

create-react-app 的开发服务器在遇到 ESLINT 检测到的错误时停止自动刷新

没有XSS问题的create-react-app服务器+节点服务器?

React 服务器未在 docker 中启动并在消息正在启动开发服务器后退出

create-react-app和节点服务器的ECONNREFUSED错误

我可以在Webpack开发服务器中使用相对路径-React JS

如何使用React Router dom v4配置Webpack开发服务器?

使用一个NPM命令启动react-create-app和Electron.js

npm create-react-app启动错误

React Native-无法启动,因为其他WebSocket服务器已经在使用HTTP服务器

如何使用Create-React-App的节点服务器定义MIME类型?

如何运行使用npm启动服务器的网站

使用npm start启动2服务器

如何使用NPM脚本在package.json中启动运行/启动json服务器和实时服务器?

我是否需要每次都运行 react-native run-android 才能在我的物理设备上运行?我可以使用 react-native start 只启动开发服务器吗

如何在Ubuntu服务器上使用create-react-app使用Webpack / React配置Django

由于elifecycle错误代码,Node和React无法启动服务器

带有后端node.js服务器的create-react-app与未设置node.js服务器的create-react-app之间的区别

如何使用 shell 脚本文件启动 fastapi、react、节点服务器

将dockerized Nginx上提供的React App连接到Express服务器

使用 React 和 Rails 运行服务器的问题