Deploying to AWS Amplify 🔊

If you're trying to deploy your front-end app to AWS using their Amplify service, but your builds keep failing, you've come to the right place. I struggled trying to get this to work with no clear documentation from AWS explaining how to set up deployments from a private repository.

After several stackoverflow searches and contacting AWS, I decided to write this blog post to help others solve their deployment issues. The steps explained below are written as if you were starting from scratch.

Step 1

Login to your AWS Management console. Then navigate over to the AWS Amplify service. Next, click on the New app dropdown button and select Host web app.

Step 2

Select your repository host provider (in my case I was using Bitbucket) and then click the Continue button.

Step 3

Authenticate with your repository host provider. Once authenticated, select the repo / app that you would like to deploy in the dropdown under Recently updated repositories. If you don't see your repo listed, you'll likely need Admin access or you'll need to push changes to the app. Then select the branch you would like to get deployed each time you push a change to that branch. Click on the Next button.

Step 4

You should now see Configure build settings at the top. Feel free to update the application name at the top if you'd like. Then, we'll need to update the list of commands under preBuild in the Build and test settings section.

We'll want to add the these two lines before "- yarn install"

• eval "$(ssh-agent -s)"
• ssh-add <(echo "$DEPLOYMENT_KEY" | base64 -d)

We're adding the two lines above to tell AWS Amplify to use the ssh-agent to evaluate our ssh key that we will add below.

So your file should look like the following:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - eval "$(ssh-agent -s)"
        - ssh-add <(echo "$DEPLOYMENT_KEY" | base64 -d)
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: /
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Note: It's important to double check your build to see what the output directory is and update the baseDirectory property above as needed

Next, you'll want to click on the Advanced settings dropdown.

Under environment variables, you'll want to add an environment variable for DEPLOYMENT_KEY, which we added to the build configuration above. Now that you've entered in DEPLOYMENT_KEY in the Key field, let's move onto the next step to get the value.

Step 5

We'll need to generate an SSH key for both Amplify and your repository provider.

First, create the SSH key pair without a password by running the following command in your terminal:

ssh-keygen -f DEPLOYMENT_KEY -N ""

Second, we'll need to base64 encode the SSH key and copy the output into the value field for our DEPLOYMENT_KEY environment variable in the Amplify Console:

cat DEPLOYMENT_KEY | base64 | tr -d n

Last, we'll need to add the contents of the DEPLOYMENT_KEY.pub to the access keys of the private repository that you want to deploy. This will vary based on the repository provider. You should be able to find how to add the public key to your repository provider in the settings of either the repo or your account settings.

After adding the private key to the value field in the environment variable settings and adding the public key to your repository provider, click on the Next button and then Save and deploy. Your first build will now begin 🥳.

Conclusion

Congrats on deploying to AWS Amplify! I hope that worked for you! Please reach out if you run into any issues along the way!

This post can also be found at sapanbodiwala.com