In this section, we will leverage the Amplify Console to configure a CI/CD pipeline that will be responsible for deploying our application. Having a Pipeline in place will greatly reduce the time it takes to get changes into our hosting environment.
In order to follow along with this section you will need to have already followed along with parts 1 and 2 of this tutorial:
Overview
First off we need to confirm that we have our new React project successfully committed to our Github Repository similar to what’s shown below:
Once that’s confirmed we can go ahead on open the Amplify management console available here. If it’s your first time using AWS Amplify, you will see the getting started dashboard as shown below. Scroll down to the bottom of the page and click on the Get started button under “Deliver”.
The next step is to connect your Git repository to your AWS Amplify environment. This will allow Amplify to clone the repository and be triggered whenever a commit occurs. Select your Repository service to provide from the list shown below (Github in our example) and click “Continue” (making sure not to click the one under From full-stack samples). You will then be automatically requested to allow AWS Amplify access to your repository (this may require you logging into your account).
Once access to your account has been granted, the next step is to select the repository from the list and define the branch you wish to follow. We will be creating two separate deployments, one to deploy our production environment based on our “Main” branch and a second one to deploy from our test branch. To start off with, go ahead and select the “Main” branch and click “Next“.
At this next screen, there is a lot going on. Firstly we need to give our application a name (AWS should have pre-populated this from our configuration). Next, we need to confirm which environment we want to use with the backend we’re configuring. Considering we’re configuring our main branch, we’ll want to link this to our prod environment
Assuming you’ve never used Amplify Deploy before, you’ll then need to go ahead and create an IAM role that it can use. Amplify needs this role to be able to interact with the various AWS components. Click the “Create new role” button, and select “Amplify” from the list of services presented. This defines which AWS service the request will be originating from.
By default, the Amplify console automatically selects the “AdministratorAccess” policy to apply to our new role. While this is OK for the purposes of our workshop, It’s highly advisable that you define your own fine-grained policy when using Amplify in a production environment. As this will be a short-lived environment, simply go ahead and access the policy and click “Next: Tags“.
Just go ahead and click “next“. No need to worry about giving our new IAM role Tags in this workshop example.
Once you review the settings and create the new role (you can just click Create role), you can go back to our previous tab and click the “Refresh existing roles” button. Then select the new role from the list (“amplifyconsole-backend-role” if you followed the instructions and accepted the default values).
The rest of this page is about configuring our Build and Test tasks… “How our pipeline will build and deploy our application in the new environment”. Given we haven’t defined and build settings as of yet, we can simply accept the defaults and click “Next” and come back to it later.
All we need to do now is give our variables a quick review and click “Save and deploy“. Note that this will take a couple of minutes to complete and it’s usually helpful to wait at this point before configuring the next branch, in case something goes wrong.
The Amplify Console will then commence the task of setting up our new pipeline and deploy our application. You can track the progress of this via the Application dashboard
After a few minutes, you should see that our new pipeline has completed the deployment of our “main” branch into our “prod” environment. This console also provides the URL we can use to visit our site (highlighted in yellow in the below screenshot).
And there we have it, if we go ahead and click the link we are taken to our glorious new website!
Setup our development environment
But what about our development environment? So far we’ve only configured our main branch to be linked to our production environment. So what we need to do now is link our dev branch to our dev environment (the one we configured back in the previous section).
To do this we need to go back to our Amplify tab and click on the “Connect branch” button located on the top right of the page.
Same deal as when we configured our “main” back earlier, only this time we don’t need to provide access to our Git repository first (because AWS Amplify already has access). Go ahead and select the “dev” branch and the “dev” environment. If you don’t see a dev branch, simply go ahead and create one and push the change to your git repository and then refresh the page.
I have experienced situations where the “Next” doesn’t want to become selectable. If this happens, simply click “Cancel” and then restart the process. If it occurs a second time forcing a refresh of the whole page seems to fix it.
Same as last time, make sure all the details are correct and then click “Save and deploy“.
At this stage, our new “dev” pipeline will go through the process of downloading and deploying our workload. You should wait for the pipeline to succeed before proceeding to the next step.
So we now have a Production environment running, deployed off our “main” branch, and a development environment deployed off our “dev” branch. This problem is, we’d prefer if the public didn’t have access to our testing environment so let’s go ahead and configure a simple username and password prompt on it. As shown below, from the left-hand menu, click on “Access Control“.
Now, simply click on the “Manage access” button (top right-hand side of the page) and we’re presented with a page where we can define a username and password for each of our branches, or a single one for all deployments. For our purposes, we just want to password protect our development environment so:
- Select “Restricted – password required” from the “Access settings dropdown.
- enter a username in the first column. For our example, we are using “developer” as our username.
- Enter and verify a password. Go ahead and click “Save” once you are down.
Back on our “Amplify Deploy” page, under the “dev” application pipeline, you will see the URL of the application. Go ahead and click it to validate the password protection. The page should open in a new tab and prompt for a username and password. Go ahead and enter the details you defined in step 16 and click “Sign in“.
And voila!, our application…. isn’t it wonderful.
What did we just do?
OK so we have some running React boilerplate running, why did we need to go through so many steps to get there?
So firstly, we’ve provided AWS Amplify with access to our Git Repository and will allow it to trigger events as well as access the current version of our source code. From there, we’ve configured two separate deployment pipelines… The first is to handle our Production deployments and the other is for our development deployment. Whenever we make a commit to either of those branches, Amplify we automatically trigger a deployment for us.
We can expand upon this pattern in the future should we desire by adding additional branches. We might want an environment for testing, QA, or even feature previews.
Next Steps
It’s at this stage that we are ready to start building out the functionality of our new application. In the next part, we will start building out our application and leveraging some of the functionality that AWS Amplify CLI provides us. In the meantime, if there is anything about AWS Amplify (or anything cloud-native) you’d like us to explore on the blog please reach out using the contact details below.
