Question

我正在尝试使用Ubuntu 14.04和Nginx在Digital Ocean Droplet上部署我的create-react-app SPA。根据静态服务器deployment instructions，我可以在运行serve -s build -p 4000时使其正常工作，但是一旦我关闭终端，应用程序就会关闭。我不清楚create-react-app repo自述文件如何让它永远运行，类似forever之类的东西。

如果没有运行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代理它）的开销;你可以直接提供静态文件。

从您链接到的Deployment documentation，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 /图像等，并且对于所有其他URI，加载构建中的index.html文件，显示您的应用程序。

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

Answer 2

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

通过定制快递服务器提供CRA
在package.json中更改hostname
将basename添加到/admin中以用作反应路由器
定义以下代理密码：

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

Answer 3

是否必须仅在服务器块内而不是位置块内为react_app指定根路径。

在Nginx上部署Create-React-App

3 个答案: