Create Frontend CodeBuild

Step 1: Open CodeBuild in the AWS Management Console

1. Log in to the AWS Management Console.

2. In the top search bar, enter CodeBuild.

3. Under the Services category, click CodeBuild (Build and Test Code). Ensure your active AWS Region is us-east-1 (US East (N. Virginia)).

   

4. In the left navigation menu, expand Build and select Build projects.

5. In the top-right corner of the Build projects dashboard, click the orange Create project button.

   

Step 2: Configure project details

1. In the Project configuration panel, configure the general project settings:

   • Project name: Enter aws-fcaj-container-fe
   • Project type: Select Default project (Create a custom CodeBuild project)

   

Step 3: Configure source provider and authenticate with GitHub

1. Scroll to the Source section and configure the primary source:

   • Source provider: Select GitHub from the dropdown menu.

2. If your AWS account has not yet linked a GitHub credential, a red status message appears: “You have not connected to GitHub. Manage account credentials.” Click the Manage account credentials link.

   

3. In the Manage default source credential modal dialog, configure the following:

   • Source Provider: GitHub
   • Credential type: Select Personal access token (Connect project to GitHub using a personal access token).
   • Service: Select CodeBuild (Use CodeBuild managed token).
   • GitHub personal access token: Paste your personal access token generated in earlier lab steps (starting with ghp_).

4. Click the orange Save button.

   

5. Return to the Source 1 - Primary configuration section and verify the connected status:

   • Credential: Confirms that your account is successfully connected through PAT using CodeBuild managed token.
   • Repository: Select Repository in my GitHub account.
   • GitHub repository: Enter the HTTPS clone URL of your forked repository: https://github.com/<your-username>/aws-fcaj-container-app-codebuild.git
   • Source version - optional: Leave blank.

   

Step 4: Configure primary source webhook events

Configure webhooks so that AWS CodeBuild automatically initiates a build only when a release tag is pushed to GitHub.

1. In the Primary source webhook events section, configure the trigger parameters:

   • Check the checkbox Rebuild every time a code change is pushed to this repository.
   • Build type: Select Single build (Triggers single build).
   • Comment approval: Select DISABLED.

2. Under Webhook event filter groups, configure Filter group 1:

   • Event type - optional: Select PUSH.
   • In the filter rule row, set:
     • Condition: Select START_BUILD.
     • Type: Select HEAD_REF.
     • Pattern (regex): Enter ^refs/tags/

   

Step 5: Configure build environment

Specify the managed container runtime image and service role used to execute the frontend build tasks.

1. In the Environment section, configure the environment settings:

   • Provisioning model: Select On-demand
   • Environment image: Select Managed image
   • Compute: Select EC2
   • Running mode: Select Container
   • Operating system: Select Ubuntu.
   • Runtime(s): Select Standard.
   • Image: Select aws/codebuild/standard:8.0.
   • Image version: Select Always use the latest image for this runtime version.
   • Service role: Select New service role.
   • Role name: Enter aws-fcaj-container-fe-service-role.

   

Step 6: Configure environment variables

CodeBuild uses environment variables at runtime to locate target Amazon ECS clusters, Amazon ECR repositories, and AWS authentication credentials specified in buildspec-frontend.yml.

1. Expand the Additional configuration section.
2. Scroll to the Environment variables subsection.
3. Click Add environment variable to insert rows for each of the following 11 variables (ensure Type is set to Plaintext for all entries):

aws sts get-caller-identity --query "Account" --output text

Step 7: Configure Buildspec and Artifacts

1. Scroll down to the Buildspec section:

   • Under Build specifications: Select Use a buildspec file
   • Buildspec name - optional: Enter buildspec-frontend.yml.

2. In the Artifacts section:

   • Type: Select No artifacts (the Docker image is packaged and pushed directly to Amazon ECR within the build execution).

   

Step 8: Configure CloudWatch Logs and create build project

1. Scroll to the Logs section:

   • Under CloudWatch: Check the checkbox CloudWatch logs - optional.
   • Group name - optional: Enter codebuild/aws-fcaj-container-fe.
   • Stream name prefix - optional: Leave blank.
   • Under S3: Leave S3 logs - optional unchecked.

2. At the bottom of the page, click the orange Create build project button.

   

Step 9: Attach required IAM permissions to the service role

When CodeBuild created the service role aws-fcaj-container-fe-service-role, it granted baseline logging capabilities. To allow CodeBuild to authenticate with Amazon ECR, register updated task definitions, and trigger Amazon ECS service deployments, attach additional managed policies.

1. In the AWS Management Console top search bar, search for IAM and open the IAM service dashboard.

2. In the left navigation pane under Access Management, click Roles.

3. In the search box, enter aws-fcaj-container-fe-service-role.

4. In the search results table, click the role name aws-fcaj-container-fe-service-role.

   

5. On the role summary page, select the Permissions tab.

6. Click the Add permissions dropdown button and select Attach policies.

   

7. In the policy search field, search for and select the checkboxes for the following policies:

   • AmazonECS_FullAccess (AWS managed policy)
   • CloudWatchLogsFullAccess (AWS managed policy)
   • WriteECRRepositoryContent (Customer managed policy created in previous lab modules)

8. Click Add permissions.

9. A confirmation alert banner appears: “Policies have been successfully attached to role.”

   

Verification checkpoint

Verify that all required IAM policies are attached to the service role using the AWS CLI or IAM Console:

aws iam list-attached-role-policies --role-name aws-fcaj-container-fe-service-role --output table