How to deploy ReactJS and NodeJS web application in AWS EC2 with Docker and Nginx

This is what we are building!

Git Repository for this Tutorial

https://github.com/khemsok/aws_deploy_tutorial.git

Deploying EC2 Instance

  1. Head on to https://aws.amazon.com/ and sign up for an AWS account if you have not already
  2. Create an EC2 instance

3. Press “Launch instance”

4. Pick out the EC2 Instance (Free Tier).

5. Before you can launch the instance, AWS will show a pop up which have you create a new keypair. This will used as the authorization when you SSH into the instance.

6. You should see the following when you successfully created the instance.

7. Update Inbound Rules in the Security Groups. This will allow you to access the instance via HTTP protocols.

8. Done! 😎

Accessing EC2 Instance

  1. Head on to the directory where you store the keypair. (I recommend placing the new keypair in a new directory)
  2. Change the permission of the keypair file.
    Linux: chmod 400 <filename>
    Windows: https://superuser.com/questions/1296024/windows-ssh-permissions-for-private-key-are-too-open
    If you don’t do this, it will give an error saying something “Permission for … are too open”
  3. SSH into the instance

4. Done! 😜

Configuring the NodeJS backend

We are going to be exposing a NodeJS app to the outside world with Docker!

  1. First, we are going to update Ubuntu’s package manager apt

2. Install Docker!

3. Post Docker installation — The reason for this is because we don’t want to keep having to use sudo for every docker’s commands
https://docs.docker.com/install/linux/linux-postinstall/

4. If you are able to successfully install Docker, it should look something like the following when you do “docker ps”

5. Cloning the Repository…

6. Head to the backend directory of the repository

7. Build the Docker image! 🐳

8. Now run the Docker image!

9. Once finished, you should be able to go your instance public ip address via port 5050 and see something.

10. You are done! 🎈

Configuring ReactJS

  1. Install Nginx

2. Start Nginx

3. You should be able to something once you head to the public ip address of your instance

4. Install Node. (We need this because we would like build the ReactJS app via npm run build)

5. Head to frontend directory and make a small change to App.js so it is able to fetch data from your NodeJS backend. You can either use VIM or Nano as the text editor of choice to make the changes. (Nano is easier)
VIM beginner guide: https://eastmanreference.com/a-quick-start-guide-for-beginners-to-the-vim-text-editor

Make the change in the api variable to your instance public ip address and port 5050

6. Now build the ReactJS app!

7. Running the build command will produce a directory (build) that hold static files that you can use to view your application. Now we would like to move it a different directory where we can use Nginx to serve it.

8. Now configure Nginx to serve the application!

9. Type the following into the frontend.conf

10. Restart Nginx server

11. Now when you head to your instance IP Address via port 3000, you should be able to see the following

12. When you click “CLICK ME!”, it will now able to fetch data from the backend which is at port 5050.

13. Done!! 🙌

Conclusion

This tutorial is a high level overview of one way you could go about deploying your full stack application in an AWS EC2 instance. It does not go over the knitty and gritty detail of every single implementation. But if you do have any questions, let me know!

Have a nice day! 🎯

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store