How to Deploy a JavaScript Tetris-Game-App on Azure CICD Pipeline and App Service

8 min readDec 21, 2023

How to Deploy a JavaScript Tetris-Game-App on Azure CICD Pipeline and App Services. (Azure Project)

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

In this project, we will attempt to deploy a JavaScript based game app. At the end of this project we should be able to play the actual game and be able to understand the steps needed in deploying similar apps in production.

Steps needed.

Step 1 — Create ACR
Step 2 — Create a new project in Azure Devops
Step 3 — Create 2 service connections in Azure devops (acr and github)
Step 4 — Create build pipeline and run the job
Step 5 — Create Azure Webapp Container
Step 6 — Create release pipeline
Step 7 — Verify CICD pipeline by adding a new feature to the app.

Objectives:

Able to create and deploy apps with azure cicd pipeline.
Understand the use of azure portal and azure devops

Pre-requisites:

You must have an azure account and azure devops subscription.
You must have basic knowledge of docker and how to create Dockerfile.
You must have basic Javascript knowledge.

Now, lets move to the first step of this project.

Step 1 — Create Azure Container Registry:

How to create Azure Container Registries

a. Login into the Azure Portal and create an Azure Container Registry. https://portal.azure.com/

b. Search for Container Registryon the search bar.

c. Note: If you don’t have a resource group yet you may have to create it first. Click on Create and fill in the details as shown above. After filling in the details, click on Review and Create

d. Wait for the resource to finish deploying, Click go to resource > on the left menu click on Access Keys > Check Admin user

The Access Keys in Container Registries is essential for the security and proper functioning of our Containerized apps. It is typically used for authentication and authorization when interacting with the CR.

Step 2 — Create a new project in Azure Devops:

Creating a project in Azure DevOps serves as an organizational unit that helps you manage and organize your work, source code, builds, releases, and other aspects of your software development lifecycle.

a. Go to dev.azure.com

b. Click on Create New Project on the top right corner.

c. Input your project name and other details

d. Click Create

Step 3 — Create 2 service connections in Azure devops (ACR and GitHub)

Service Connections helps to manage authentication and integrate with external services. They help to enhance security, simplify configuration, and contribute to the overall efficiency of CI/CD pipelines and other automation processes within the development lifecycle.

We will be creating two service connections. One is for the GitHub (because of our code is stored in GitHub) we need to establish a connection that can authenticate to it. Second is for the service connection that authenticates to our docker image repo located inAzure Container Registry.

To create the Service Connections that authenticates to our code in GitHub.

a. From the project page, scroll down on the left menu. Click on Project settings

b. When the page opens up, scroll down and click on Service connections still on the left menu.

c. Click on Create your first service connection if this is your first, else.. click on New service connection .

d. Search for GitHub or scroll down to find it. Click on the OAuth configuration and select AzurePipeline . Click Authorize

e. Type in the name of your service connections. Fill in the details as required or as shown in the gif image above. Click Save

NOTE: Make sure to check the Grant access permission to all pipelines .

To create the Service Connections that authenticates to our docker image in the ACR repo.

a. Click on New service connection

b. Search for docker registry or scroll down to find it. Select it and Click Next .

c. At the top of the page, select Azure Container Registry as the registry type.

d. For authentication type, select Service Principal , the subscription should automatically be inputted if not, select it

e. In the next field, Select the name of your Azure Container Registry.

f. Optional, type in your service connection name . Check the Grant access permission to all pipelines and click Save .

Granting access permissions when creating a service connection in Azure Pipelines is a crucial security and governance practice. It ensures that the service connection is properly authenticated, authorized, and aligned with the principle of least privilege, contributing to a secure and controlled integration between Azure DevOps and external services.

Step 4 — Create build pipeline and run the job

In this section we are going to build a docker image and push the image to the container registry created earlier. Our Dockerfile is located in Github. Here is the GitHub repo if you’d like to use the same code as I did. https://github.com/ougabriel/tetris-game-app.git.

How to build and push image to azure container registry

a. From the left menu, click pipeline , in the open page you have to click Create pipeline

b. CONNECT, the GitHub repo. Click on GitHub (yaml) from the list

c. SELECT, the repo from the list. In this case I selected the repo ougabriel/tetris-game-app .

d. CONFIGURE, select from the list with the details Docker (Build and push image to azure container registry)

> Select your subscription, click Continue

> From the drop-down menu, select your container registry which was created earlier. | The image name will be automatically populated or you can give it your own name. | Leave Dockerfile section as default

> Click Validate and configure ( the yaml file will be configured)

e. REVIEW, leave the azure-pipelines.yml file as default. We won’t be changing anything here. Click Save and run

NOTE: After the build, go to the azure portal > open the ACR created earlier > Scroll down to repositories to see the new docker image.

Go to your GitHub repo page to see the azure-pipelines.yml file which has been added.

Step 5 — Create Azure Webapp Container

Since, we have already deployed our docker image. Next, we will attached this image to an Azure WebApp. When this is attached, the image is deployed into it and then we can interact with the Tetris game.

a. Navigate to App Services:

In the Azure portal, click on Create a resource, and choose “Web App.”

b. Configure Web App Basics:

In the “Basics” tab of the Web App creation wizard:

Choose a unique App name. > Select your subscription. > Create or select a Resource Group. > Choose an Operating System (Linux). > Choose a Region. > Select a Runtime Stack (e.g., Node.js, Python, .NET Core). > Choose the Docker Containeroption under Publish.

c. Configure Container:

In the “Container” section of the wizard > Choose Single container >Provide the Image Source (choose the ACR where your image is located).

d. Configure App Service Plan:

In the “App Service Plan” section:

Create a new App Service Plan or select an existing one. > Choose the SKU (size) of the plan based on your requirements.

e. Configure Monitoring and Management: (Leave as default)

f. Review your configurations, and click on the “Review + create” button.

Step 6 — Create release pipeline

a. From the menu Click “Pipelines” section and select “Releases” from the sub-menu.

b. Create a New Release Pipeline >

c. In the pop window. We can either choose empty job but for the sake of this project, select Azure App Service deployment

A release pipeline typically consists of one or more stages, such as “Dev,” “Test,” and “Production.” Define the stages that represent your deployment workflow. In this project we will use the default which is stage 1

d. Add Artifacts:

Link the artifacts produced by build pipeline which we did earlier to the release pipeline. Click on “Add an artifact” and select the source type.

Click on the thunderbolt and enable Continuous deployment trigger (this will ensure any changes made on the code will automatically be triggered)

e. Add Stage configuration.

click on the 1job 1task as shown in the image above. > Select your subscription > for app type select WebApp for Containers (Linux) > for app service name select the name of your WebApp which was created earlier. > for registry name copy and paste the url of your ACR. > for the repo go back to the azure portal on the left menu, select the repo and paste the name on the given field

f. Click Save and then click Create release > Once the deployment is done, you can view the logs. and other details as shown above.

Step 7 — Verify CICD pipeline by adding a new feature to the app.

In this section, We are going to test our release pipeline trigger. To do this we are going to edit the Lets Play section of the code; and then change its present value to a different color such as yellow or green or blue.

How to edit a code and trigger the release pipeline

a. There are several ways to do this, however I will be using the vscode.

b. Clone the repo git clone https://github.com/ougabriel/tetris-game-app.git

> CD into the directory cd tetris-game-app > edit the lets play part of the code nano tetris.js (press ctrl w to search and ctrl o to write)

> Stage the edit git add .

> Commit the edit git commit -m “Changed the lets play font colour to yellow”

> Push the code git push -u origin main

Conclusion:

I hope this project has been of a great help to you, if you do have any questions or recommendations please leave a comment and I will be glad to respond to you.

To delete the deployment

Delete the resource group(this will delete all services and deployment within it)
In the azure devops page delete the project by scrolling down to project settings

Related topics:

Deploy a .NET Application using Azure CI/CD Pipeline

References:

Ashfaque-9x

#devops #devopsprojects #azureprojects #azure #tech #gabrielokom #docker #javascriptproject #cicd #pipeline #azuredevopsproject #azuredevops