Looking through Glassdoor opportunities this week, I found a listing for a DevOps role. I found this post interesting because of the fullstack emphasis and required skills.
In this tutorial, we will place the emphasis on AWS. Particularly, AWS Relational Database Service (RDS), Elastic Container Service (EC2), and S3 Bucket storage to host a static website.
The specific tutorials for React and Django can be found in separate, more concise posts.
Here's our project overview:
Our React s3 site will call out to our Django Ec2 Rest API that will communicate with our postgres database in AWS RDS.
Let's start with RDS setup.
1.) RDS Postgres Setup
Navigate to your amazon console and in the menu click 'RDS'. Then, open another tab and navigate to EC2.
The purpose for having EC2 open right now, is that we are going to be creating a publicly accessible database instance. In order to do this, we need to have a security group ready to attach to it.
Note: this is not best security practice. You would ideally want to have a bastion in the VPC that can connect to your backend services. This method is for learning purposes.
Create a security group that has an inbound rule of PostgresSQL, and allow from everywhere.
Save that and head back over to your RDS tab.
Click "Create Database" at the top.
Most of these options will remain default for us, but change the following:
Engine Options:
PostgresSQL
Templates:
Free Tier
Settings:
Whatever you want here. I keep the postgres user as that is the standard at most companies as the root.
Connectivity:
Publicly Accessible - Yes
Security Group - remove default and add your SG we created above.
That's all we are going to change here. Click Create and wait for it to spin up. Once it is up and running, take note of the endpoint.
We will need this endpoint to use with out Django docker app.
We can test connectivity to this instance by using the telnet utility (Windows users, check out alternatives or install telnet). Open up a shell and use:
telnet database-1.ca6vr9jjlgch.us-east-1.rds.amazonaws.com 5432
If your SG is configured correctly, you should be able to connect.
2.) EC2 Setup for Django Application
Now that RDS is ready to be connected with, let's set up our Django EC2 Instance. Navigate over to your EC2 tab and select, "Launch Instance". Select the AMI you are comfortable with, but note, this tutorial uses the free tier Ubuntu 18 AMI.
While your instance is creating, make a new security group and allow TCP ALL to everywhere (Note, for this tutorial, be careful about SG's in professional settings).
Head back over to the EC2 dashboard and if your instance is complete, select your instance, click "Actions > Networking > Change Security Groups" and apply the new group you created.
We can quickly configure this with an ansible script found in our repo or for convenience:
- name: Provision Web Servers
hosts: webservers
tasks:
- name: install pip3
apt:
update_cache: yes
name: python3-pip
become: yes
- name: Install Docker
apt:
name: docker.io
become: yes
- name: Start Docker
shell: |
systemctl start docker
systemctl enable docker
become: yes
- name: Run Image
shell: |
docker run -it -d -e "DATABASE_URL=postgres://postgres:I2yyrfihDppNaBg0tZSd@mydb.ca6vr9jjlgch.us-east-1.rds.amazonaws.com:5432/postgres" -p 80:8000 scottyfullstack/basic-rest-api:latest
become: yes
- name: migrate
shell: |
for container in $(sudo docker ps | grep basic | awk '{print $1}'); do sudo docker exec $container python3 manage.py migrate; done
become: yes
Take note of the last step. The job posting suggests linux/bash as a skill. This is a great and simple example of a useful bash script to serve a purpose of running a command on an unknown container.
It is a basic For loop that takes any docker container (in our case one) with "basic" in the name. The Awk utility is printing the first column value and assigning it to our container mapped item. The next section is the do section that runs docker exec $container and then within that container runs the python migrate. Then we tell the loop to end with done.
That's it for our EC2 and django rest api. You can navigate to it in your browser at http://YOUR_EC2_DOMAIN/api/
3.) React app setup with S3 and Final steps
The specifics of what we are doing with the react app can be found here.
For this step we will absolutely need the code cloned to our machine. Head over to the github repo if you haven't yet.
Let's spend our time just focusing on S3 setup and pushing this to S3. You will need AWS-Vault (an IAM profile with S3 admin rights) for what we are doing so set that up first (specifics can be found on the video for this course).
Head over to the S3 dashboard and create a new bucket (named whatever you want and must be unique).
Allow the Bucket to be public
Click through the remaining defaults and create your bucket.
Then click inside your bucket and head to Properties. Set this bucket up for static hosting with index.html as the entry.
Then jump to Permissions and set the bucket policy with the following (also found in the repo under aws). NOTE replace "YOUR_BUCKET_NAME" with....your bucket name.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
}
]
}
Save that and then head back over to your react code in your editor and open package.json
Add a script line for "deploy" with your aws-vault profile:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "aws-vault exec django aws s3 sync build/ s3://my-django-react-tutorial",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Run
npm run build
npm run deploy
This will push the static react build folder to your S3 bucket.
Then navigate to your public S3 site found in the Properties tab:
You should now see your Product app.
Go ahead and play around. Add a value to this front end and click submit. Then check your Django API UI and see if the object registers.
If you wanted to go further, download Postgres or a DB client and connect to your RDS database. You should be able to see your entries populate your database in the products_product table. See the video for more detail.
WE ARE DONE.
See the other posts for application specific reasoning and feel free to change whatever you want and learn uniquely on your own. Don't forget about the docker images at your disposal!
Don't forget to like and subscribe to the youtube channel and keep on learning!
Until next time,
Scotty