Install the PM2 tool
it helps to run the react.js app in the background.
npm install pm2 -g
Create a new file with the name app.config.json below the build folder and add the following snippet.
nano app.config.json
{
apps : [
{
name : "react-app",
script : "npx",
interpreter: "none",
args: "serve -s build -p 3000"
}
]
}
I’m running my React app on a 3000 port you can change your port number
Run the following pm2 command which will start the app on your cloud instance ( i.e we are using AWS EC2).
pm2 start app.config.json
This command will you show the list of the pm2 running processes.
pm2 list
Nginx web server web conf.d file
Nginx configuration folder path
cd /etc/nginx/conf.d/
create your new configuration using nano with domain name
nano adminprafulbhuskutecom.conf
Copy following code and replace with your server file path and server name with your domain for (NON SSL)
upstream my_reactjs_upstream {
server localhost:3000;
keepalive 64;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
#add your path herer
root /home/ubuntu/prafulbhuskuteStageAdmin;
#server_name yourdomain.com
server_name stageadmin.prafulbhuskute.io;
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_max_temp_file_size 0;
proxy_pass http://my_reactjs_upstream/;
proxy_redirect off;
proxy_read_timeout 240s;
}
}
For SSL
upstream my_reactjs_upstream {
server localhost:3000;
keepalive 64;
}
server {
listen 80;
server_name stageadmin.prafulbhuskute.io;
return 301 https://stageadmin.prafulbhuskute.io$request_uri;
}
server {
listen 443;
server_name stageadmin.prafulbhuskute.io;
ssl on;
ssl_certificate /etc/nginx/ssl/bundle.crt;
ssl_certificate_key /etc/nginx/ssl/prafulbhuskute.key;
root /home/ubuntu/prafulbhuskuteAdmin;
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_max_temp_file_size 0;
proxy_pass http://my_reactjs_upstream/;
proxy_redirect off;
proxy_read_timeout 240s;
}
}
Now check nginx file error
nginx -t
now restart nginx using following command
sudo systemctl restart nginx
