DEV Community

Cover image for Jump over a hurdle of working with Amplify backend environment
AWS Community Builders profile image TaeSeong Park
TaeSeong Park for AWS Community Builders

Posted on • Edited on

Jump over a hurdle of working with Amplify backend environment

#aws #amplify #kendrabutton #amazonkendra

Introducing

I'm a member of AWSKRUG which is AWS community in Korea,

and I am working on a Open Source project named kendra-button.
This project is the serivice using ML service Amazon Kendra.

kendra-button flowchart

kendra-button_architecture

I'm in charge of all of the frontend and Auth, Hosting of backend.

This post is my experience working on separating the backend environment into dev and prod.

and any opinions or advice are welcome. cause the "AWS Community Builders" is the organization for developing better experience and better features using AWS 😆👍

Amplify Team Environment

Amplify is a tool and service that I am passionately using because it supports a number of functions that deploy in a fully managed AWS infrastructure such as web hosting, membership authentication, and functions, etc.

Among this numerous features,
Amplify backend environment looked great for team project to switch the stage like dev/prod.

The reason I decieded to use this feature is to simplify the tool to use.
I'm already using Amplify Hosting / Auth for Cognito / and Function for Cognito Lambda trigger,
so It would be nice to group together and easy to manage.

Amplify Document said, "Every Amplify backend environment is a container for the categories added to your project. To deploy updates to an environment, run amplify push."
and "Amplify matches the standard Git workflow"
overview_of_environment

Reality of Amplify Team Environment

Let me start to share my frustrating experience working with Amplify Environment.
I was using only one environment called dev. so this is the experience of the process about adding a new environment called prod.

To tell the conclusion first,

  • the way hit the env checkout command (e.g., from dev to prod) 
  amplify env checkout prod (x) -> amplify env checkout prod --restore
Enter fullscreen mode Exit fullscreen mode
  • be careful to use amplify pull command with appId and envName flag when you already configured amplify environment in your project. amplify folder would be disappears at once 
  amplify pull --appId {appId} --envName {name of env}
Enter fullscreen mode Exit fullscreen mode
  • don't checkout the amplify environment in same git branch. It's not good at your mental health.
    • because team-provider-info.json doesn't follow the context exactly with making several amplify env checkout actions.
    • and actually not only team-provider-info.json do, but others do by unknown reason.
    • so please split into different "git branch" per "amplify env"

Override wrong info to "Auth" when checkout another env

This is what I discovered incidentally so let me share.

the status of prod environment.

| Category | Resource name                        |
| -------- | ------------------------------------ |
| Hosting  | amplifyhosting                       |
| Function | kendrabuttonhosting84e32663PreSignup |
| Auth     | kendrabuttonhosting84e32663          |
Enter fullscreen mode Exit fullscreen mode

the status of devs.

| Category | Resource name                        |
| -------- | ------------------------------------ |
| Hosting  | amplifyhosting                       |
| Function | kendrabuttonhosting28eb127dPreSignup |
| Auth     | kendrabuttonhosting28eb127d          |
Enter fullscreen mode Exit fullscreen mode

In a state that is already set as the prod environment, I tried to checkout the env dev.

but I had to re input the social provider's info which is I'd already configured.

$ amplify env checkout dev

✔ Initialized provider successfully.

 You've opted to allow users to authenticate via Facebook.  If you haven't already, you'll need to go to https://developers.facebook.com and create an App ID. 

 Enter your Facebook App ID for your OAuth flow:  {AMPLIFY_FACEBOOK_CLIENT_ID}
 Enter your Facebook App Secret for your OAuth flow:  {AMPLIFY_FACEBOOK_CLIENT_SECRET}

 You've opted to allow users to authenticate via Google.  If you haven't already, you'll need to go to https://developers.google.com/identity and create an App ID. 

 Enter your Google Web Client ID for your OAuth flow:  {AMPLIFY_GOOGLE_CLIENT_ID}
 Enter your Google Web Client Secret for your OAuth flow:  {AMPLIFY_GOOGLE_CLIENT_SECRET}
Initialized your environment successfully.
Enter fullscreen mode Exit fullscreen mode

team-provider-info.json

I saw the content difference of team-provider-info.json.

keys of [dev.categories.auth, dev.categories.function] are overwritten by prod environment's keys.

kendrabuttonhosting28eb127d_userpool_28eb127d(dev) -> kendrabuttonhosting84e32663_userpool_84e32663(prod)

comparison code of team-provider-info.json

seeing this happens, I thought I wanna go back to prod.

$ amplify env checkout prod

✔ Initialized provider successfully.
Initialized your environment successfully.


$ amplify status

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Function | kendrabuttonhosting84e32663PreSignup | Update    | awscloudformation |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |

Hosted UI Endpoint: https://social-kendra-prod.auth.us-west-2.amazoncognito.com/
Test Your Hosted UI Endpoint: https://social-kendra-prod.auth.us-west-2.amazoncognito.com/login?response_type=code&client_id=26t8thf04jdel3p73gh4vp99hk&redirect_uri=https://admin.kendra.fun/

Amplify hosting urls: 
┌──────────────┬───────────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                            │
├──────────────┼───────────────────────────────────────────────────┤
│ frontend-dev │ https://frontend-dev.dcj1fh5deo5r3.amplifyapp.com │
│              ├───────────────────────────────────────────────────┤
│              │ https://dev.kendra.fun                            │
├──────────────┼───────────────────────────────────────────────────┤
│ master       │ https://master.dcj1fh5deo5r3.amplifyapp.com       │
│              ├───────────────────────────────────────────────────┤
│              │ https://admin.kendra.fun                          │
├──────────────┼───────────────────────────────────────────────────┤
│ service      │ https://service.dcj1fh5deo5r3.amplifyapp.com      │
│              ├───────────────────────────────────────────────────┤
│              │ https://service.kendra.fun                        │
└──────────────┴───────────────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

I will skip Hosted UI Endpoint and Amplify hosting urls: section from now. because it is exact same contents when I hit amplify status command.

Umm, something wrong happens.
Let me make Function and Hosting's Operations to No Change.

Making "Function" Operation to "No Change" 

amplify env checkout prod --restore
Enter fullscreen mode Exit fullscreen mode 
$ amplify env checkout prod --restore

✔ Initialized provider successfully.
Initialized your environment successfully.

$ amplify status

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | No Change | awscloudformation |
Enter fullscreen mode Exit fullscreen mode

and there is one file changes in git.
this is Amplify Function cloudformation template json file.

after_amplify_env_checkout_prod_restore

see what is changed..
just tab to space. contents are not changed at all.

after_amplify_env_prod_tab_to_space_function_compare

so I discard changes this file via git
discard_git_just_tab_space

and checking amplify status, there is Function Operation status changed to Update. hmm...

$ amplify status

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Function | kendrabuttonhosting84e32663PreSignup | Update    | awscloudformation |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |
Enter fullscreen mode Exit fullscreen mode

so I recovered the file, Function's Operation status is back to No Change.

Making "Hosting" Operation to "No Change": the whole "amplify" folder disappears?

I want to make the Hosting's Operation to No Change. because I haven't changed hosting.

so I tried to pull the backend environment again. because I have no clue how to recover the Hosting's Operation status!

following command below is reference to Amplify Console for web.

Even though it checks out master environment, which is different from what we're working, key point is answering "No" at "Do you plan on modifying this backend?"

$ amplify pull --appId dcj1fh5deo5r3 --envName master

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use kendra-geoseong
Amplify AppID found: dcj1fh5deo5r3. Amplify App name is: kendrabuttonhosting
Backend environment master found in Amplify Console app: kendrabuttonhosting
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  frontend/kendra-button-front/src
? Distribution Directory Path: frontend/kendra-button-front/src/out
? Build Command:  npm run-script build
? Start Command: npm run-script start

? Do you plan on modifying this backend? No  # <--- look at this carefully

Added backend environment config object to your project.
Run 'amplify pull' to sync upstream changes.
Enter fullscreen mode Exit fullscreen mode

after this process done, amplify folder disappears.

after_amplify_pull_envName

$ amplify status

You are not working inside a valid amplify project.
Use 'amplify init' in the root of your app directory to initialize your project with Amplify
Error: You are not working inside a valid amplify project.
Use 'amplify init' in the root of your app directory to initialize your project with Amplify
    at getAmplifyDirPath (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/extensions/amplify-helpers/path-manager.js:45:11)
    at getBackendDirPath (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/extensions/amplify-helpers/path-manager.js:51:37)
    at Object.getAmplifyMetaFilePath (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/extensions/amplify-helpers/path-manager.js:93:37)
    at getCloudInitStatus (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/extensions/amplify-helpers/get-cloud-init-status.js:8:41)
    at AmplifyToolkit.showResourceTable [as _showResourceTable] (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/extensions/amplify-helpers/resource-status.js:194:38)
    at Object.run (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/commands/status.js:6:31)
    at Object.executeAmplifyCommand (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/index.js:110:25)
    at executePluginModuleCommand (/Users/geoseong/.npm-packages/lib/node_modules/@aws-amplify/cli/lib/execution-manager.js:131:32)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:757:11)
FAIL: 1
Enter fullscreen mode Exit fullscreen mode

🤪
this is really frustrating.

I tried to hit pull command again, and I chose Yes in the last question: Do you plan on modifying this backend?

...

so amplify folder recovered. only prod environment.

$ amplify pull --appId dcj1fh5deo5r3 --envName prod

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use kendra-geoseong
Amplify AppID found: dcj1fh5deo5r3. Amplify App name is: kendrabuttonhosting
Backend environment prod found in Amplify Console app: kendrabuttonhosting
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start

? Do you plan on modifying this backend? Yes  # <-- look at this carefully. choose "Yes"

Successfully pulled backend environment prod from the cloud.
Run 'amplify pull' to sync upstream changes.

$ amplify status

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | No Change | awscloudformation |
Enter fullscreen mode Exit fullscreen mode

Hosting Still return Create Operation status,
so I followed the instruction of amplify pull --appId dcj1fh5deo5r3 --envName prod which is I hit just before.

Run 'amplify pull' to sync upstream changes.
Enter fullscreen mode Exit fullscreen mode 
$ amplify pull

Pre-pull status:

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | No Change | awscloudformation |

Local changes detected.
Pulling changes from the cloud will override your local changes.
? Are you sure you would like to continue? Yes
✔ Successfully pulled backend environment prod from the cloud.


Post-pull status:

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | No Change |                   |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | No Change | awscloudformation |
Enter fullscreen mode Exit fullscreen mode

Oh, finally I made Hosting's Operation status to No Change.

(actually I don't understand why I have to hit amplify pull command twice.)

Anyways even though the status of amplify displays No Change Operation in every Category, the content team-provider-info.json in my local doesn't have Function and Auth.

Somebody help?
😳

after_amplify_pull_envName_and_amplify_pull

I wanted to know how this happen, but I cannot find in any Amplify Documents.

The reason why split into different "git branch" per "amplify env"

I thought I ended up the issue that the whole amplify folder disappears and recover the environment.

but when I tried to checkout another env to dev, this error returns. dev environment doesn't exist on my local.

$ amplify env checkout dev --restore
Please pass in a valid environment name. Run amplify env list to get a list of valid environments

$ amplify env list

| Environments |
| ------------ |
| *prod        |
Enter fullscreen mode Exit fullscreen mode

In this stuation, Trying to hit the command from Amplify Web Console.
dev_command_in_webconsole

amplify pull --appId dcj1fh5deo5r3 --envName dev
Enter fullscreen mode Exit fullscreen mode

Don't forget to answer Yes when "Do you plan on modifying this backend?" comes.

$ amplify pull --appId dcj1fh5deo5r3 --envName dev

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use kendra-geoseong
Amplify AppID found: dcj1fh5deo5r3. Amplify App name is: kendrabuttonhosting
Backend environment dev found in Amplify Console app: kendrabuttonhosting
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start

? Do you plan on modifying this backend? Yes  # <-- don't forget to choose "Yes"

Successfully pulled backend environment dev from the cloud.
Run 'amplify pull' to sync upstream changes.


$ amplify pull

Pre-pull status:

Current Environment: dev

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | No Change |                   |
| Auth     | kendrabuttonhosting28eb127d          | No Change | awscloudformation |
| Function | kendrabuttonhosting28eb127dPreSignup | No Change | awscloudformation |

✔ Successfully pulled backend environment dev from the cloud.


Post-pull status:

Current Environment: dev

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | No Change |                   |
| Auth     | kendrabuttonhosting28eb127d          | No Change | awscloudformation |
| Function | kendrabuttonhosting28eb127dPreSignup | No Change | awscloudformation |


$ amplify env list

| Environments |
| ------------ |
| *dev         |
| prod         |
Enter fullscreen mode Exit fullscreen mode

One more experimental try

In a state that is in dev environment, I tried to checkout prod env again. and hit the command without --restore flag. (In the same git branch!)

$ amplify env checkout prod

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use kendra-geoseong
✔ Initialized provider successfully.

 You've opted to allow users to authenticate via Facebook.  If you haven't already, you'll need to go to https://developers.facebook.com and create an App ID. 

 Enter your Facebook App ID for your OAuth flow:  {AMPLIFY_FACEBOOK_CLIENT_ID}
 Enter your Facebook App Secret for your OAuth flow:  {AMPLIFY_FACEBOOK_CLIENT_SECRET}

 You've opted to allow users to authenticate via Google.  If you haven't already, you'll need to go to https://developers.google.com/identity and create an App ID. 

 Enter your Google Web Client ID for your OAuth flow:  {AMPLIFY_GOOGLE_CLIENT_ID}
 Enter your Google Web Client Secret for your OAuth flow:  {AMPLIFY_GOOGLE_CLIENT_SECRET}
? Do you want to configure Lambda Triggers for Cognito? (Y/n) 

# I cancelled it!! (Ctrl + C in OSX)
Enter fullscreen mode Exit fullscreen mode

wow. amplify recognize like Auth is never exists before. 😭
I just cancelled configuring Lambda Trigger step.

and I check the status again

$ amplify status

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Auth     | kendrabuttonhosting28eb127d          | Create    | awscloudformation |
| Function | kendrabuttonhosting28eb127dPreSignup | Create    | awscloudformation |
| Auth     | kendrabuttonhosting84e32663          | Delete    | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | Delete    | awscloudformation |
Enter fullscreen mode Exit fullscreen mode

kendrabuttonhosting28eb127d is the resources of dev, kendrabuttonhosting84e32663 is resources of prod.
If I push with this status, The epic disaster would happen...

omg, I'm gonna hit amplify pull with panic 😰

$ amplify pull

Pre-pull status:

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | Create    |                   |
| Auth     | kendrabuttonhosting28eb127d          | Create    | awscloudformation |
| Function | kendrabuttonhosting28eb127dPreSignup | Create    | awscloudformation |
| Auth     | kendrabuttonhosting84e32663          | Delete    | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | Delete    | awscloudformation |

Local changes detected.
Pulling changes from the cloud will override your local changes.
? Are you sure you would like to continue? Yes
✔ Successfully pulled backend environment prod from the cloud.


Post-pull status:

Current Environment: prod

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | No Change |                   |
| Auth     | kendrabuttonhosting84e32663          | No Change | awscloudformation |
| Function | kendrabuttonhosting84e32663PreSignup | No Change | awscloudformation |
Enter fullscreen mode Exit fullscreen mode

😀 The nightmare ended.
I think checking out to another "ampilfy env" cause unexpected errors in same branch.

so after this painful process passed,
I think It would be better to get an independent "amplify env" from each "git branch".

Split branch and configure amplify environment

so far I worked in master branch in git,
I checkout new git branch called frontend-dev.

and I checkout a dev amplify environment. (with --restore flag!)

$ git checkout -b frontend-dev
Switched to a new branch 'frontend-dev'


$ amplify env checkout dev --restore

✔ Initialized provider successfully.
Initialized your environment successfully.

$ amplify status

Current Environment: dev

| Category | Resource name                        | Operation | Provider plugin   |
| -------- | ------------------------------------ | --------- | ----------------- |
| Hosting  | amplifyhosting                       | No Change |                   |
| Auth     | kendrabuttonhosting28eb127d          | No Change | awscloudformation |
| Function | kendrabuttonhosting28eb127dPreSignup | No Change | awscloudformation |
Enter fullscreen mode Exit fullscreen mode

so I can check the amplify file changed properly from prod to dev.
env_checkout_new_git_branch

Conclusion

It would be better to get an independent "amplify env" from each "git branch"

Take a look the team-provider-info.json carefully

be sure to do git commit management when you're changing amplify environment

The Experienced AWS User like me can handle this problem,
Newbie of AWS would feel painful using Amplify to be honest.

And I think Amplify Document still lack of contents especially CLI and Hosting.
also late feedback from amplify github repository. issue or PRs.

I hope these confusion will be end soon.

I still love AWS Amplify and I wanna keep support and contribute Amplify so Every AWS Amplify user including me have such a great experience using AWS easily!

Top comments (0)

Read next

leewalter profile image

Exploring new AWS Aurora DSQL. What is it ? Why it is important ? How to quickstart ?

Walter Lee -

094459 profile image

Amazon Q Developer Tips: No.16 How to tackle LLM training data cutoff

Ricardo Sueiras -

martygo profile image

⛳️ Top 5 AWS Services Every Frontend Should Know 💎🧪

Martins Gouveia -

tanushree_aggarwal profile image

Dr. Swami Sivasubramanian's Keynote - under 5 minutes

Tanushree Aggarwal -