在 Nginx 上部署 Create-React-App

Question

我正在尝试使用 Ubuntu 14.04 和 Nginx 在 Digital Ocean droplet 上部署我的 create-react-app SPA。根据静态服务器 deployment instructions, I can get it working when I run serve -s build -p 4000, but the app comes down as soon as I close the terminal. It is not clear to me from the create-react-app repo readme how to keep it running forever, similar to something like forever。

没有运行 serve，我得到 Nginx 的 502 Bad Gateway 错误。

Nginx 大会

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 代理）的开销；您可以直接提供静态文件。

根据您链接到的 Deployment documentation，Create React App 描述了要做什么：

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.

在您的情况下，运行 npm run build 创建 build/ 目录，然后使文件在 Nginx 可以访问的位置可用。您的构建可能最好在您的本地计算机上完成，然后您可以安全地将文件复制到您的服务器（通过 SCP、SFTP 等）。您可以可以运行 npm run 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 Encrypt 证书，如果成本或否则获取证书的过程会阻碍您。

Answer 2

我在 / 上将 NextJS 作为主要应用程序托管，并希望在 /admin 路线上托管 CRA。这是我所做的：

通过自定义快递服务器为 CRA 提供服务
在 package.json

hostname

将 basename 添加到 /admin 用于 react-router
定义以下代理传递：

location / {
  proxy_pass http://localhost:3000;
}
location /admin {
  proxy_pass http://localhost:3001;
}
location /admin/ {
  proxy_pass http://localhost:3001/;
}

在 Nginx 上部署 Create-React-App

Deploy Create-React-App on Nginx

deployment

nginx

create-react-app