AWS CodePipeline Create Pipeline For Vue - gecko-8/devwiki GitHub Wiki
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:
- CodePipeline - Manages the whole process
- CodeCommit - Stores the code repository
- CodeBuild - Builds the Vue project
- CodeDeploy - Triggers the S3 deployment
- 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
- Log into the AWS console.
- Click your profile dropdown in the top right.
- Click My Account.
- Under Account Settings you should see your Account Id. Record this for later.
Create an S3 Bucket for the Website
Reference: AWS Docs
- Log into the AWS console with the root user or an admin user with ability to manage S3 services.
- Navigate to the S3 page.
- Click the + Create Bucket button.
- Under Bucket Name, enter a name. For example,
<project name>-<staging/production>
. - Make sure Region is your desired region, otherwise you may have AWS set to the wrong region.
- Click Next.
- Click Next.
- Clear the Block All Public Access checkbox. We'll turn this back on later.
- Click Next.
- Click Create Bucket.
- Find your bucket in the list and click it.
- Select the Properties tab.
- Click Static Website Hosting.
- Select Enable for Static Website Hosting.
- Select Host a Static Website under Hosting Type.
- Enter index.html for the Index document.
- Click Save Changes.
- Scroll down to Static Website Hosting and record the Endpoint url.
Setup Permissions
- Click the Permissions tab.
- Click Edit next to Bucket Policy.
- 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>/*"
]
}
]
}
- Click Save.
- Click Edit next to Block all public access.
- Add checks next to all but "Block public and cross-account access to buckets and objects through any public bucket or access point policies".
- Click Save.
Add buildspec.yml File
- 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
- Log into the AWS console with the root user or an admin user with ability to manage CodePipeline services.
- Navigate to the CodePipeline page.
- Click the Create Pipeline button.
- Enter a Pipeline Name (e.g.
<project-name>-pipeline
. - Ensure New Service Role is selected under Service Role. Role name should auto populate.
- Expand Advanced Settings.
- Ensure "Default Location" and "Default AWS Managed Key" are selected.
- Click Next.
Add Source Stage
- Under Source Provider, select AWS CodeCommit.
- Under Repository Name, select your CodeCommit repository.
- Under Branch Name, select the CodeCommit branch to use. For example, if this pipeline is for staging, the branch might be called "development".
- Leave Change Detection Options set to Amazon CloudWatch Events.
- Click Next.
Add Build Stage
- Under Build Provider, select AWS CodeBuild.
- 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.
- Under Project Name, click Create Project. A popup will open.
- Enter a Project Name (e.g.
<project-name>-build
for single container or<project-name>-<project-identifier>-build
for multi-container). - Under Environment Image, ensure Managed Image is selected.
- Under Operating System, choose Ubuntu.
- Under Runtime, choose Standard.
- Under Image, choose aws/codebuild/standard:4.0.
- Under Service Role, ensure New Service Role is selected.
- Under Role Name, add a name (e.g.
<project-name>-build
for single container or<project-name>-<project-identifier>-build
for multi-container). - Under Build Specifications, ensure Use a Buildspec File is selected.
- Under Buildspec Name, enter buildspec.yml
- Click Continue to CodePipeline. The popup will close and you'll be back at the Pipeline wizard.
- Click Next.
Add Deploy Stage.
- Under Deploy Provider, choose AWS S3.
- Under Bucket, choose your website bucket.
- Add a check next to "Extract file before deploy".
- Click Next.
- Click Create Pipeline. You'll be taken to the pipeline overview.
- Click Stop Execution (we're not quite done setup so build will fail anyway). This will open a popup.
- Under Select Execution choose the execution that's running (should only be one option).
- Under Choose a Stop Mode for the Execution, choose Stop and Abandon.
- Click Stop. Popup will close and pipeline will stop.
Final Permissions
- Log into the AWS console with the root user or an admin user with ability to manage IAM services.
- Navigate to the IAM page.
- Click Roles in the left nav.
- Search for codebuild.
- Click on the role for your build. Should be something like -build.
- On the Permissions tab, click Attach Policies.
S3 Permissions
- Click Create Policy.
- Click the JSON tab.
- 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>"
]
}
]
}
- Click Review Policy.
- Enter a name. For example,
<project name>-s3
. - Click Create Policy.
- Close the Create Policy browser window.
Add the New Policy
- In the original IAM browser window, click the Refresh button at the top right of the policy list.
- Find the new policy and add a check beside it.
- Click the Attach Policy button.
- Select your build role.
- Click Attach Policy.
Test Your Pipeline
- Return to the CodePipelines page.
- Click on your new Pipeline.
- Click the Release Change button at the top right.
- Click Release.
- 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.