Automated Deployment on AWS — Part 2: Python/Flask API with NGINX; React/Redux Frontend with SSL

Part II: Deploying a React-Redux App with Nginx and SSL Certbot

We’ll start by following the steps under this section of this repositories readme.

Thegaijin/cp4-aws

Before you run the script at step 12 in the instructions, get a domain name. I got mine at godaddy.com for a little over a dollar. Once you have the domain name, Under the Services section on AWS, navigate over to Route 53 AWS’ Cloud Domain Name System. We will use this to link our new domain name to the instance IP address.

On the Route 53 page, select Hosted Zones>Create Hosted Zone. On the far right you will see a field to enter your domain name, enter it as is, for example, example.com and leave the type as Public Hosted Zone. You can add a description if you would like.

After creating the hosted zone, head over to domain provider to configure the DNS. Under the DNS settings, set custom nameservers to the ones provided in the Route 53 settings.

After configuring that the nameserver settings, Under the Route 53 settings, click on the Create Record Set button to create an A record. The A record maps the domain name to an IP address, in our case we will be mapping our domain name, to the public IP of the CP4 instance we created.
On the far right, you can leave the Name field blank which will set the default domain to the IP address which is added to the Value field. You can also create a A record for a subdomain by just adding what you want your subdomain name in the name field and setting the same IP address. If you put the word mine in name field, the subdomain will be mine.example.com.

You should then edit your Nginx configurations in the script under the configureNginx function to include your domain name as below. It is advisable to enter the default domain name as is such as example.com as well the www version, www.example.com of it since it another of the more common ways people type out domain names.

My domain name is thegaijin.xyz

Yummy Recipes

configureNginx () {
printf '==================== Configure nginx =================== \n'
sudo bash -c 'cat > /etc/nginx/sites-available/default <<EOF
server {
    listen 80;
    server_name thegaijin.xyz www.thegaijin.xyz;
location / {
        proxy_pass http://127.0.0.1:3000;
        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;
        proxy_redirect off;
     }
}
'
sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/
sudo systemctl restart nginx
}

In the Nginx configuration, nginx checks which server the request should be routed to. If its value does not match any server name, then nginx will route the request to the default server for this port. In the configuration above, the default server is the first one — which is nginx’s standard default behaviour. Once you have edited the configurations in the script to have your domain name instead of mine, save the file. Then give it executable permissions by running this command.

sudo chmod +x cp4-setup.sh

While still in the directory with the script, execute it like this.

. cp4-setup.sh

As the script runs, you will be prompted for an email address which is used to create an account for you on the ACME server.

Prompt for email

You will then be prompted to agree to the letsencrypt Terms of Service.

Prompt to agree to terms of service

You are then asked if you would like to share your email with Electronic Frontier Foundation.

Prompt to share email address with EFF. This is optional

The email and agreeing to the terms of service is mandatory for you to get the SSL certificates.
You are then prompted to pick which of the domain names you entered in the configuration file you would like activate HTTPS for (you can choose all of them).

Prompt to pick domain names to activate https for

Lastly you will prompted to choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.

Prompt to make the switch from http to https.

You can now access the domain name.

To set the front end to be able to make HTTP requests to the API, you have to edit the apiUrl in the services files. Run

cd /reacipe/src/_services/
sudo vim user.services.js

Edit the apiUrl to http://<API instance public IP address>/api/v1/

Do the same in the category.services.js and the recipe.services.js files.

Remember to edit the RDS Database security group to have the HTTP rule source set to the Public IP address of the API instance.