Setup Custom Domain for S3 Static Website with Cloudflare CDN

Wilson McCoubrey — Wed, 09 Jan 2019 02:24:04 +0000

Overview

This post briefly describes a little bit of what I learned when looking to setup a custom domain and CDN for a static website hosted on S3.

TLDR

Bucket name needs to match custom domain. E.g. to setup a custom domain of wilsonmccoubrey.com, bucket name must be wilsonmccoubrey.com

Assumptions

This quick guide assumes you have:

A static website running successfully inside a bucket in S3, accessible via the bucket url e.g. http://<bucket name>.s3-website-<region>1.amazonaws.com/
A domain setup in cloudflare and nameservers setup

Steps

Set bucket name correctly

When setting up your bucket, your bucket name must match the custom domain which you want to serve the site from. For example, to setup a custom domain of wilsonmccoubrey.com, bucket name must be wilsonmccoubrey.com. I originally made this mistake and received 'NoSuchBucketException' in the browser after setting up my domain.

Add CNAME Record to Cloudflare

Enable SSL (Optional, but recommended)

Deploying Vue.JS App to S3 using GitLab CI

Wilson McCoubrey — Wed, 09 Jan 2019 01:29:23 +0000

Overview

This is a quick guide on how I have used GitLab CI to deploy a Vue.JS application to an S3 bucket. I will also cover briefly how I setup the S3 bucket to host a static website.

Assumptions

I am assuming you have the following setup successfully before beginning this:

Vue.JS application with npm run build command defined
- This command will build the Vue.JS application into the dist/ folder in the project
- This command comes pre-defined with most Vue.JS quick start tools, e.g. Vue CLI generated projects.
S3 Bucket Setup to host a static website:
- See these AWS docs to setup a bucket
- Ensure you set Index Document and Error Document both to be index.html
Git repo setup in GitLab
IAM Setup with permissions to write to S3 bucket
- Follow this guide to setup an IAM.
- Ensure you choose Programmatic access and take a note of your access key and secret key, these will be used in GitLab config step.
- test

Configuring GitLab CI

Gitlab CI is a docker based CI system, in the below configuration file we specify a docker image which is to be used to run the deployment job. The docker image we will be using is an image I have published, see it here, and it contains the following components which we need:

AWS CLI
Node.JS
NPM

The below configuration file does the following:

Boots a container using the specified image
Runs an npm install command on the Vue.JS application
Runs the npm run build command to build the application into the dist/ folder
Copies the dist/ folder up to the S3 bucket root directory using the aws cli

Create your `.gitlab-ci.yml` file

Place the below content inside .gitlab-ci.yml in the root of your project. Be sure to replace with the name of your bucket. Do not commit and push this file yet.

stages:
  - deploy

deploy web:
  stage: deploy
  image: wilson208/circleci-awscli:node

  cache:
    key: ${CI_COMMIT_REF_SLUG}
    paths:
    - node_modules/

  before_script:
  - npm install

  script:
  - npm run build
  - aws s3 rm s3://<bucket-name> --recursive
  - aws s3 cp --recursive ./dist s3://<bucket-name>/

Configure CI Environment Variables

Before committing the above file, the below variable need set inside the Gitlab repo settings. These settings will be provided as environment variables to the GitLab runner and will be used by the aws cli when authenticating the S3.

Navigate to your project page in Gitlab
Click on settings
Click on CI/CD
Expand the variables section
Enter the below environment variables:
- AWS_ACCESS_KEY_ID
- AWS_SECRET_ACCESS_KEY
- AWS_DEFAULT_REGION

Commit and Push

Finally, commit and push the new .gitlab-ci.yml file to the repo. Navigate to your project page in Gitlab, then to CI / CD, and you should see a running job. With some luck this will be successful and will deploy to your bucket.

If the deploy is successful, navigate the the bucket URL and you should see your Vue.JS application.

Let me know in the comments if you have any issues and I will do my best to help you resolve them!

DEV Community: Wilson McCoubrey

Setup Custom Domain for S3 Static Website with Cloudflare CDN

Overview

TLDR

Assumptions

Steps

Set bucket name correctly

Add CNAME Record to Cloudflare

Enable SSL (Optional, but recommended)

Deploying Vue.JS App to S3 using GitLab CI

Overview

Assumptions

Configuring GitLab CI

Create your .gitlab-ci.yml file

Configure CI Environment Variables

Commit and Push

Create your `.gitlab-ci.yml` file