在Nginx上部署Create-React-App。
在Nginx上部署Create-React-App。
我尝试在Digital Ocean的Ubuntu 14.04和Nginx上部署我的create-react-app单页应用。根据静态服务器部署说明，当我运行serve -s build -p 4000时，它可以正常工作，但是应用程序在我关闭终端后立即停止。从create-react-app存储库的自述文件中，我不清楚如何使其像forever一样永久运行。\n如果不运行serve，我会得到Nginx的502 Bad Gateway错误。\nNginx配置\nserver {\n listen 80;\n server_name app.mydomain.com;\n root /srv/app-name;\n index index.html index.htm index.js;\n access_log /var/log/nginx/node-app.access.log;\n error_log /var/log/nginx/node-app.error.log;\n location ~* ^.+\\.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|html|htm|svg)$ {\n root /srv/app-name/build;\n }\n location / {\n proxy_pass http://127.0.0.1:4000;\n proxy_http_version 1.1;\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection \'upgrade\';\n proxy_set_header Access-Control-Allow-Origin *;\n proxy_set_header Host $host;\n proxy_cache_bypass $http_upgrade;\n }\n}\n
问题：如何在Nginx上部署Create-React-App（CRA）？
原因：
- 我正在将NextJS作为主应用程序托管在“/”路径上，并希望将CRA托管在“/admin”路径上。
- 为了实现这一目标，我采取了一些步骤。
解决方法：
1. 通过自定义的Express服务器来托管CRA。
2. 在package.json中更改“hostname”。
3. 在react-router中为“/admin”添加“basename”。
4. 定义以下反向代理配置：
location / {
proxy_pass http://localhost:3000;
}
location /admin {
proxy_pass http://localhost:3001;
}
location /admin/ {
proxy_pass http://localhost:3001/;
}
相关文章：
- [CRA Deployment](https://create-react-app.dev/docs/deployment)
- [React-Router](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string)
- [Multiple SPAs](https://chrysanthium.com/multiple-spa-paths-gateway)
- [Another StackOverflow question](https://stackoverflow.com/questions/54340240)
问题的出现原因：React和Create React App的一个重要优点是不需要运行Node服务器（或通过Nginx代理到Node服务器），可以直接提供静态文件。但是，在部署Create React App应用时，需要进行一些配置和设置。
解决方法：根据Create React App的部署文档，首先运行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进行部署，而不是使用不安全的HTTP在80端口上提供服务。如果获得证书的成本或过程成为问题，可以使用Certbot自动为Nginx提供免费的Let's Encrypt证书。
根据用户的问题反馈，location / { try_files $uri /index.html; }这段配置对问题有帮助。
文章整理完毕。