Front-End Web & Mobile

Organizing your AWS resources using Tags with the Amplify CLI

Blog post written by Sebastian Crossa, an Open Source contributor from the MLH Fellowship
program.

In this guide, you’ll learn how to get up and running with tagging resources with Amplify
CLI.

AWS Amplify enables mobile & web developers to build full stack serverless apps. The Amplify CLI helps developers to create backend resources through a guided workflow.

Starting today Amplify CLI customers can easily start adding tags onto AWS resources. Tags
are labels consisting of key-value pairs that makes it easier to manage, search for, and filter resources.

Some popular use cases include:

  • AWS console organization
  • Cost allocation
  • Operations support
  • Access control
  • Security risk management

What we’ll learn

  • How to attach tags to Amplify-generated AWS resources and view them on the AWS console
  • How to use predefined variables inside of tag values

What we’ll build

A small project initialized with AWS Amplify, with a single tagged AWS resource (lambda function).

Pre-requisites

  1. Install the latest Amplify CLI version.
    • Open terminal and run npm install -g @aws-amplify/cli to update the latest Amplify CLI
  2. Configure the Amplify CLI
    • If you haven’t configured the Amplify CLI yet, follow this guide on our documentation page.

Setting up your Environment

To start, you’ll need to create a new project directory and initialize Amplify there.

Open up your terminal and create a new project directory:

mkdir tags-project && cd tags-project

In the project directory initialize a new Amplify project:

amplify init

For this project, you’ll be using all of the default values presented during the initial setup:

? Enter a name for the project (tags-project)
? Enter a name for the environment (dev)
? Choose your default editor: (your editor type)
? Choose the type of app that you are building (javascript) ? What javascript framework are you using (none)
? Source Directory Path: (src)
? Distribution Directory Path: (dist)
? Build Command: (npm run-script build)
? Start Command: (npm run-script start)
? Do you want to use an AWS profile? (Yes)
? Please choose the profile you want to use: (default)

Amplify is now initialized and a tags.json file is created in the /amplify/backend directory.

Next add a Lambda Function:

amplify add function

Again, accept all default values presented to during this setup, while giving your Lambda function a short but memorable name.

? Select which capability you want to add: Lambda function (serverless function)
? Provide a friendly name for your resource to be used as a label for this category in the project: (tagsproject)
? Provide the AWS Lambda function name: (tagsproject)
? Choose the runtime that you want to use: (NodeJS)
? Choose the function template that you want to use: (Hello World)
? Do you want to access other resources in this project from your Lambda function? (Yes)
? Select the category: (function)
? Do you want to invoke this function on a recurring schedule? (No) ? Do you want to configure Lambda layers for this function? (No)
? Do you want to edit the local lambda function now? (No)

Taking a look at the default tags

Once you have initialized amplify in your directory, you’ll be able to start adding and modifying your project tags.

As mentioned earlier, when running `amplify init`, a `tags.json` file is created in your `amplify/backend` directory.

It should look something like this:

[
  {
    "Key": "user:Stack", "Value": "{project-env}"
  },
   {
    "Key": "user:Application", "Value": "{project-name}"
  }
]

As you can see, the Amplify CLI generates 2 default tags, each with their own custom predefined variables. These variables represent important project values on their own:

  • {project-env} – Refers to the project environment (e.g. prod, env, etc)
  • {project-name} – Refers to the current project name (e.g mytestproject)

Once you push your resources to the cloud these variables will be converted to values based on your local project information. We’ll see this in action in just a bit!

Creating a new tag

Go ahead and add a new tag onto your tags.json file:

[
  {
    "Key": "user:Stack", "Value": "{project-env}"
  },
  {
    "Key": "user:Application", "Value": "{project-name}"
  },
+  {
+    "Key": "myawesomekey", "Value": "myvalue-{project-name}-{project-env}"
+  }
]

This new tag combines two of the predefined variables given to us – {project-name} and {project-env}.

The great thing about this is that all tags included in this file will persist on environment change (amplify env add), meaning that you won’t have to take extra steps to make sure your tags stay consistent.

Note: Before pushing updated tags to your AWS resources make sure that they don’t contain sensitive information, as they are accessible to other AWS resources, including billing. The `tags.json` file is also not ignored when creating commits and pushed to a repo, so keep that in mind as well.

Pushing your new tagged resource to the cloud

Now that you have four tags in your local `tags.json` file, go ahead and push your tagged Lambda function to the cloud by running:

amplify push -y

Seeing the tags in the AWS Lambda console

Once your tagged Lambda function resource has been deployed, you’ll need to go to the AWS Lambda Console to verify. The Amplify CLI toolchain gives you direct access to that console by running

amplify console function

After a prompt appears, select Lambda function (serverless function).

? Please select from one of the below mentioned services: Lambda function (serverless function)

Once that’s done a browser will open and you’ll be redirected to the AWS Lambda console.

The next step is to search for and identify the Lambda function of our project. This can be easily done by searching for it using the search bar. For this case, search for “tagsproject”.

Clicking on the function takes you to its console, which contains all of the information you’d want to know and/or modify for said function. It should look something like this.

To find the custom tags scroll down until you find a section titled “Tags”.

You now have successfully implemented and included tags onto your own Amplify workflow

Next steps

Feel free to keep playing around with the tags and the predefined variables offered out-of-the-box. We hope this feature helps you better organize your company-wide projects.

Check out the complete documentation for this feature if you want to dive into more details on tags and how to use them with the Amplify CLI toolchain.

If you have any further questions or feedback regarding this issue, create an issue in the Github repository. We’d love to receive feedback!