GitLab Advanced CI/CD - Hands-On Lab: 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.
Estimated 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.ymlfile. -
Select Edit > Edit in pipeline editor.
-
When we add express code into our
index.jsfile, our tests will no longer be able to run againstindex.js, since running this will create a webserver that waits for connections. Thus, let’s remove thetest binarysearchand thetest linearsearchjobs from the file. Remove the jobs from the.gitlab-ci.ymlfile, and select Commit changes. -
Navigate back to your project repository.
-
Select your
index.jsfile. -
Select Edit > Edit single file.
-
Remove the binary search and linear search methods, and add the code below, which will run our web application:
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}`) }) -
Commit your changes.
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.ymlfile. -
Select Edit > Edit in pipeline editor.
-
Paste the copied
deploy_reviewjob at the end of the.gitlab-ci.ymlfile. -
For our example, we will alter the URL slightly to use an IP address as the URL. This variable
$ipis a group level variable created when you redeemed your invitation code. To use this variable, we will also remove theHTTPSsince our server only usesHTTP. Below is our finisheddeploy_reviewdefinition:deploy_review: stage: deploy script: - echo "Add script here that deploys the code to your infrastructure" environment: name: review/$CI_COMMIT_REF_NAME url: http://$ip:4001 rules: - if: $CI_PIPELINE_SOURCE == "merge_request_event" -
Add the
deploystage to the.gitlab-ci.ymlfile.stages: - deps - test - deploy -
Now, we can deploy our changes to the Review App. In your
deploy_reviewjob, add animageofubuntu:latest.deploy_review: stage: deploy image: ubuntu:latest -
Directly above the
scriptof thedeploy_reviewjob, add the followingbefore_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 update' - 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' -
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 update' - 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: http://$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_reviewand select Create branch. -
Select
index.js. -
Select Edit > Edit single file.
-
Update your
res.sendto 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, add an appropriate commit message and 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 lab, please submit your changes via Merge Request.
0c39f0dd)
