How to deploy React and Node app on AWS: A better approach
In one of my previous blog, How to quickly deploy React and Node app on AWS, I explained how we can quickly deploy our react app, node app and enable them to talk to each other. Essentially, it involved the following steps:
- Make a production build of your react app
- Put these files manually in the public folder of your node server
- Enable node.js to serve static files
- Setup node.js, postgres on the aws EC2 instance
- forward request to port 80 to node.js server
The above workflow works if you do not have to deploy regularly. We have to perform following steps manually every-time a change happens in the react app
- Building react app
- Copy react files to node.js public folder
- Deploy the node.js app
Let’s look at an alternative design and automate the whole deployment process.
New architecture
In this design, we would decouple our Node app and React app. We would introduce nginx to facilitate communication between react and node.
New Workflow
Deploy Node App
This is covered in my blog post: How to deploy Node.js app on AWS with GitLab
Deploy React App
This is very similar, rather much simpler than node deployment, as we do not have to ssh into the AWS EC2 instance.
As with node app deployment, we need to setup our .gitlab-ci.yml file. This file would exactly be the same as that of the node app except one change. We need to build our react app with npm run build at line 29
Now that we have the build of our react app, we need to move these files to a folder where nginx can read from. All the things would be similar to the node deployment except we would copy the files with scp instead of ssh at line 34
Configure Nginx
Now that we have code of both Node and React on our AWS box, we need a means through which they can talk to each other.
Let’s install Nginx on our Ubuntu box
sudo apt-get install nginx
Next, edit the location of the default page that Nginx will serve.
Edit this file /etc/nginx/sites-available/default , and add the following line of code inside the server block
location / {
root /home/ubuntu/myFrontApp/dist;
index index.html index.htm index.nginx-debian.html;
}
So our default page would be now index.html at /home/ubuntu/myFrontApp/dist location.
Suppose that react app makes a request to the node server with api path. Something like http://<ip>/api/user to get the list of all users. So we need to make sure that every route with /api should be redirected to node server.
In the /etc/nginx/sites-available/default file, we will add the following lines
location /api/ {
proxy_pass http://localhost:8000/;
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;
}
So the whole block looks like below in the nginx file
server {
listen 80 default_server;
listen [::]:80 default_server;
location / {
root /home/ubuntu/hssfrontend/dist;
index index.html index.htm index.nginx-debian.html;
}
server_name _;location /api/ {
proxy_pass http://localhost:8000/;
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;
}
}
Save this file and restart nginx server with sudo service nginx restart .
Once done, you are good to go!!
If you found this story interesting or useful, please support it by clapping it👏 .
