Tue Sep 27 2022
In the Previous Post, I built my backend using Amplify and then I created my webapp with Next.JS and connected them.
I committed and pushed the code to my repository on GitHub and I want to configure my pipeline on Amplify to deploy my app in the
Let's jump to the Amplify Console, I chose
my blog app that I have there. There are 2 sections:
Host Environments tab, all the supported version control platforms are there.
I'm setting up with GitHub since my repository is there.
After choosing GitHub, it will ask for the repository and you might need to give access to Amplify on your GitHub to get your repository. Then I choose the branch I want to connect to and I DO NOT check
The next step is important since I need to connect this app to my backend. I can do it by finding my backend app in the list and pointing to the right environment.
Very Important Note
live package updates. Later I explain the issue that I had before the deployment with the different versions of Amplify CLI.
As you can see, Amplify automatically figures out that your app is Next.JS and make your build file. this is fantastic! Click next and "save and deploy".
The deployment fails in the
build step with the error:
Invalid feature flag configuration These feature flags are defined in the "amplify/cli.json" configuration file and are unknown to the currently running Amplify CLI
This is because the version of the CLI on your local computer is not equal to the CLI version on the CI. We can fix that by making sure we have the same version on the CI.
I have CLI version
9.2.1 on my local and I make CI have the same version by modifying the build file.
On the left menu clicks on Build settings and Edit the build file by adding
backend: phases: preBuild: commands: - npm i -g @email@example.com build: commands: - '# Execute Amplify CLI with the helper script' - amplifyPush --simple
Go back to the
build history page and click
It should deploy successfully now! What I have done was, unchecking the
full-stack CI/CD option on the
Hosting Environment but then I deploy the backend in the build process, so in reality, I do deploy full-stack app every time we push to the Git.
That's it, from now on, every time I push a new code to my master branch, Amplify will deploy both the back and front end automatically. If you look at your CloudFormation stacks on the AWS console, you'll find multiple stacks related to the app each one provision some resources either for API or Hosting.
© Copyright 2022 Farmin Farzin