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

Question

Anyone please explain it.

I'm struggling with this.I followed this blogpost https://www.davidmeents.com/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.

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

my config is like this

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

Thanks -:)

Answer 1

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

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

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 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;
    }
}

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

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

pm2 start npm -- start

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

After that, this command will be remembered by pm2 !

Useful pm2 commands:

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

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