Setup Gitlab CI/CD with Nuxt 3 content

Published 
DevOps

In order to use Gitlab CI/CD we need to create a file .gitlab-ci.yml with the following contents:

before_script:
  - apk update && apk add openssh rsync

stages:
  - build
  - deploy

build:
  image: node:lts-alpine3.14
  stage: build
  only:
    - main
  script:
    - npm i --progress=false
    - npm run generate
  artifacts:
    expire_in: 1h
    paths:
      - .output

deploy:
  image: alpine
  stage: deploy
  only:
    - main
  script:
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    - rsync -rav --delete .output/public/. user@serveraddress:/srv/www/directory/

Short explanation of this yaml file

  1. It is divided in a 2 stages - build and deploy.
  2. Build stage: we're installing npm modules, then generating a ready to use app. As a result we're saving .output directory as artifact (.output/public) was dist in Nuxt 2 / Content V1.
  3. Deploy stage: getting our private key (previously saved in a gitlab UI) and unsing rsync to transfer contents of .output/public in to our production server.

Also don't forget to setup a variable SSH_PRIVATE_KEY in your gitlab repo.

Go to Settings > CI/CD > Variables:

Setup Gitlab CI/CD with Nuxt 3 content

Use cat ~/.ssh/id_rsa | pbcopy to save your private key in a clipboard (if you're on a Mac), then paste it in a variable, just as on a screenshot above.

Warning

Gitlab has only 400 CI/CD minutes per month, so use it wisely.