Git Repository for this Tutorial
https://github.com/khemsok/aws_deploy_tutorial.git
Deploying EC2 Instance
- Head on to https://aws.amazon.com/ and sign up for an AWS account if you have not already
- 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
- Head on to the directory where you store the keypair. (I recommend placing the new keypair in a new directory)
- 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” - SSH into the instance
ssh -i <key_pair_name.pem> ubuntu@<instance_IPv4_Public_IP>
4. Done! 😜
Configuring the NodeJS backend
We are going to be exposing a NodeJS app to the outside world with Docker!
- First, we are going to update Ubuntu’s package manager apt
sudo apt update2. Install Docker!
sudo apt install docker.io3. 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/
sudo usermod -aG docker $USER
newgrp docker4. If you are able to successfully install Docker, it should look something like the following when you do “docker ps”
5. Cloning the Repository…
git clone https://github.com/khemsok/aws_deploy_tutorial.git
6. Head to the backend directory of the repository
cd aws_deploy_tutorial/backend/7. Build the Docker image! 🐳
docker build -t backend .
8. Now run the Docker image!
docker run -p 5050:5050 -d backend
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
- Install Nginx
sudo apt install nginx2. Start Nginx
sudo service nginx start3. 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)
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs5. 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
6. Now build the ReactJS app!
npm run build7. 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.
sudo mv build /var/www/8. Now configure Nginx to serve the application!
cd /etc/nginx/conf.d/
sudo vim frontend.conf9. Type the following into the frontend.conf
server {
listen 3000;
location / {
root /var/www/build/;
index index.html index.htm;
}
}
10. Restart Nginx server
sudo service nginx restart11. 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! 🎯
