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. We will do this work on a separate review-app branch, so that the main branch keeps the search code and tests used in later labs.
-
Navigate to your project repository.
-
Select Code > Branches.
-
Select New branch.
-
Set the branch name to
review-app, leave Create from set tomain, and select Create branch. -
Select Build > Pipeline Editor, and set the branch to review-app.
-
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 theinstall deps,test binarysearchand thetest linearsearchjobs from the file. Remove the jobs from the.gitlab-ci.ymlfile, and select Commit changes. -
Navigate back to your project repository, and set your branch to review-app.
-
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 to the
review-appbranch.
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, and set your branch to the review-app branch.
-
Select Build > 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. The SSH private key is stored in a variable named SSH_PRIVATE_KEY. This key is added to the SSH agent to use for connections to the remote server: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 delete index || true' - ssh root@$ip 'pm2 start /www/index.js --name index' -
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 delete index || true' - ssh root@$ip 'pm2 start /www/index.js --name index' 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_review, set Create from toreview-app, and select Create branch. -
Create a merge request for this branch. Set the target branch to
review-app. -
Once you have created this, open the Web IDE from the merge request by selecting Code > Open in Web IDE
-
Select your
index.jsfile. -
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 the source control icon. Enter a commit message, then click the Commit and push to… button to commit your code change.
-
Wait for the pipeline to complete.
-
Open your merge request.
-
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 this lab, please submit your changes through a Merge Request.
11012bf3)
