In this tutorial we will configure a vps server using aws ec2 instance to run nodejs app along with nginx as a reverse proxy. Don’t get confused, it sounds complex but it’s just a straight forward process.
AWS EC2 vs Amazon Amplify or Heroku to host full stack react app
Note that this is also useful for those people who’re trying to run a react app with client and server nodes. However, this is not possible (or not easily possible atleast) with heroku, aws amplify, etc. They only host the frontend from the client/build folder for your react app.
A full stack react app has three components:
- An html / react output in /build/ folder
- A client server
- A Server server
Lets see how can we do this using EC2 or any other vps.
1. Create an EC2 instance (or any VPS from any web service)
First step is to create a new instance. This section explains how you can do it on aws. If you want to use any other service like digitalocean, google cloud console, or any other vps provider, then you can use it too.
To create an AWS EC2 instance for running your react app, follow this tutorial and then come back here to continue to next step:
Create AWS EC2 instance for hosting a react app
2. Open ports for your AWS EC2 instance
Once you’ve created this app, make sure that you open the inbound ports on both aws ec2 instance and also inside your virtual server, you can do this following this tutorial:
- Allow custom inbound ports on AWS EC2 instance
- Open incoming ports on your virtual server using ufw firewall
Note that we need ports such as:
- 80
- 443
- 3000
- 4000
You can choose the ports that you understand that you need too.
Once the virtual server on our AWS EC2 instance is set, now we can begin setting up the server for nginx and nodejs.
3. Setup Nginx on AWS EC2 to host React app, client & server
To configure nginx for running a react app, client & server, follow this tutorial:
Once configured, now you can run your react app successfully with both frontend and backend on a single aws ec2 instance running nginx.
4. Setting up database server
If you want to use mysql database for your app, you have 2 options:
- Install a mysql server on your ec2 instance virtual server and connect to it
- Use Amazon RDS service to create a mysql database and connect to it from your nodejs app backend as needed.
Please let me know if you need any help in setting up a server and deploy your react app with nodejs client and server backend.