Deploying Vue.JS App to S3 using GitLab CI
Tags: vue, s3, gitlab, staticwebsite
Published: 2019-01-09 01:29:23

---
title: Deploying Vue.JS App to S3 using GitLab CI
published: true 
tags: vuejs,s3,gitlab,static web site
---

#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](https://docs.aws.amazon.com/AmazonS3/latest/dev/HowDoIWebsiteConfiguration.html) 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](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html#id_users_create_console) 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](https://hub.docker.com/r/wilson208/circleci-awscli/), 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 <bucket-name> with the name of your bucket. Do not commit and push this file yet.
```yaml
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

![Gitlab CI/CD Settings](https://thepracticaldev.s3.amazonaws.com/i/npdeqn4gq0ofo2u5oz9m.png)

###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!