diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs index 0dea5dcf0c3..6e2a58d2257 100644 --- a/src/directory/directory.mjs +++ b/src/directory/directory.mjs @@ -677,6 +677,9 @@ export const directory = { { path: 'src/pages/[platform]/build-a-backend/add-aws-services/custom-resources/index.mdx' }, + { + path: 'src/pages/[platform]/build-a-backend/add-aws-services/tagging-resources/index.mdx' + }, { path: 'src/pages/[platform]/build-a-backend/add-aws-services/overriding-resources/index.mdx' } diff --git a/src/pages/[platform]/build-a-backend/add-aws-services/overriding-resources/index.mdx b/src/pages/[platform]/build-a-backend/add-aws-services/overriding-resources/index.mdx index e7cc8162461..b5f5d84942c 100644 --- a/src/pages/[platform]/build-a-backend/add-aws-services/overriding-resources/index.mdx +++ b/src/pages/[platform]/build-a-backend/add-aws-services/overriding-resources/index.mdx @@ -134,28 +134,4 @@ The `auth.resources.cfnResources.cfnUserPool` property in the above example dire This is different from `auth.resources.userPool` in the first example, which is an [L2 CDK construct](https://docs.aws.amazon.com/cdk/v2/guide/constructs.html#constructs_using). These are constructs that provide a convenient interface around several related L1 constructs. -## Example - Add tags to resources - -```ts title="amplify/backend.ts" -import { defineBackend } from '@aws-amplify/backend'; -import { auth } from './auth/resource'; -import { data } from './data/resource'; - -const backend = defineBackend({ - auth, - data -}); - -backend.data.resources.cfnResources.cfnGraphqlApi.addPropertyOverride('Tags', [ - { - Key: 'graphqlapi-tag-1', - Value: 'graphql-tag-value-1' - }, - { - Key: 'graphqlapi-tag-2', - Value: 'graphql-tag-value-2' - } -]); -``` - For situations where you need even more customization of your app backend, see the documentation on [custom resources](/[platform]/build-a-backend/add-aws-services/custom-resources). diff --git a/src/pages/[platform]/build-a-backend/add-aws-services/tagging-resources/index.mdx b/src/pages/[platform]/build-a-backend/add-aws-services/tagging-resources/index.mdx new file mode 100644 index 00000000000..84c44dca36a --- /dev/null +++ b/src/pages/[platform]/build-a-backend/add-aws-services/tagging-resources/index.mdx @@ -0,0 +1,67 @@ +import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; + +export const meta = { + title: 'Tagging resources', + description: 'Decorate resources with tags for categorization.', + platforms: [ + 'android', + 'angular', + 'flutter', + 'javascript', + 'nextjs', + 'react', + 'react-native', + 'swift', + 'vue' + ], +}; + +export async function getStaticPaths() { + return getCustomStaticPath(meta.platforms); +} + +export function getStaticProps(context) { + return { + props: { + platform: context.params.platform, + meta + } + }; +} + +Tags are a key-value pair that are applied to AWS resources to hold metadata. Tags are often used to decorate resources with metadata that helps categorize resources for billing or viewing purposes. Learn more about tags by visiting the [AWS documentation for best practices for tagging resources](https://docs.aws.amazon.com/whitepapers/latest/tagging-best-practices/what-are-tags.html). + +Amplify applies the following tags by default: + +| Deployment type | Tag key | Tag value | +|-----------------|---------------------------|--------------------------| +| sandbox | `created-by` | `amplify` | +| sandbox | `amplify:deployment-type` | `sandbox` | +| branch | `created-by` | `amplify` | +| branch | `amplify:deployment-type` | `branch` | +| branch | `amplify:app-id` | `` | +| branch | `amplify:branch-name` | `` | + +In your Amplify backend you can use the [`Tags`](https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.Tags.html) class from the [AWS Cloud Development Kit (CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) to apply tags at the root level, which then cascades to child resources. + +```ts title="amplify/backend.ts" +import { Tags } from 'aws-cdk-lib'; +import { defineBackend } from '@aws-amplify/backend'; +import { auth } from './auth/resource'; +import { data } from './data/resource'; + +/** + * @see https://docs.amplify.aws/react/build-a-backend/ to add storage, functions, and more + */ +const backend = defineBackend({ + auth, + data +}); + +const tags = Tags.of(backend.stack); +// add a new tag +tags.add('my-key', 'my-value'); +// remove tags +tags.remove('my-key'); +``` +