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.

command defined 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

command on the Vue.JS application Runs the npm run build command to build the application into the dist/ folder

command to build the application into the 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!