Deploying a Web App (2048 Game) with Azure App Service

I have recently started learning Azure, and to get more familiar I started playing around it a bit with some hands on labs. And today I have just made my first project

Task: Deploy and manage a scalable web application using Azure App Service

What did I use to build this environment?

• Visual Studio Code platform
• Azure Portal
• Azure CLI
• Git

To realize this project I had to go through a few steps:

Step 1: Set Up The Local Development Environment

I used Visual Studio Code as my local environment, I already had Git Installed and had to only add the Azure CLI Tools extension to be able to run some Azure CLI commands

After that I created a folder for my project and then cloned the 2048 Game Repository

git clone https://github.com/gabrielecirulli/2048.git cd 2048

Check the content of the repository:

To make sure I have an index.htmlfile and other necessary assets like CSS and JavaScript files.

Step 2: Create an Azure Web App

I prepared a file named 2048.azcli with all Azure CLI commands I need for this project

After login it does the following:

1. Create a Resource Group
2. Create an App Service Plan:
3. Create a Web App

Step 3: Deploy the 2048 Game to Azure

1. Set Up Azure Remote Repository:

az webapp deployment source config-local-git --name 2048WebApp --resource-group GameResourceGroup

• This command will return a Git URL.

2. Add Azure Remote Repository:

git remote add azure https://None@2048webapp.scm.azurewebsites.net/2048-webapp.git

3. Push Code to Azure:

git push azure master

I needed to fetch some credentials from my Azure portal

All done, It’s time to verify everything is working

Step 4: Verify The Deployment

I needed to go to Azure Portal again to get my web app domain address

I pasted the address into my browser

And Voila, It’s working as expected

I’ve successfully deployed the 2048 game to Azure. This process can be adapted for other web applications and games.

What else I could do? :

• Custom Domain: Configure a custom domain for my web app.
• SSL/TLS: Set up SSL/TLS for secure communication.
• Continuous Deployment: Integrate with GitHub Actions or Azure DevOps for continuous deployment.
• Scaling: Explore scaling options to handle more traffic.
• Monitoring: Set up monitoring and logging using Azure Monitor and Application Insights.