If you’ve ever delved into the realm of software development, you’d agree that timely, efficient deployments are the backbone of any successful project. A well-structured pipeline that consolidates changes quickly and ensures rapid transition from development to production is more of an expectation than a novelty now.
Regardless of whether you’re a tech manager, a developer, or a tech-savvy entrepreneur, understanding the nuances of Continuous Integration/Continuous Deployment (CI/CD) is crucial for optimizing delivery timeframes and the overall efficiency of your projects.
Today, I’ll walk you through setting up a CI/CD pipeline for a Vue.js + Nuxt project using GitLab’s integrated CI/CD and Amazon’s S3 service, based on my own blueprint.
Laying the Groundwork: Understanding GitLab CI/CD and AWS S3
GitLab’s integrated CI/CD solution allows you to automate every phase of your pipeline – from the build process, to testing, and finally deployment. AWS S3, on the other hand, provides a simple, lightweight interface for storing your static website files and makes them accessible from any location via the web. Hence, GitLab CI/CD and AWS S3 combine to form a powerful duo for implementing CI/CD for Vue.js + Nuxt projects.
Setting up an Efficient CI/CD Pipeline for Vue.js + Nuxt projects: A Practical Blueprint
Having outlined what CI/CD is and why you need it, let’s dive into how to create this pipeline using GitLab’s CI/CD and Amazon S3. Our pipeline consists of two main stages, `build` and `deploy`.
Below is the structure of the `.gitlab-ci.yml` file:
stages:
- build
- deploy
variables:
APP_NAME: www
DOMAIN: garygitton.com
build-for-development:
extends: .build-npm-app
only:
- develop
variables:
APP_ENV: development
build-for-production:
extends: .build-npm-app
only:
- master
variables:
APP_ENV: production
deploy-for-development:
extends: .deploy-npm-app-on-s3
only:
- develop
variables:
APP_ENV: development
deploy-for-production:
extends: .deploy-npm-app-on-s3
only:
- master
variables:
APP_ENV: production
Stage 1: Build
In this `build` stage, the node environment is utilized to install the necessary packages and build the application according to the environment specified, i.e., development or production.
.build-npm-app:
image: node:12.7.0
stage: build
tags:
- docker
cache:
key: ${CI_COMMIT_REF_SLUG}-${APP_ENV}
paths:
- dist/
script:
- npm install
- npm run build -- --mode ${APP_ENV}
In the script section, `npm install` installs necessary packages while `npm run build — –mode ${APP_ENV}` produces the ‘dist’ directory, having the static files ready for deployment.
Stage 2: Deploy
In this `deploy` stage, AWS Command Line Interface (CLI) is used to connect to AWS S3 and sync our generated ‘dist’ directory with an AWS S3 bucket, according to the specific environment.
.deploy-npm-app-on-s3:
image: python:3.7-alpine
stage: deploy
tags:
- docker
cache:
key: ${CI_COMMIT_REF_SLUG}-${APP_ENV}
paths:
- dist/
script:
- echo "APP_ENV=$APP_ENV"
- echo "APP_NAME=$APP_NAME"
- echo "DOMAIN=$DOMAIN"
- apk add --no-cache zip
- pip install awscli
- echo "Sync dist with s3 bucket"
- aws s3 sync ./dist/ s3://${APP_NAME}-${APP_ENV}.${DOMAIN} --acl public-read
- echo "Define the s3 bucket as a website"
- aws s3 website s3://${APP_NAME}-${APP_ENV}.${DOMAIN} --index-document index.html --error-document index.html
Here,
aws s3 sync ./dist/ s3://${APP_NAME}-${APP_ENV}.${DOMAIN} --acl public-read
uploads the ‘dist’ directory to the AWS S3 bucket.
Setting up a CI/CD pipeline with GitLab and AWS S3 might seem intimidating at first, but don’t be deterred. With every step, you’re inching closer to a quicker, more efficient delivery of your application.
Feel like you could use a little help in getting the intricacies of DevOps and AWS right? I am more than happy to guide you.
Unlock the true potential of CI/CD with our Free Consultation today!
Sources:
- GitLab Documentation: CI/CD Pipeline Configuration
- AWS CLI Command Reference: S3
- Nuxt.js: Going to Production
