-
Notifications
You must be signed in to change notification settings - Fork 1
AWS CodePipeline Create Pipeline For Vue
Jason Lewis edited this page Jan 17, 2021
·
9 revisions
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)
- Vue project with NPM "build" script
- AWS CodeCommit repository with your code project
- 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.
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.
- 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 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
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.