Deploying Vue.JS App to S3 using GitLab CI

#vue #s3 #gitlab #staticwebsite

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!