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
.
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"
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
toprod
)
amplify env checkout prod (x) -> amplify env checkout prod --restore
- be careful to use
amplify pull
command withappId
andenvName
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}
- 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 severalamplify 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"
- because
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 |
the status of dev
s.
| Category | Resource name |
| -------- | ------------------------------------ |
| Hosting | amplifyhosting |
| Function | kendrabuttonhosting28eb127dPreSignup |
| Auth | kendrabuttonhosting28eb127d |
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.
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
)
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 â
ââââââââââââââââīââââââââââââââââââââââââââââââââââââââââââââââââââââ
I will skip
Hosted UI Endpoint
andAmplify hosting urls:
section from now. because it is exact same contents when I hitamplify 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
$ 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 |
and there is one file changes in git.
this is Amplify Function
cloudformation template json file.
see what is changed..
just tab to space. contents are not changed at all.
so I discard changes this file via git
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 |
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.
after this process done, amplify
folder disappears.
$ 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
ðĪŠ
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 |
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.
$ 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 |
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?
ðģ
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 |
In this stuation, Trying to hit the command from Amplify Web Console.
amplify pull --appId dcj1fh5deo5r3 --envName dev
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 |
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)
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 |
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 |
ð 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 |
so I can check the amplify file changed properly from prod
to dev
.
Conclusion
It would be better to get an independent "amplify env" from each "git branch"
Take a look the
team-provider-info.json
carefullybe 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)