AWS CodePipeline Create Pipeline For Vue - gecko-8/devwiki GitHub Wiki

Up

Introduction

In this guide, we'll use AWS CodePipeline to orchestrate a deployment from AWS CodeCommit to AWS S3.

We'll use the following AWS services:

  1. CodePipeline - Manages the whole process
  2. CodeCommit - Stores the code repository
  3. CodeBuild - Builds the Vue project
  4. CodeDeploy - Triggers the S3 deployment
  5. S3 - Stores the code between CodeCommit and CodeBuild

IMPORTANT: Create all resources in the same AWS region (e.g. ca-central-1)

Prerequisites

  • Vue project with NPM "build" script
  • AWS CodeCommit repository with your code project

Find Your Account ID

  1. Log into the AWS console.
  2. Click your profile dropdown in the top right.
  3. Click My Account.
  4. Under Account Settings you should see your Account Id. Record this for later.

Create an S3 Bucket for the Website

Reference: AWS Docs

  1. Log into the AWS console with the root user or an admin user with ability to manage S3 services.
  2. Navigate to the S3 page.
  3. Click the + Create Bucket button.
  4. Under Bucket Name, enter a name. For example, <project name>-<staging/production>.
  5. Make sure Region is your desired region, otherwise you may have AWS set to the wrong region.
  6. Click Next.
  7. Click Next.
  8. Clear the Block All Public Access checkbox. We'll turn this back on later.
  9. Click Next.
  10. Click Create Bucket.
  11. Find your bucket in the list and click it.
  12. Select the Properties tab.
  13. Click Static Website Hosting.
  14. Select Enable for Static Website Hosting.
  15. Select Host a Static Website under Hosting Type.
  16. Enter index.html for the Index document.
  17. Click Save Changes.
  18. Scroll down to Static Website Hosting and record the Endpoint url.

Setup Permissions

  1. Click the Permissions tab.
  2. Click Edit next to Bucket Policy.
  3. Paste the following into the edit field, replacing .
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::<bucket name>/*"
            ]
        }
    ]
}
  1. Click Save.
  2. Click Edit next to Block all public access.
  3. Add checks next to all but "Block public and cross-account access to buckets and objects through any public bucket or access point policies".
  4. Click Save.

Add buildspec.yml File

  1. Add a buildspec.yml file at the root of your project. It should look a lot like the following:
version: 0.2

phases:
  install:
    commands:
      - npm install -g @vue/cli@<your Vue version>
  pre_build:
    commands:
      - npm install
  build:
    commands:
      - npm run build
  post_build:
    commands:
      - echo nothing to do
artifacts:
  files:
    - '**/*'
  base-directory: dist
  • The "install" phase installs the Vue CLI tools.
  • The "pre_build" phase installs all dependencies.
  • The "build" phase actually builds the Vue distribution files.
  • The "artifacts" tells CodeBuild what files to save for a later stage.

Create the CodePipeline

  1. Log into the AWS console with the root user or an admin user with ability to manage CodePipeline services.
  2. Navigate to the CodePipeline page.
  3. Click the Create Pipeline button.
  4. Enter a Pipeline Name (e.g. <project-name>-pipeline.
  5. Ensure New Service Role is selected under Service Role. Role name should auto populate.
  6. Expand Advanced Settings.
  7. Ensure "Default Location" and "Default AWS Managed Key" are selected.
  8. Click Next.

Add Source Stage

  1. Under Source Provider, select AWS CodeCommit.
  2. Under Repository Name, select your CodeCommit repository.
  3. Under Branch Name, select the CodeCommit branch to use. For example, if this pipeline is for staging, the branch might be called "development".
  4. Leave Change Detection Options set to Amazon CloudWatch Events.
  5. Click Next.

Add Build Stage

  1. Under Build Provider, select AWS CodeBuild.
  2. Under Region, ensure it's set to the correct region. If not, you're probably trying to create your pipeline in the wrong region, start over with the correct region set.
  3. Under Project Name, click Create Project. A popup will open.
  4. Enter a Project Name (e.g. <project-name>-build for single container or <project-name>-<project-identifier>-build for multi-container).
  5. Under Environment Image, ensure Managed Image is selected.
  6. Under Operating System, choose Ubuntu.
  7. Under Runtime, choose Standard.
  8. Under Image, choose aws/codebuild/standard:4.0.
  9. Under Service Role, ensure New Service Role is selected.
  10. Under Role Name, add a name (e.g. <project-name>-build for single container or <project-name>-<project-identifier>-build for multi-container).
  11. Under Build Specifications, ensure Use a Buildspec File is selected.
  12. Under Buildspec Name, enter buildspec.yml
  13. Click Continue to CodePipeline. The popup will close and you'll be back at the Pipeline wizard.
  14. Click Next.

Add Deploy Stage.

  1. Under Deploy Provider, choose AWS S3.
  2. Under Bucket, choose your website bucket.
  3. Add a check next to "Extract file before deploy".
  4. Click Next.
  5. Click Create Pipeline. You'll be taken to the pipeline overview.
  6. Click Stop Execution (we're not quite done setup so build will fail anyway). This will open a popup.
  7. Under Select Execution choose the execution that's running (should only be one option).
  8. Under Choose a Stop Mode for the Execution, choose Stop and Abandon.
  9. Click Stop. Popup will close and pipeline will stop.

Final Permissions

  1. Log into the AWS console with the root user or an admin user with ability to manage IAM services.
  2. Navigate to the IAM page.
  3. Click Roles in the left nav.
  4. Search for codebuild.
  5. Click on the role for your build. Should be something like -build.
  6. On the Permissions tab, click Attach Policies.

S3 Permissions

  1. Click Create Policy.
  2. Click the JSON tab.
  3. Replace the existing content with (make sure to replace with the name of your S3 bucket recorded earlier):
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "s3:GetObject",
                "s3:GetBucketAcl",
                "s3:GetBucketLocation",
                "s3:GetObjectVersion"
            ],
            "Resource": [
                "arn:aws:s3:::<project name>/*",
                "arn:aws:s3:::<project name>"
            ]
        }
    ]
}
  1. Click Review Policy.
  2. Enter a name. For example, <project name>-s3.
  3. Click Create Policy.
  4. Close the Create Policy browser window.

Add the New Policy

  1. In the original IAM browser window, click the Refresh button at the top right of the policy list.
  2. Find the new policy and add a check beside it.
  3. Click the Attach Policy button.
  4. Select your build role.
  5. Click Attach Policy.

Test Your Pipeline

  1. Return to the CodePipelines page.
  2. Click on your new Pipeline.
  3. Click the Release Change button at the top right.
  4. Click Release.
  5. The pipeline should now run all the way through.

Troubleshooting Tips

  • If a stage fails, a small Details link should appear in that task. Clicking that link will show the log for that task.
  • Sometimes the log doesn't show enough information. Switching the Details view to the Phase Details tab can sometimes show more information.

Build Task Stops at "Waiting for DOWNLOAD_SOURCE"

This is likely caused by CodeBuild not having access to the S3 bucket containing the SourceArtifact. Check the S3 permissions from the Final Permissions section above.