在Nginx上部署Create-React-App

Question

我正在尝试create-react-app使用Ubuntu 14.04和Nginx在数字海洋液滴上部署我的SPA.根据静态服务器部署说明,我可以在运行时使其工作serve -s build -p 4000,但是一旦我关闭终端,应用程序就会关闭.从create-react-apprepo自述文件中我不清楚如何让它永远运行,类似于永远的事情.

没有运行serve,我得到Nginx的502 Bad Gateway错误.

Nginx Conf

server {
  listen 80;
  server_name app.mydomain.com;
  root /srv/app-name;
  index index.html index.htm index.js;
  access_log /var/log/nginx/node-app.access.log;
  error_log /var/log/nginx/node-app.error.log;
  location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|html|htm|svg)$ {
    root   /srv/app-name/build;
  }
  location / {
    proxy_pass http://127.0.0.1:4000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Access-Control-Allow-Origin *;
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

Answer 1

React(和Create React App)的主要好处之一是您不需要运行Node服务器(或使用Nginx代理它)的开销; 您可以直接提供静态文件.

从您链接到的部署文档中,Create React App描述了要执行的操作:

npm run build创建一个build包含应用程序生产版本的目录.设置您最喜欢的HTTP服务器,以便为您的站点的访问者提供服务index.html,并向静态路径的请求提供文件/static/js/main.<hash>.js内容/static/js/main.<hash>.js.

在您的情况下,运行npm run build以创建build/目录,然后在Nginx可以访问它们的位置使文件可用.您的构建可能最好在您的本地计算机上完成,然后您可以安全地将文件复制到您的服务器(通过SCP,SFTP等).您可以npm run build在您的服务器上运行,但如果您这样做,抵制直接服务该build/目录的诱惑,因为下次运行构建时,客户端可能会在您构建时收到一组不一致的资源.

无论您选择哪种构建方法,一旦您的build/目录在您的服务器上,然后检查其权限以确保Nginx可以读取文件并配置您的nginx.conf类似如下:

server {
  listen 80;
  server_name app.mydomain.com;
  root /srv/app-name;
  index index.html;
  # Other config you desire (TLS, logging, etc)...
  location / {
    try_files $uri /index.html;
  }
}

此配置基于您的文件/srv/app-name.简而言之,该try_files指令首先尝试加载CSS/JS/images等所有其他URI,index.html在您的构建中加载该文件,显示您的应用程序.

需要注意的是,您应该使用HTTPS/SSL进行部署,而不是使用端口80上的不安全 HTTP.Certbot为Nginx提供自动HTTPS,并提供免费的Let's加密证书,如果获得证书的成本或过程会阻止您.