如何在数字海洋上部署 create react app？

Question

谁来解释一下。

我正在努力 this.I 关注了这篇博文 https://www.davidmeents.com/blog/how-to-simply-deploy-a-react-app-on-digital-ocean/ 但是我得到的都是 nginx 的默认页面，或者现在在配置一些混乱之后我得到了 404 not found 错误。

nginx 中有两个 floders 1) sites-availble 2)sites-enabled 我不确定哪一个与这里相关。

我的配置是这样的

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

谢谢-:)

Answer 1

没那么复杂，你只需要：

1/ 像往常一样启动你的 React 应用程序，也许 npm start，然后它可能会为你打开端口 3000（或任何数字）

2/ 配置 nginx 端口 80 指向 localhost:3000（或您定义的端口）：

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 http://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 - 你的 localhost 和 3000 端口的服务器总是活跃的，我建议你使用 pm2:

sudo npm install pm2 -g

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

pm2 start npm -- start

（如果你使用npm run:start启动应用程序，那么它应该是：pm2 start npm -- run:start）

之后，这条命令会被pm2记住！

有用的 pm2 命令：

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

（使用 delete 0 删除 pm2 list 中 ID 为 0 的第一个命令）

如何在数字海洋上部署 create react app？

How to deploy create react app on digital ocean?

nginx

reactjs

digital-ocean