Hosting your website with S3 is quite common with AWS. It’s inexpensive, requires no servers, and even supports client-side Web apps with frameworks like React. To make it easier, we create a distribution pipeline to handle updates.
How does this work?
For an S3 website, you can make updates by running
aws s3 sync, or by adding new items manually. However, this is a very manual process, and it can be automated quite easily.
Using AWS̵7;s CodePipeline CI / CD service, you can configure a pipeline to listen for changes in your source control. When a change is detected, CodePipeline will send the source to CodeBuild, who will handle the construction of the project. For web apps, this includes most running
npm run build, which will package project assets for a production building. The construction is sent directly to S3, the application updates.
Note that if your project does not require any kind of building with
npm, and you just want to sync your Git repo to S3, the installation will be much easier. Simply configure the source stage to connect to your source controller, skip the construction stage, and then select “AWS S3” for the distribution stage. Enter in your bucket information and the contents of your repo are synchronized with the bucket at each update.
Set up the pipeline
In the CodePipeline Console, click “Create New Pipeline”, give it a name, and choose to create a new service role.
Select your Git archive for the source step. If you use AWS ‘own CodeCommit, you can choose the repo and branch. Otherwise, you will need to connect to your Github or Bitbucket account. Gitlab is not supported.
For the construction stage, select “CodeBuild” and create a new construction project.
This opens a dialog window that auto-configures the source of the new CodeBuild project to use CodePipeline. You need to configure your environment here, choose an operating system and choose a runtime version. You also want to create a new service role, which must be changed in order to access your distribution bucket.
For the build configuration, choose to use a buildspec file.
npm. Paste the following into a new file named
buildspec.yml, located at the root of your repository.
version: 0.2 phases: install: runtime-versions: nodejs: 10 commands: - npm i npm@latest -g pre_build: commands: - npm install build: commands: - npm run build post_build: commands: - aws s3 sync ./build s3://bucket-name
This Buildspec actually takes care of the distribution to S3 – during the post building phase, CodeBuild will run
aws s3 sync to synchronize
/build folder with the specified bucket.
Click create on the construction project, which takes you back to CodePipeline. Click “Next” and choose to skip the deployment step, as CodeBuild will be able to run the command. Create a pipeline.
For the first run, the construction phase will fail, as the service role CodeBuild does not have access to S3. Go to the IAM Management Console, find the CodeBuild role under “Roles” and attach a new policy that gives access to S3. Really, you should probably limit this to only access the distribution bucket.
Return 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 that the pipeline succeeds.
If you make a commitment to Git, a new building will be spun up and S3 will be updated with build artifacts. If there are any errors in the structure, CodePipeline will stop before the update.
If your pipeline fails, you can click “CodeBuild” in the sidebar to see the logs of the most recent build, which will help you track down errors.