HackerNoon.com
Published in

HackerNoon.com

Using GitLab CI/CD to auto-deploy your Vue.js application to AWS S3

GitLab CI/CD — Vue.js — Amazon S3
Create bucket modal
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
}
]
}
This ensures the bucket policy cannot be updated
Either download the .csv or click show secret key and copy and paste somewhere
git remote rename origin old-origin
git remote add origin https://gitlab.com/croossin/vues3example.git
git push -u origin --all
Funny enough, using GitHub Gist’s for a GitLab article 🤣
stages:  
- build
- deploy
build prod:  
image: node:10.15.0-stretch
stage: build
only:
- tags
script:
# Install vuecli
- npm install -g @vue/cli@latest
# Install dependencies
- npm install
# Build App
- npm run build
artifacts:
paths:
# Build folder
- dist/
expire_in: 1 hour
  • image: Since we are building our Vue.js app, we will want to set the docker image to be some version (preferably latest) of Node.
  • stage: This should coincide with one of the stages that we described at the very top of the file. This let’s GitLab know how stages are associated.
  • only: This is very key if you want GitLab to run these scripts conditionally based on a specific branch or tag. For me, I like to set up a stage and production environment. When I merge changes into master, it will run the stage scripts, and when I create a tag, it will run the prod scripts.
  • script: As it may sound, this is sequence of commands that are run in this stage. For this particular instance, we install the latest Vue Cli, download all the dependencies, and then run our build script from our package.json — which for me looks something like: vue-cli-service build
  • artifacts: Now this is what got me tripped up in the beginning. Since we have two stages in our deployment process (build and deploy) and they are both on two different images, we need a way for the second stage (deploy) to have access to our build folder — dist/ . With artifacts, we can set a path to “store” for other stages to reference. Thus, I set my path for the dist/ folder and set an expiration for 1 hour.
deploy prod:  
image: python:latest
stage: deploy
only:
- tags
script:
- pip install awscli
- aws s3 sync ./dist s3://YOUR_BUCKET_NAME
GitLab AWS Environment Variables
  • Created an AWS account
  • Created an S3 bucket and set permissions to public access
  • Created an IAM user for GitLab to use
  • Create a GitLab account/project
  • Add our .gitlab-ci.yml and fill with our CI/CD stages
  • Add our IAM credentials as environment variables
  • Sit back, smile, and watch as your code is automatically deployed to S3 via GitLab’s CI/CD process

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store