CI/CD pipelines with AWS Amplify

December 30, 2022

Last updated: January 5, 2023

284 words

    Post contents

    The company I work for is an AWS partner and it is natural that many of the applications we build are based on the services offered by Amazon.

    We're migrating our CI/CD pipelines to AWS Amplify and I will show you how we can achieve great results with just a few clicks.


    The example is based on a Next.js application hosted on GitHub.

    GitHub

    To initialize the application we can use the command: npx create-next-app@latest --typescript

    Once the starter is created, we edit the file pages/index.tsx replacing the boilerplate with this code:

    pages index

    An environment variable is used here. We have to configure it in the Next.js configuration file next.config.js

    const nextConfig = {  [...]  env: { PROJECT_NAME: process.env.PROJECT_NAME, },}module.exports = nextConfig

    We can test the app locally by creating a .env.local file to set the environment variable

    EnvLocal

    After we sync the project with remote GitHub, we're ready to move on to the deployment part.

    AWS Amplify

    Once logged into the AWS console, let's search for the Amplify service.

    AWSDash

    Configuration

    Click on Host web app

    HostWebApp

    here we can connect our GitHub account and select the project we just created

    GitHubSelection

    GitHubRepo

    Click on Next, here we can configure the build and we can set our environment variable

    Build

    Save

    Build & Deploy

    🚀 The build and the deployment will be performed automatically

    Deploy

    Final result

    FinalResult

    This is the first article on AWS Amplify, if you find the topic interesting give ❤️ and I will write more about it. Bye 👋

    You can follow me on Twitter, where I'm posting or retweeting interesting articles.

    View profile
    Giorgio Boa is a full stack developer and the front-end ecosystem is his passion. He is also international public speaker, active in open source ecosystem, he loves learn and studies new things.

    Subscribe to our newsletter!

    Subscribe to our newsletter to get updates on new content we create, events we have coming up, and more! We'll make sure not to spam you and provide good insights to the content we have.