IT, Startup and Innovation

Adopting CI/CD for Vue.js + Nuxt Projects with GitLab and AWS S3: An Effective Blueprint

Reading Time: 2 minutes
Discover a detailed, practical guide to setting up an efficient CI/CD pipeline for Vue.js + Nuxt projects using GitLab and AWS S3.
gitlab ci cd + nuxt.js + aws s3

Table of Contents

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:

Share it on:

Twitter
LinkedIn
Facebook
WhatsApp

About the Author

Gary Gitton
Hello, I'm Gary Gitton - an accomplished Software Engineer, Tech Lead, specializing in PHP, API Engineering, DevOps, and Cloud Management. Throughout my career, I've had the privilege to enhance multiple software solutions with my expertise in multiple languages and platforms. I bring my unique blend of technical and business acumen to every project, ensuring efficient, scalable, and innovative outcomes. I'm also passionate about fostering a culture of continuous learning, mentoring developers, and leading projects with agile methodologies. Whether concocting a bespoke API or orchestrating cloud environments, I'm committed to delivering quality and excellence. Let's connect and transform your vision into a digital reality.

You might also like