How to Set Up an Automated Deployment Pipeline for an S3 Website

aws s3 logo

Hosting your website using S3 is a fairly common practice on AWS. It’s inexpensive, requires no servers, and even supports client-side web applications with frameworks like React. To make things easier, we’ll be setting up a deployment pipeline to handle updates.

How does this work?

For an S3 site, you can perform updates by running aws s3 sync or by manually adding new objects to the bucket. However, this is a very manual process and it can be automated quite easily.

Using the AWS CodePipeline CI / CD service, you can set up a pipeline to listen for changes in your source control. Whenever a change is detected, CodePipeline will send the source to CodeBuild, which will handle the creation of the project. For web apps, this includes running npm run build, which will consolidate project assets into a production version. The build is sent directly to S3, updating the app.

Note that if your project does not require any type of creation with npm and you just want to sync your Git repository with S3, the setup will be much easier. Simply configure the source stage to connect to your source control, skip the build stage, and then choose “AWS S3” for the deploy stage. Enter the details of your bucket and the contents of your repository will be synchronized with the bucket on each update.

Pipeline configuration

In the CodePipeline console, click on “Create a new pipeline”, give it a name and choose to create a new service role.

create a new pipeline

For the source step, select your Git repository. If you’re using AWS’s own CodeCommit, you can select the repository and branch. Otherwise, you will need to log into your Github or Bitbucket account. Gitlab is not supported.

source step

For the build step, select “CodeBuild” and create a new build project.

create a construction project

This will open a dialog window, which will automatically configure the source of the new CodeBuild project to use CodePipeline. You will need to configure your environment here, select an operating system, and choose a runtime version. You’ll also want to create a new service role, which will need to be changed in order to access your deployment bucket.

configure the build environment

For the build configuration, choose to use a buildspec file.

buildspec file

Buildspec is a YAML format for defining the commands that CodeBuild will execute. This will vary depending on your application. For this example, we’ll assume that you are building your JavaScript application with npm. Paste the following into a new file called buildspec.yml, placed at the root of your repository.

version: 0.2

phases:
install:
runtime versions:
nodejs: 10
orders:
– npm i npm @ last -g
pre_build:
orders:
– npm install
to build:
orders:
– npm run build
post_build:
orders:
– aws s3 sync ./build s3: // bucket name

This Buildspec actually takes care of the deployment to S3 – during the post-build phase, CodeBuild will run aws s3 sync to sync the / build folder with the specified bucket.

Click create on the build project, which will take you back to CodePipeline. Click “Next” and choose to skip the deployment step, because CodeBuild can handle the execution of the command. Create the pipeline.

For the first run, the build step will fail because the CodeBuild service role does not have access to S3. Head to the IAM management console, find the CodeBuild role under “Roles” and attach a new policy that allows access to S3. Really, you should probably limit this to only accessing the deployment bucket.

add policy to role

Go back to CodePipeline and click “Release Change” on your pipeline to manually trigger a pipeline update. If nothing is wrong with your Buildspec, you should see the pipeline succeed.

successful pipeline

If you commit to Git, a new compilation will be started and S3 will be updated with the build artifacts. If there are any errors in the build, CodePipeline will stop before the update.

If your pipeline fails, you can click “CodeBuild” in the sidebar to view the logs for the most recent version, which will help you locate errors.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.