GitLab Advanced CI/CD - Hands-On Lab: Review Apps

This Hands-On Guide walks you through the process of creating review apps

The purpose of this lab is to create a review app from a Node.js application. A review app is a temporary application environment automatically created for each merge request in a project. It allows developers and stakeholders to preview and interact with proposed changes in a live, isolated environment before merging them into the main branch.

Estimate time to complete: 15 minutes

Objectives

Create a review app from the Node.js application

Task A. Creating a Web App

For this task, we will be creating a web application to run in our review environment.

Navigate to your project repository.
Select your .gitlab-ci.yml file.
Select Edit > Edit in pipeline editor.

In your install deps job, add an install for express:

install deps &cachedef:
  stage: deps
  script:
    - npm install jest-junit
    - npm install express
  cache:
    key: $CI_COMMIT_REF_SLUG
    paths:
      - node_modules

Select Commit changes.
Navigate back to your project repository.
Select your index.js file.
Select Edit > Edit single file.

At the bottom of the file, add the following code:

const express = require('express')
const app = express()
const port = 4001

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

After these changes, the index.js file should look like this:

  //A binary search will search a sorted list in log(n) time
  module.exports.binarySearch = function binarySearch(arr, val) {
      let start = 0;
      let end = arr.length - 1;
      while (start <= end) {
          let mid = Math.floor((start + end) / 2);
          if (arr[mid] === val) {
              return mid;
          }
          if (val < arr[mid]) {
              end = mid - 1;
          } else {
              start = mid + 1;
          }
      }
      return -1;
  }

  module.exports.linearSearch = function linearSearch(arr, val){
    let index = 0;
    let found = false;
    while (!found && index < arr.length){
      if (arr[index] == val){
          found = true;
      }else{
        index += 1;
      }
      }

      if (!found){
          index = -1;
      }

    return index;
  }

  const express = require('express')
  const app = express()
  const port = 4001

  app.get('/', (req, res) => {
    res.send('Hello World!')
  })

  app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
  })

Task B. Creating a Review App

In the left sidebar, select Operate > Environments.
Select Enable Review Apps.

Copy the provided script, which will look like this:

deploy_review:
  stage: deploy
  script:
    - echo "Add script here that deploys the code to your infrastructure"
  environment:
    name: review/$CI_COMMIT_REF_NAME
    url: https://$CI_ENVIRONMENT_SLUG.example.com
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"

If for any reason GitLab does not display this script when clicking Enable Review Apps, just copy the reference script above to use.

Navigate back to your code repository.
Select your .gitlab-ci.yml file.
Select Edit > Edit in pipeline editor.
Paste the copied deploy_review job at the end of the .gitlab-ci.yml file.
For our example, we will alter the URL slightly to use an IP address as the URL. This variable $ip is a group level variable created when you redeemed your invitation code. To use this variable, we will also remove the HTTPS since our server only uses HTTP. Below is our finished deploy_review definition:
```
deploy_review:
  stage: deploy
  script:
    - echo "Add script here that deploys the code to your infrastructure"
  environment:
    name: review/$CI_COMMIT_REF_NAME
    url: https://$ip:4001
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
```
Add the deploy stage to the .gitlab-ci.yml file.
```
stages:
  - deps
  - test
  - deploy
```
Now, we can deploy our changes to the Review App. In your deploy_review job, add an image of ubuntu:latest.
```
deploy_review:
  stage: deploy
  image: ubuntu:latest
```

Directly above the script of the deploy_review job, add the following before_script:

  before_script:
    - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client git -y )'
    - eval $(ssh-agent -s)
    - chmod 400 "$SSH_PRIVATE_KEY"
    - ssh-add "$SSH_PRIVATE_KEY"
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh

Finally, update the job script to match the following job definition:

  script:
    - ssh-keyscan -t rsa,ed25519 $ip >> ~/.ssh/known_hosts
    - ssh root@$ip 'mkdir -p /www'
    - ssh root@$ip 'sudo apt-get install nodejs npm -y'
    - ssh root@$ip 'cd /www/ && npm init -y'
    - ssh root@$ip 'cd /www/ && npm i express'
    - ssh root@$ip 'cd /www/ && npm i -g pm2'
    - scp index.js root@$ip:/www
    - ssh root@$ip 'pm2 start /www/index.js'

Here is what your final job script should look like:

deploy_review:
  stage: deploy
  image: ubuntu:latest
  before_script:
    - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client git -y )'
    - eval $(ssh-agent -s)
    - chmod 400 "$SSH_PRIVATE_KEY"
    - ssh-add "$SSH_PRIVATE_KEY"
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
  script:
    - ssh-keyscan -t rsa,ed25519 $ip >> ~/.ssh/known_hosts
    - ssh root@$ip 'mkdir -p /www'
    - ssh root@$ip 'sudo apt-get install nodejs npm -y'
    - ssh root@$ip 'cd /www/ && npm init -y'
    - ssh root@$ip 'cd /www/ && npm i express'
    - ssh root@$ip 'cd /www/ && npm i -g pm2'
    - scp index.js root@$ip:/www
    - ssh root@$ip 'pm2 start -f /www/index.js'
  environment:
    name: review/$CI_COMMIT_REF_NAME
    url: https://$ip:4001
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"

Select Commit changes.

Task C. Verify the review app

To test that your review app works, let’s create a new merge request.

Select Code > Branches.
Select New branch.
Set the branch name to test_review and select Create branch.
Select index.js.
Select Edit > Edit single file.

Update your res.send to display any message you like. Below is an example:

const express = require('express')
    const app = express()
    const port = 4001

    app.get('/', (req, res) => {
      res.send('Our app is running!')
    })

    app.listen(port, () => {
      console.log(`Example app listening on port ${port}`)
})

Select Commit changes.
Select Create merge request.
Leave all options as default and select Create merge request.
Wait for the pipeline to complete.
Select View app after the pipeline completes.

Lab Guide Complete

You have completed this lab exercise. You can view the other lab guides for this course.

Suggestions?

If you wish to make a change to the Hands-On Guide for GitLab CI/CD, please submit your changes via Merge Request.

Last modified November 14, 2024: Fix broken external links (ac0e3d5e)

View page source - Edit this page - please contribute.