Step 2: Configure the back-end deployment process.

The overall process for back-end deployment will be nearly identical to that of the front-end. The only difference is that instead of deploying to S3, we deploy to ElasticBeanstalk. This comes with a few additional tasks but we’ll walk through them step-by-step.

Let’s first set up our ElasticBeanstalk environment on AWS.

We’ll start by creating an ElasticBeanstalk application.

aws elasticbeanstalk create-application --application-name mywebapp-api

We’ll then create the environment.

aws elasticbeanstalk create-environment \  --application-name mywebapp-api \  --environment-name production \  --solution-stack-name "64bit Amazon Linux 2018.03 v2.12.0 running Docker 18.03.1-ce
 
"

The relationship between an EB application and environment is one-to-many: in other words, one application may have one or more environments. For example, if you want to host both a production and staging version of your application, you’d create an environment for each.

Lastly, if we need to define environment variables for our EB application, we can do so by navigating to Configuration > Software (Modify) > Environment properties in the

ElasticBeanstalk setup. ✔️

Now, for the new files.

First, we’ll need to add some ElasticBeanstalk configuration details to our project. In the root directory of your project, create a new folder named .elasticbeanstalk and in it create a file called config.yml with the following contents:

Now let’s add the files telling TravisCI to push your code to ElasticBeanstalk.

The key difference in this deploy script is the configuration of your AWS credentials before deploying since the eb command doesn’t pull it from your environment variables like aws s3 does.

Okay, now for a new file exclusive to the back-end deployment process, Dockerfile.

This file defines the steps that a Docker container needs to run to start up the API server. There’s tons more to learn about Docker here if you’re interested but for the sake of this tutorial, we’ll just consider it as a necessary step in ElasticBeanstalk deployment.

That’s it! We’re done. Now pushing your code to the hooked up branch should automatically kick off a deployment!

Step 3: Configure the domain’s DNS settings

At this point, your front-end and back-end apps should be deployed and independently functional. The problem is, they aren’t hosted on the domain you want (and therefore can’t even communicate with each other)!

The React app is hosted at a CloudFront endpoint that looks something liked3ois221lkhb7q.cloudfront.net and the API at an ElasticBeanstalk endpoint that looks like production.nghvu3hx5z.us-west-2.elasticbeanstalk.com.

To point your domain name at these apps, go to your domain hosting service’s DNS settings and add the following new DNS records, tweaking the URLs you put for value to match your own app’s CloudFront, EB, and domain URL’s. The interface for adding these records varies by hosting service but the general information you need to enter is the same.

# For the React appRecord Type: CNAMEHost: wwwValue: d3ois221lkhb7q.cloudfront.net

# For the API serverRecord Type: CNAMEHost: apiValue: production.nghvu3hx5z.us-west-2.elasticbeanstalk.com

# For redirecting mywebapp.com to www.mywebapp.comRecord Type: URL RedirectHost: @ # This means the rootValue: http://www.mywebapp.com

Give the DNS record changes a generous amount of time to propagate through the network (we’re talking on the scale of hours here).

Step 4: Configure HTTPS using AWS Certificate Manager

At this point, your app should be fully wired up to be accessible via your chosen domain (in other words, navigating to mywebapp.com should work as expected).

But there’s one small problem. Your site isn’t secure.

In order to ensure that communication between your site and its users is secure, you’ll need to add HTTPS/SSL support. Fortunately, AWS makes this a breeze.

Head on over to the Certificate Manager in the AWS Console. Click “Request a Certificate” and then “Request a public certificate”.

Under the domain names section, specify both the root and the www subdomain.

Click Next and follow the instructions to validate your certificate.

Once that’s done, head on over to your CloudFront instance you created earlier. Under the General tab, click Edit. Under the SSL Certificate section, check “Custom SSL Certificate” and select the certificate you just made. Then under the Behaviors tab, select the first Behavior and Edit, selecting “Redirect HTTP to HTTPS”.

Our React app server is now HTTPS secure. Now let’s secure our API.

Go to the ElasticBeanstalk console and open up your application environment’s configuration panel. In there, click “Modify” under “Load Balancer”.

Finally, click “Add Listener” and create a Load Balancer listener with the following settings, selecting the certificate you just made for the “SSL Certificate” dropdown.

Add the certificate and now your API is secure as well.

Done.

Whew, that was pretty long but you made it to the end. Congratulations! You now have a web app that’s configured to run tests (and conditionally) deploy to AWS S3/CloudFront and ElasticBeanstalk whenever you push to GitHub. ???