# YouTube App Deployment with GitLab CI/CD

In today's software development landscape, speed and reliability are paramount. Continuous Integration and Continuous Deployment (CI/CD) pipelines offer a way to automate and streamline your development and deployment processes. In this guide, we'll show you how to set up a complete CI/CD pipeline for a React YouTube app clone using GitLab.

Picture this: you're creating a YouTube-like platform where users can explore videos and channels. It's a fantastic project, but managing the development workflow can be complex. That's where GitLab CI/CD comes in, offering a straightforward and powerful solution to automate your work.

This step-by-step tutorial is for developers and tech enthusiasts looking to make their projects more efficient with CI/CD. By the end, you'll know how to set up a robust CI/CD pipeline, including automated testing, code quality checks, and secure containerization. Let's embark on this journey together and see how CI/CD can transform your development experience while building a React YouTube app clone.

Ready? Let's simplify CI/CD and make your development life easier!

### YouTube video:

[https://youtu.be/YHPvCB3IQdI](https://youtu.be/YHPvCB3IQdI)

Step 1: Create an API key for Youtube.

Step 2: Create a Repository and push it to GitLab.

Step 3: Launch an Ec2 instance and run Sonarqube on it.

Step 4A: Create a `.gitlab-ci.yml` File.

Step 4B: Add the required variables for the project.

Step 5: Install Gitlab Runner on Ec2.

Step 6: Run the Application on the Docker container.

Step 7: Access the Application on Browser.

### Step 1: Create an API key from Rapid API

Open a new tab in the browser and search for [**rapidapi.com**](http://rapidapi.com)

It will automatically provide your mail and select a mail to create an account

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697368283025/82ec778d-40b8-4ef3-87fd-a381877b0960.png?auto=compress,format&format=webp&auto=compress,format&format=webp align="left")

Account is created

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697368308756/c9a1edc4-05ed-4f97-8d68-fda0a5cc5f38.png?auto=compress,format&format=webp&auto=compress,format&format=webp align="left")

Now in the search bar search for YouTube and select YouTube v3

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697368349278/01d54b7a-5c5b-4582-bf13-f37863d7ee02.png?auto=compress,format&format=webp&auto=compress,format&format=webp align="left")

Copy API and save it for further use at the docker stage.

docker build --build-arg REACT\_APP\_RAPID\_API\_KEY=<mark>&lt;API-KEY&gt;</mark> -t ${imageName} .

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697368436144/4ccabe98-1f73-40c8-aba7-68c3034347ea.png?auto=compress,format&format=webp&auto=compress,format&format=webp align="left")

**Second way:**

Open a new tab in the browser and search for [**rapidapi.com**](http://rapidapi.com)

You will see the page like this and click on signUp

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699451440232/00f1e56f-2c2a-4fa7-8cc7-ff29d10108c3.png?auto=compress,format&format=webp align="left")

Now click on Sign Up with Google

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699451484458/58614730-2899-4ab2-9357-76abe1552dd9.png?auto=compress,format&format=webp align="left")

Select your mail here

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699451606357/481aba41-21a7-479a-9719-4965326ccb83.png?auto=compress,format&format=webp align="left")

It will automatically create your account now

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699451653280/6d2a0688-acfc-4926-85e0-3e4050887b20.png?auto=compress,format&format=webp align="left")

Now in the search bar search for YouTube and select YouTube v3

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697368349278/01d54b7a-5c5b-4582-bf13-f37863d7ee02.png?auto=compress,format&format=webp align="left")

Copy API and save it for further use at the docker stage.

docker build --build-arg REACT\_APP\_RAPID\_API\_KEY=<mark>&lt;API-KEY&gt;</mark> -t ${imageName} .

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1697368436144/4ccabe98-1f73-40c8-aba7-68c3034347ea.png?auto=compress,format&format=webp align="left")

### Step 2: Create a Repository and push it to GitLab

Go to [GitLab.com](http://GitLab.com) and login to your account

Click on New Project

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699451775243/90cda173-9382-410e-9c2d-272dec60ea7d.png?auto=compress,format&format=webp align="left")

Click on Create Blank Project

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699451838427/670ecd01-8c9e-4389-a015-8d15dafb2444.png?auto=compress,format&format=webp align="left")

Provide a name for the Project

Keep Visibility to the public

Uncheck the Readme and create the Project.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699451945375/06bcd85b-27f8-4060-ae9c-a83421361ded.png?auto=compress,format&format=webp align="left")

Use the below commands to push code to GitLab

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699452070613/5966ae99-4558-4ac7-ba11-5b44f36e66ca.png?auto=compress,format&format=webp align="left")

Files pushed to GitLab

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699452114770/1e4fdbb0-c5f2-4554-abd5-db824d5b7004.png?auto=compress,format&format=webp align="left")

### Step 3: Launch an Ec2 instance and run Sonarqube on it

**Log into AWS Console:** Sign in to your AWS account.

**Launch an Instance:**

Choose **"EC2"** from services. Click "Launch Instance."

**Choose an AMI:** Select an Ubuntu image.

**Choose an Instance Type:** Pick "t2.medium."

**Key Pair:** Choose an existing key pair or create a new one.

**Configure Security Group:**

Create a new security group. Add rules for HTTP, and HTTPS, and open all ports for learning purposes. Add Storage: Allocate at least 10 GB of storage.

**Launch Instance:** Review and launch the instance.

Access Your Instance: Use SSH to connect to your instance with the private key.

Keep in mind, that opening all ports is not recommended for production environments; it's just for educational purposes.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694159201292/35d8cf58-7ba8-4dc0-a1f8-9cc017439910.png?auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp align="left")

**Connect to Your EC2 Instance and install docker:**

Run the below commands to install the docker

```plaintext
sudo apt-get update
sudo apt-get install docker.io -y
sudo usermod -aG docker $USER   #my case is ubuntu
newgrp docker
sudo chmod 777 /var/run/docker.sock
```

After the docker installation, we will create a Sonarqube container (Remember to add 9000 ports in the security group).

Run this command on your EC2 instance to create a SonarQube container:

```plaintext
docker run -d --name sonar -p 9000:9000 sonarqube:lts-community
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694159658559/a607bab7-4ee0-4802-bf77-e9716ac33838.png?auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp align="left")

Now copy the IP address of the ec2 instance

```plaintext
<ec2-public-ip:9000>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694159822624/f07bd773-5992-4b88-b849-ffcea2891b8e.png?auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp align="left")

Enter username and password, click on login and change password

```plaintext
username admin
password admin
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694159867860/7425ab62-8978-4dbb-a5c5-d0eb3362c15f.png?auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp align="left")

Update New password, This is Sonar Dashboard.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694159887297/6e055b5c-13ea-405f-bc13-1234b05bf2ff.png?auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp align="left")

### Step 4A: Create a `.gitlab-ci.yml` File.

Now go to GitLab click on '+' and click on Newfile

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699452540234/1910a553-d454-4370-968c-bb078654a588.png?auto=compress,format&format=webp align="left")

File name `.gitlab-ci.yml`

Content

```plaintext
stages:
    - npm

Install dependecy:
    stage: npm    
    image:
        name: node:16
    script:
        - npm install
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699452609575/a9a0d794-a5c7-4501-8d9d-93f093441e8d.png?auto=compress,format&format=webp align="left")

Commit the changes and it will automatically start the build

Now click on Build and Pipelines

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699452738697/d2dfd55d-cae4-4c5c-876b-6da33b438b42.png?auto=compress,format&format=webp align="left")

Now click on Running.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699452805209/23c81d3b-531f-42ca-a320-bd8a6e056386.png?auto=compress,format&format=webp align="left")

Click on Install dependency

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699452923723/318afb5c-e74d-4104-a8df-07ff46372147.png?auto=compress,format&format=webp align="left")

You will build output

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699452985679/04534cfb-6397-47a1-92df-c7da376afb44.png?auto=compress,format&format=webp align="left")

Now add the Sonarqube stage to the pipeline

Go to the Sonarqube dashboard and click on Manually.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699453113737/703cb437-6072-4c62-b4f5-b3182244e91c.png?auto=compress,format&format=webp align="left")

Provide the name of the Project and click on Setup

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699453190201/9e10f50d-a125-41a8-b400-4b24b4df6944.png?auto=compress,format&format=webp align="left")

Select the CI tool as GitLab CI

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699453238357/cf6ae97a-a6fd-4d28-8a7e-0505cf3dc032.png?auto=compress,format&format=webp align="left")

Select Other because we are using the JS App

It will provide code and we need to create a file inside our repo

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699453308067/e9219457-2bba-4ca3-84c9-3933ec1092cf.png?auto=compress,format&format=webp align="left")

Go to Gitlab and click on + and Newfile

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699452540234/1910a553-d454-4370-968c-bb078654a588.png align="left")

Filename is `sonar-project.properties`

Paste the content that you got from Sonarqube

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699453515944/6a8cd5e1-80b4-4b72-9958-8c704182f741.png?auto=compress,format&format=webp align="left")

The file looks like this and click on commit changes

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699453557845/3badc428-61bc-40b8-b30b-d69b3b52f4c7.png?auto=compress,format&format=webp align="left")

Go to Sonarqube and click on continue

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699453614668/8ef310fb-7306-4863-9f0b-2eebf6d80ad0.png?auto=compress,format&format=webp align="left")

Now it will provide Variables to add to our GitLab

### Step 4B: Add the required variables for the project.

Variables Generated

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699454672224/22cea9c4-f102-44af-babb-4a4e1a5c77e7.png?auto=compress,format&format=webp align="left")

Now go to GitLab

Click on settings and CI/CD

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699454768899/f3f9475f-71f3-42ae-b980-c4f4d5799dc3.png?auto=compress,format&format=webp align="left")

Click on Expand in variables

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699454881700/a5d831b7-bdad-40fc-8860-7be1d14ae108.png?auto=compress,format&format=webp align="left")

Click on Add variable

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699454933773/f3a7406f-ff27-4e59-ad51-2b560c8b9514.png?auto=compress,format&format=webp align="left")

Now go back to Sonarqube and copy the Key

Click on Generate a token

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699455069519/8d9b9784-ee94-45f4-b31d-2fc489cb8fe1.png?auto=compress,format&format=webp align="left")

Again Click on Generate

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699455192574/d7b64024-d697-4994-bfcf-a1e992242864.png?auto=compress,format&format=webp align="left")

Copy the token

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699455122645/0fee8721-f955-4823-ad72-96fb76c81d06.png?auto=compress,format&format=webp align="left")

Now come back to GitLab and add them like the below image and click on add variable.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699455326754/a3e4c640-3d74-45c5-a384-c693b12762ae.png?auto=compress,format&format=webp align="left")

Sonar token is added

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699458436039/80e686d4-fb61-4290-ac95-c9cf10fe0bab.png?auto=compress,format&format=webp align="left")

Now go to the Sonarqube Dashboard again

Let's add another variable, copy them

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699458516421/555516f9-2dfa-432c-884f-a74940e1bbab.png?auto=compress,format&format=webp align="left")

Now go to GitLab and click on Add variable

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699458605982/ffec759c-7dae-40f5-a298-dd9d6ce8bbea.png?auto=compress,format&format=webp align="left")

Add the copied values like the below image

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699458655369/84b8e4c3-4521-4ff2-aa33-ec1dff726c0f.png?auto=compress,format&format=webp align="left")

Two variables were added.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699458724321/4d614a87-4c37-482b-98f0-de7f46311159.png?auto=compress,format&format=webp align="left")

Now go back to the Sonarqube Dashboard

Click on continue

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699458788856/9016e8c4-c62f-46fd-a3ba-c632ae12a52d.png?auto=compress,format&format=webp align="left")

It will provide and CI configuration file copy it and use it inside our `.gitlab-ci.yml` file

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699458903130/777eab4b-46a2-4cd9-897a-89d6ec124d08.png?auto=compress,format&format=webp align="left")

Now go back to GitLab and edit the `.gitlab-ci.yml` file

Full file (update with your content)

```plaintext
stages:
    - npm
    - sonar

Install dependecy:
    stage: npm    
    image:
        name: node:16
    script:
        - npm install    

sonarqube-check:
  stage: sonar
  image: 
    name: sonarsource/sonar-scanner-cli:latest
    entrypoint: [""]
  variables:
    SONAR_USER_HOME: "${CI_PROJECT_DIR}/.sonar"  # Defines the location of the analysis task cache
    GIT_DEPTH: "0"  # Tells git to fetch all the branches of the project, required by the analysis task
  cache:
    key: "${CI_JOB_NAME}"
    paths:
      - .sonar/cache
  script: 
    - sonar-scanner
  allow_failure: true
  only:
    - main
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699459068250/84f95e79-99a8-4555-9f45-4a7c2984f82e.png?auto=compress,format&format=webp align="left")

Commit changes and it will automatically start the build.

Click on Build --&gt; Pipelines

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699459257511/7b7ccfa3-db61-42ed-9d82-f95e682a2ef9.png?auto=compress,format&format=webp align="left")

Click on Running

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699459344571/90ced23e-eae2-4cd2-aa9b-fb13d54fd3a5.png?auto=compress,format&format=webp align="left")

Now click on Sonarqube-check

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699459388669/fcaeb85a-5339-43bb-8593-87e58846470f.png?auto=compress,format&format=webp align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706691995933/e3ff1093-bb4e-4bc7-8084-9742e7067185.png align="center")

Build output

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699459421037/66465bd9-851a-4624-bd5d-d27a60d64c42.png?auto=compress,format&format=webp align="left")

Now add the next stage of the Trivy file scan

Update the `.gitlab-ci.yml` file

```plaintext
stages:
    - npm
    - sonar
    - trivy file scan

Install dependecy:
    stage: npm    
    image:
        name: node:16
    script:
        - npm install    

sonarqube-check:
  stage: sonar
  image: 
    name: sonarsource/sonar-scanner-cli:latest
    entrypoint: [""]
  variables:
    SONAR_USER_HOME: "${CI_PROJECT_DIR}/.sonar"  # Defines the location of the analysis task cache
    GIT_DEPTH: "0"  # Tells git to fetch all the branches of the project, required by the analysis task
  cache:
    key: "${CI_JOB_NAME}"
    paths:
      - .sonar/cache
  script: 
    - sonar-scanner
  allow_failure: true
  only:
    - main

Trivy file scan:
  stage: trivy file scan
  image:
    name: aquasec/trivy:latest
    entrypoint: [""]
  script:
    - trivy fs .
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699459867536/6b14f916-3182-44ba-a2d6-efa6c2fbcbac.png?auto=compress,format&format=webp align="left")

Commit changes and go to pipeline stages

Click on the Trivy file scan

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699459993243/b8a4dff7-d8ac-458e-b9dd-23d567527a10.png?auto=compress,format&format=webp align="left")

Build output

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699460035893/569b64ca-54f5-4d18-8c57-0e0e41a6a168.png?auto=compress,format&format=webp align="left")

Add the Docker build and push stage

Before that Add docker credentials to GitLab Variables as secrets.

Go to the docker hub and create a Personal Access token

Click on your profile name and Account Settings

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699460746374/7c8409f6-5bd8-4536-b505-58e859e8c4c6.png?auto=compress,format&format=webp align="left")

Now click on Security --&gt; New Access Token

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699460814896/5b42c310-a512-4654-8463-10779d7b8fce.png?auto=compress,format&format=webp align="left")

Provide a name --&gt; Generate

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699460863720/a48f7f33-074a-4111-a066-5fc5e476031a.png?auto=compress,format&format=webp align="left")

Now copy the token and keep it safe

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699460932872/efa3e8bf-5fc1-47f4-a06c-e0e61305834b.png?auto=compress,format&format=webp align="left")

Now go back to Gitlab

Click on settings and CI/CD

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699454768899/f3f9475f-71f3-42ae-b980-c4f4d5799dc3.png align="left")

Click on Expand in variables

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699454881700/a5d831b7-bdad-40fc-8860-7be1d14ae108.png align="left")

Click on Add variable

Use your DockerHub username in value and Add variable

Key DOCKER\_USERNAME

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699461168875/b63c5f77-60d1-44b3-b955-691627c032f6.png?auto=compress,format&format=webp align="left")

Click on Add variable again

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699461254121/79877f0e-4100-4ad6-a527-901f1ac169dd.png?auto=compress,format&format=webp align="left")

Key DOCKER\_PASSWORD

For value use the Generated Personal Access token and add a variable.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699461312976/416d164b-296a-4fac-8b41-007643a60c6f.png?auto=compress,format&format=webp align="left")

Variables added.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699461412146/24f15467-af4d-4b2a-a8ec-00773b031e48.png?auto=compress,format&format=webp align="left")

Now add the below stage to the Configuration `.gitlab-ci.yml` file

Added Docker and Trivy image scan stages

```plaintext
stages:
    - npm
    - sonar
    - trivy file scan
    - docker
    - trivy image scan

Install dependecy:
    stage: npm    
    image:
        name: node:16
    script:
        - npm install    

sonarqube-check:
  stage: sonar
  image: 
    name: sonarsource/sonar-scanner-cli:latest
    entrypoint: [""]
  variables:
    SONAR_USER_HOME: "${CI_PROJECT_DIR}/.sonar"  # Defines the location of the analysis task cache
    GIT_DEPTH: "0"  # Tells git to fetch all the branches of the project, required by the analysis task
  cache:
    key: "${CI_JOB_NAME}"
    paths:
      - .sonar/cache
  script: 
    - sonar-scanner
  allow_failure: true
  only:
    - main

Trivy file scan:
  stage: trivy file scan
  image:
    name: aquasec/trivy:latest
    entrypoint: [""]
  script:
    - trivy fs . 

Docker build and push:
  stage: docker
  image:
    name: docker:latest
  services:
    - docker:dind   
  script:
    - docker build --build-arg REACT_APP_RAPID_API_KEY=f0ead79813mshb0aa7ddf114a7dap1adb3djsn483b017de1a9 -t youtubev1 .    
    - docker tag youtubev1 hassanb111/youtubev1:latest
    - docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD
    - docker push hassanb111/youtubev1:latest

Scan image:
  stage: trivy image scan
  image:
    name: aquasec/trivy:latest
    entrypoint: [""]
  script:
    - trivy image hassanb111/youtubev1:latest
```

Added stages

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699461630726/95375272-9cff-40ac-9314-ed7170081d1a.png?auto=compress,format&format=webp align="left")

Commit changes and it will automatically start building.

Go to Pipelines view

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699461750535/b0365c17-c9a0-4210-bd8b-5cccaee8350d.png?auto=compress,format&format=webp align="left")

Now click on Docker build and push

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699461833223/8e163651-aab9-4b3a-82dd-31afa34f2e13.png?auto=compress,format&format=webp align="left")

Build view

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699462049675/4e0692ac-1d73-4172-839d-aabe40656b3d.png?auto=compress,format&format=webp align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699462057276/407cc0f4-cd34-4536-9493-1608ec076939.png?auto=compress,format&format=webp align="left")

Go to Dockerhub and see the image

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699462100916/b8bea68b-1d89-4324-b722-249c0084a213.png?auto=compress,format&format=webp align="left")

Now come back to GitLab and click on Trivy image scan

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699462164271/8665eb18-3c89-4c7a-af46-a0898337a93d.png?auto=compress,format&format=webp align="left")

Output raw

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699462215958/0dc44340-f401-4db8-b895-c29239cd7ed2.png?auto=compress,format&format=webp align="left")

### Step 5: Install Gitlab Runner on Ec2

Go to GitLab and Click on Settings and CI/CD

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699454768899/f3f9475f-71f3-42ae-b980-c4f4d5799dc3.png align="left")

Click on Expand at Runners

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699496390091/debb391d-790a-44da-8e7e-05fa45a89d9a.png?auto=compress,format&format=webp align="left")

Click on Three dots and then click on Show Runner installation

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699496481444/b65ca11e-c3ed-482b-b88f-ca09de982e91.png?auto=compress,format&format=webp align="left")

Click on Linux and amd64 and copy the commands

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699496578546/89e00113-ad74-49e5-8429-8afbe613432e.png?auto=compress,format&format=webp align="left")

Now come back to Putty or Mobaxtreme

Create a new file

```plaintext
sudo vi gitlab-runner-installation
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699496723526/5171e599-9ef4-4ea6-85f1-22f10ebe94be.png?auto=compress,format&format=webp align="left")

Paste the below commands into it

```plaintext
# Download the binary for your system
sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64

# Give it permission to execute
sudo chmod +x /usr/local/bin/gitlab-runner

# Create a GitLab Runner user
sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash

# Install and run as a service
sudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
sudo gitlab-runner start
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699496847567/f7d6b7b4-8911-4716-a005-3fc9a40aea8e.png?auto=compress,format&format=webp align="left")

Provide executable permissions and run the script

```plaintext
sudo chmod +x <file-name>
./<file-name>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699496912602/8b0ce19c-9936-4af7-a31a-ef9bdff61ca6.png?auto=compress,format&format=webp align="left")

Installation completed

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699496951977/da63c9a2-7b9b-4704-8773-f48e6df332db.png?auto=compress,format&format=webp align="left")

Start the GitLab runner

```plaintext
sudo gitlab-runner start
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699497141540/d2f13a08-dbe8-4a69-b6cc-53d959a576b0.png?auto=compress,format&format=webp align="left")

Now run the below command or your command to register the runner

Update the token is enough

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699497176944/40784d71-02ec-4ea2-9a2a-a27bc2ef176e.png?auto=compress,format&format=webp align="left")

```plaintext
sudo gitlab-runner register --url https://gitlab.com/ --registration-token <token>
```

Provide the details for registering the runner

1. Provide Enter for [GitLab.com](http://GitLab.com)
    
2. For token we already added with token, so click on Enter again
    
3. Description as your wish
    
4. Tags also and you can use multiple tags by providing a comma after each tga
    
5. Maintenance note is just optional
    
6. For executors use Shell
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699497412725/c1a2fa03-a00f-4680-a063-9a7628a70c25.png?auto=compress,format&format=webp align="left")

Runner added successfully.

Start the GitLab runner

```plaintext
sudo gitlab-runner start
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699497141540/d2f13a08-dbe8-4a69-b6cc-53d959a576b0.png align="left")

Run the GitLab runner

```plaintext
sudo gitlab-runner run
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699497647142/86e76d77-d0c1-4f8f-b33c-235fccd872bf.png?auto=compress,format&format=webp align="left")

Go to GitLab and refresh the page once or click on Enable for this project

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699497778257/f644495c-f055-4248-9284-44170acd350d.png?auto=compress,format&format=webp align="left")

Now the runner is active and waiting for jobs

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699497860970/90704675-cf26-476e-988f-aa19d1a4839e.png?auto=compress,format&format=webp align="left")

Click on the Pencil mark to edit

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699497961772/47ae60e1-4bd3-44cb-9ed2-1ea5a54e206f.png?auto=compress,format&format=webp align="left")

Click on the Check box to indicate whether this runner can pick jobs without tags.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699498014680/42aeb192-53e8-4034-af22-dcd8f824a6e1.png?auto=compress,format&format=webp align="left")

Click on save changes.

### Step 6: Run the Application on the Docker container

Now edit the `.gitlab-ci.yml` file for the deploy stage

The complete file

```plaintext
stages:
    - npm
    - sonar
    - trivy file scan
    - docker
    - trivy image scan
    - run container

Install dependecy:
    stage: npm    
    image:
        name: node:16
    script:
        - npm install    

sonarqube-check:
  stage: sonar
  image: 
    name: sonarsource/sonar-scanner-cli:latest
    entrypoint: [""]
  variables:
    SONAR_USER_HOME: "${CI_PROJECT_DIR}/.sonar"  # Defines the location of the analysis task cache
    GIT_DEPTH: "0"  # Tells git to fetch all the branches of the project, required by the analysis task
  cache:
    key: "${CI_JOB_NAME}"
    paths:
      - .sonar/cache
  script: 
    - sonar-scanner
  allow_failure: true
  only:
    - main

Trivy file scan:
  stage: trivy file scan
  image:
    name: aquasec/trivy:latest
    entrypoint: [""]
  script:
    - trivy fs . 

Docker build and push:
  stage: docker
  image:
    name: docker:latest
  services:
    - docker:dind   
  script:
    - docker build --build-arg REACT_APP_RAPID_API_KEY=f0ead79813mshb0aa7ddf114a7dap1adb3djsn483b017de1a9 -t youtubev1 .    
    - docker tag youtubev1 hassanb111/youtubev1:latest
    - docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD
    - docker push hassanb111/youtubev1:latest

Scan image:
  stage: trivy image scan
  image:
    name: aquasec/trivy:latest
    entrypoint: [""]
  script:
    - trivy image hassanb111/youtubev1:latest

deploy:
  stage: run container
  tags:
    - youtube        #use your own tags 
  script:
    - docker run -d --name youtube -p 3000:3000 hassanb111/youtubev1:latest
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699498330575/911dcf06-c765-472d-9365-9deb15d40aa7.png?auto=compress,format&format=webp align="left")

Commit changes, it will automatically start to build

Click on Build --&gt; Pipelines

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699498482326/67580d52-ac14-4366-8311-486ca6992da3.png?auto=compress,format&format=webp align="left")

Click on Running

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699498530920/f1797acb-99b7-49cb-8a93-04841ac02027.png?auto=compress,format&format=webp align="left")

The last stage is added to the Pipeline

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699498599684/c6df4448-104e-4f6c-ad2c-47c89b0b2e3f.png?auto=compress,format&format=webp align="left")

If you get an error like this

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699502625809/10f5e76f-0f2a-4c1b-9476-c127137424cd.png?auto=compress,format&format=webp align="left")

Go to GitLab and click on deploy job

Let's see what is the error

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699502669596/c5411778-9bbc-42ce-8c2b-a6e4a43f587b.png?auto=compress,format&format=webp align="left")

If you get an error like this, click on that link

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699502747916/8fadd648-572e-44a7-a985-f875b2fcf2ec.png?auto=compress,format&format=webp align="left")

It will open a new tab and provide a solution for that

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699502840964/4e11fc1d-5470-4f3d-9409-b8aa87bb6bea.png?auto=compress,format&format=webp align="left")

Now go to Mobaxtreme and stop the Runner

Go to root and use the below commands

```plaintext
sudo su
sudo vi /home/gitlab-runner/.bash_logout
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699502967163/b6b738e4-55ef-47c2-9b11-b4161be5a892.png?auto=compress,format&format=webp align="left")

You will see file like this

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699503008404/5065157e-8f53-4b3e-8498-0be4ebeb725a.png?auto=compress,format&format=webp align="left")

Comment them

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699503040759/93a93949-7031-4514-9917-fa1af41d0841.png?auto=compress,format&format=webp align="left")

Save and exit from that file and restart GitLab runner

```plaintext
sudo gitlab-runner restart
exit #from root
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699506206570/47caec6b-d6e8-4be7-9e1f-6bed8c93b7b7.png?auto=compress,format&format=webp align="left")

Now start and Run the GitLab runner

```plaintext
sudo gitlab-runner start
sudo gitlab-runner run
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699506253690/007c6be8-483c-4d76-a15d-6119fcb539e7.png?auto=compress,format&format=webp align="left")

Now go to GitLab --&gt; Build --&gt; Pipelines

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699506271429/7fe88464-cb96-42a6-9f1c-f68f37eefe48.png?auto=compress,format&format=webp align="left")

Click on Run Pipeline

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699506297695/0a2bcc5f-70ea-421a-9bed-be6345fac5c7.png?auto=compress,format&format=webp align="left")

Again Click on Run Pipeline

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699506320815/c7cf6d9f-7064-4a58-a92d-b9ee5e7596ff.png?auto=compress,format&format=webp align="left")

Build completed and click on Deploy job

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699506355412/2565dc1a-c999-456e-a60c-e8f52f352a22.png?auto=compress,format&format=webp align="left")

See the output it ran a container on ec2

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699506386737/0a65db61-87c6-43be-abde-dfeb56ba45b3.png?auto=compress,format&format=webp align="left")

Now go to MobaXtreme or Putty and Provide the below command to see running containers.

```plaintext
docker ps
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699506425447/c92295b1-6c54-4f31-b826-48dd34ccda51.png?auto=compress,format&format=webp align="left")

Container running.

### Step 7: Access the Application on Browser

Copy the Public IP of the ec2 instance and paste it into the Browser.

Don't forget to open the 3000 port in the Security Group

```plaintext
<Public-ip:3000>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699506610475/7e8cca2c-b000-4cd4-8b4a-a706391a4bf5.png?auto=compress,format&format=webp align="left")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699506627834/248f2f9c-f58d-4c3f-8590-cc06133dfede.png?auto=compress,format&format=webp align="left")

### Step 8: Termination

1. Delete the personal Access token of the docker.
    
2. Delete the containers.
    
3. ```plaintext
      docker stop <container name>
      docker rm <container name>
    ```
    
4. Delete the Ec2 instance.
    

And there you have it, folks! You're now the DevOps master of your YouTube app deployment universe. We've journeyed through code, quality, security, containers, and automation, all with GitLab as our trusty sidekick. Now it's your turn to unleash the power of DevOps and take your YouTube app to the next level!

So, what's next on your development adventure? Whether it's conquering new projects, exploring even cooler tech, or simply celebrating with a well-deserved coffee break, remember that DevOps is all about making your life easier and your code better. Embrace the joy of seamless deployments, keep learning, and never stop having fun in the ever-evolving world of software development. 🚀😎

If you enjoyed this Blog, don't forget to hit that like button, share with your fellow tech enthusiasts, and subscribe for more exciting DevOps adventures. And as always, stay curious, stay creative, and keep coding with a smile! 😄✨