如何在数字海洋上部署create react应用程序?

本文介绍了如何在数字海洋上部署create react应用程序?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

任何人都请解释一下.

我为此感到困惑.我关注了这篇博文 www.davidmeents/blog/how-to-simply-deploy-a-react-app-on-digital-ocean/ 但是我所有的东西都得到了nginx的默认页面，或者在弄乱了配置后出现了404 not found错误.

I'm struggling with this.I followed this blogpost www.davidmeents/blog/how-to-simply-deploy-a-react-app-on-digital-ocean/ But all i got default page of nginx or now after some messing around with configuration i'm getting 404 not found error.

nginx内部有两个选区1)可用的站点2)启用了站点的站点 我不确定哪一个是相关的.

There are two floders inside nginx 1) sites-availble 2)sites-enabled I'm not sure which one is relevant here.

我的配置就是这样

server { listen 80; server_name 139.59.25.228; root /www/mywebsite/app/build; rewrite ^/(.*)/$ $1 permanent; location / { try_files $uri index.html; } }

谢谢-:)

推荐答案

它并不那么复杂，您只需要:

It's not so complicated, you just need to:

1/像往常一样启动您的react应用程序，可能是npm start，然后它将为您打开端口3000(或任何数字)

1/ Start your react application as usual, maybe npm start, then maybe it will open port 3000 for you (or any number)

2/端口80的配置nginx指向该localhost:3000(或您定义的端口):

2/ Config nginx for port 80 pointing to that localhost:3000 (or your defined port):

server { listen 80 default_server; server_name YOURDOMAIN.HERE; location / { #auth_basic "Restricted Content"; #auth_basic_user_file /home/your/basic/auth/passwd_file; proxy_pass localhost:3000; #or any port number here 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; } }

但是，为了保持npm start-端口3000服务器的本地主机始终处于活动状态，建议您使用pm2:

However, in order to keep the npm start - your localhost with port 3000 server always alive, I suggest you use pm2:

sudo npm install pm2 -g

然后，将目录(cd)更改为您的reactjs应用程序文件夹:(我假设您使用npm start来启动reactjs应用程序)

Then, change directory (cd) to your reactjs app folder: (I assume you use npm start for starting you reactjs app)

pm2 start npm -- start

(如果您使用某种npm run:start来启动应用，则应为:pm2 start npm -- run:start)

(if you use kind of npm run:start to start app, then it should be: pm2 start npm -- run:start)

此后，该命令将被pm2记住！

After that, this command will be remembered by pm2!

有用的pm2命令:

pm2 list all pm2 stop all pm2 start all pm2 delete 0

(使用delete 0从pm2 list中删除ID为0的第一个命令)

(use delete 0 to delete the first command from pm2 list with ID 0)