Deploy a Next.js Application on Azure Web App ( Part 1)

Today, we are going to deploy a very simple web application build using Next.JS framework on Microsoft Azure Web App. This blog is split into two parts - Part 1: covers local web app development and deployment to azure web app using local machine. Part 2: covers deployment using Gitlab CI

Prerequisites

Before starting, ensure you have the following prerequisites:

• Azure Account Subscription: If you don't have one, you can sign up for a free account here.

• Node.js and NPM: Make sure Node.js and NPM are installed on your local machine. Download them here.

• Git and Azure CLI: Install Git and the Azure CLI. Git can be found here and Azure CLI here.

• Docker: You’ll need Docker for building and running your Next.js app in a container. Get it here. (It is optional, we can build image directly on azure also)

Table of Contents

• Setup Boilerplate Repo
• Build Docker Image (optional)
• Create an Azure Web App
• Deploy Web App using Azure CLI

Step 1: Setup Repository

To get started, you'll first need to set up a Next.js boilerplate application. If you don't already have one, you can quickly clone a Next.js app (refer here) with the following steps:

Open your terminal and run the following commands:

 git clone https://github.com/guptagaurav89/nextjs-boilerplate

 cd nextjs-boilerplate

 npm install

 npm run build

 npm run start

Step 2: Build Docker Image 

Next, we’ll create a Docker container for our Next.js application. While this step is optional, it allows you to run your Next.js app in a self-contained environment. Cloned repo already has a Dockerfile as below

# Use the official Node.js image as the base

FROM node:20-alpine AS builder

# Set working directory

WORKDIR /app

# Copy package.json and package-lock.json

COPY package.json package-lock.json ./

# Install dependencies

RUN npm install

# Copy the rest of the application

COPY . .

# Build the application

RUN npm run build

# Use a minimal Node.js runtime for production

FROM node:20-alpine AS runner

WORKDIR /app

# Copy the built Next.js app from the builder stage

COPY --from=builder /app ./

# Set environment variables

ENV NODE_ENV=production

EXPOSE 3000

# Start the application

CMD ["npm", "run", "start"]

Build the Docker image using the following command:

docker build -t my-nextjs-app .

To test the Docker container locally, run:

docker run -p 3000:3000 my-nextjs-app

Visit http://localhost:3000 in your browser, and you should see your Next.js app running inside the container.

Step 3: Create an Azure Web App

1. Go to the Azure Portal and log in to your account.

2. Navigate to "App Services" and click "Create." Choose "Web App".

3. Select your Subscription and Resource Group.

4. Enter a unique name for your Web App (e.g., my-next-webapp).

5. Choose Publish type as "Container". For the Operating System, select "Linux."

6. Select an Azure Region to deploy.

7. Create new pricing plan for App Service. Choose Free tier or Basic for demo purpose.

8. Click "Review + Create" and then "Create" to deploy the web app.

Once deployment is succeeded. Click "Go to resource". In overview section, click on Default domain, it will open your web app in new tab. It will display default azure web app static page.

Step 4: Deploy Web App using Azure CLI

Go back to your terminal and login to azure

az login

Create an Azure Container Registry to deploy Docker image:

az acr create --resource-group myResourceGroup --name myacr --sku Basic

Build Docker image directly on ACR using below step:

az acr build --registry myacr --image myacr.azurecr.io/my-nextjs-app:latest .

If Docker is available on local machine, build image locally and push to ACR.

az acr login --name myacr

docker push myacr.azurecr.io/my-next-app:latest

Next, we configure the Docker image path for our web app. 

1. Go to Azure Web Console, Open Web App created from All Resources.

2. Navigate to Deployment -> Deployment Center.

3. Choose "Azure Container Registry" for the Container Image Source.

4. Select your previously created ACR (myacr).

5. Select the repository and tag (e.g., my-next-app:v1) and Save.

Cybersecurity Essential: OpenSSL

In today’s digital landscape, securing data is paramount. Whether you’re building web applications, managing servers, or developing software that handles sensitive information, understanding cryptography is essential. OpenSSL is a powerful toolkit that software engineers can leverage for a variety of cryptographic functions. In this blog, we’ll explore what OpenSSL is, its core functionalities, and how you can effectively use it in your projects.

What is OpenSSL?

OpenSSL is an open-source implementation of the SSL and TLS protocols. It provides libraries for secure communication and a suite of command-line tools for performing various cryptographic operations, such as encryption, decryption, certificate management, and generating keys. Its versatility makes it a staple for software engineers and system administrators alike.

Core Features of OpenSSL

1. Encryption and Decryption: OpenSSL allows you to encrypt and decrypt files and data using various algorithms, including AES, DES, and RSA.
2. Certificate Management: It helps in creating, signing, and managing SSL/TLS certificates, which are crucial for secure web communications.
3. Hashing: OpenSSL provides functions for generating cryptographic hashes using algorithms like SHA-256 and MD5, which are essential for data integrity checks.
4. Key Generation: You can generate secure keys for symmetric and asymmetric encryption, ensuring that your cryptographic operations are based on strong keys.
5. Support for Protocols: OpenSSL supports various secure protocols such as HTTPS, FTPS, and more, allowing for secure data transmission.

Getting Started with OpenSSL

Installation

OpenSSL is available on most operating systems. You can install it via package managers or build it from source. 

• On macOS:

brew install openssl

• On Ubuntu:

sudo apt-get install openssl

• On Windows: You can download a precompiled binary or build it from source using tools like Cygwin or MinGW. OpenSSL is usually installed with Git, inside Git install directory under /usr/bin folder.

Basic Commands

Here are some common OpenSSL commands that software engineers will find useful:

1. Encrypting and Decrypting Files

To encrypt a file using AES-256-CBC:

    

    openssl enc -aes-256-cbc -salt -in plaintext.txt -out encrypted.bin

To decrypt the file:

    openssl enc -d -aes-256-cbc -in encrypted.bin -out decrypted.txt -k yourpassword

2. Generating RSA Keys

Generate a private key:

    openssl genpkey -algorithm RSA -out private_key.pem -pkeyopt rsa_keygen_bits:2048

Extract the public key from the private key:

    openssl rsa -pubout -in private_key.pem -out public_key.pem

3. Creating a Self-Signed Certificate

To create a self-signed SSL certificate:

    openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout key.pem -out cert.pem

This command generates both a private key and a self-signed certificate valid for 365 days.

4. Hashing Data

To create a SHA-256 hash of a file:

    openssl dgst -sha256 yourfile.txt

Integrating OpenSSL in Software Projects

OpenSSL can be integrated into software projects in various ways, including:

• Secure Socket Layer: Use OpenSSL libraries to establish secure connections in applications.
• Data Encryption: Implement file encryption and decryption in your applications to protect sensitive data.
• SSL/TLS Certificates: Manage certificates programmatically for web servers or APIs.
• API Security: Use OpenSSL for signing and verifying JSON Web Tokens (JWT) or other authentication tokens.

Conclusion

OpenSSL is an invaluable tool for software engineers, providing the means to implement secure communications and protect sensitive data. By mastering its command-line tools and libraries, you can enhance the security of your applications and build trust with your users. Whether you’re encrypting files, managing certificates, or establishing secure connections, OpenSSL equips you with the essential capabilities to navigate the complex world of cryptography confidently.

Content inspired using ChatGPT.

Top AI Tools

Download and Install Python

Download and Install Pycharm

Install Jupyter

> pip install jupyter

Install Transformers

> pip install transformers

> pip install transformers[sentencepiece]

Install Pytorch (Preferred for dev)/TensorFlow (preferred for prod)

> pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118

MongoDb CheatSheet

CRUD Operations:

Create: 

db.products.insert({item:"TV",aqty:200,soldqty:1200,avail:true})

db.createCollection("Name")

Read:

db.products.find({<Condition>},{<Projection>})

Get single document - db.products.findOne()

Get all documents - db.products.find()

Get documents based on filters - db.products.find({aqty:0})

Get documents with particular fields - db.products.find({aqty:0},{item:1,soldqty:1})

Reading the data with limit(), sort(), skip() functions:

db.products.find().sort({aqty:1}).limit(5)

db.products.find().sort({aqty:1}).skip(5)

Operators: in, ne, nin, lt, gt, lte, gte, or, and

IN -  db.products.find({aqty:{$in:[0,200]}})

Less Than & And - db.products.find({aqty:{$lt:200},soldqty:1800})

OR - db.products.find({$or:[{aqty:200},{soldqty:3000}]}) 

        db.products.find({$or:[{aqty:{$lt:200}},{soldqty:{$gt:1800}}]})

Update:

add/update property - db.products.updateMany({},{$set:{price:100}})

remove property - db.products.updateMany({}, {$unset: {price: 0}})

Delete:

collection - db.test.drop()

single row - db.products.deleteOne({item:'TV'})

multiple row - db.products.deleteMany({prices:{$lt: 200}})

all rows - db.products.deleteMany({})

Indexes:

db.products.createIndex({price:1})

Aggregation:

https://www.mongodb.com/developer/products/mongodb/cheat-sheet/

Deep Dive in Asynchronous Programming in Javascript

JavaScript is single threaded language. 

Synchronous programming is execution of functions in order.

Asynchronous programming is executing a long running process outside the main thread. It does not block code execution on main thread. Although it is achieved usually by running asynchronous function on separate thread. Though javascript is a single threaded language it supports aysnchronous behaviour, to understand how we need to understand JS runtime.

 

What is makefile and how to use it.

A Makefile is a special file used in Unix and Unix-like operating systems to automate the building and compilation of programs or projects. It contains a set of rules and dependencies that specify how to build a target, typically an executable program or a collection of files.

.SILENT:

all: first second last

# .DEFAULT_GOAL:= last

first:

    echo "hello world"

second:

    echo "hello Gaurav"

last:

    echo "hello world Gaurav"

 

Refer here for more details

Setup Minikube on Windows using WSL

 curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64

sudo install minikube-linux-amd64 /usr/local/bin/minikube

Start a cluster - 

minikube start

Start second cluster -

minikube start -p cluster2

List all minikube cluster running:

minikube profile list

Set second cluster as current profile-

Kubectl:

Set kubectl alias to run kubectl commands for minikube if kubectl is not installed locally:

alias kubectl="minikube kubectl --"

View kubernetes config:

kubectl config view

To access minikube from windows command prompt - 

Update kube config file as per config on WSL running minikube

apiVersion: v1

clusters:

- cluster:

    certificate-authority: \\wsl.localhost\Ubuntu\home\gaugupta\.minikube\ca.crt

    server: https://127.0.0.1:49159

  name: cluster2

- cluster:

    certificate-authority: \\wsl.localhost\Ubuntu\home\gaugupta\.minikube\ca.crt

    server: https://127.0.0.1:49154

  name: minikube

contexts:

- context:

    cluster: cluster2

    user: cluster2

  name: cluster2

- context:

    cluster: minikube

    user: minikube

  name: minikube

current-context: cluster2

kind: Config

preferences: {}

users:

- name: cluster2

  user:

    client-certificate: \\wsl.localhost\Ubuntu\home\gaugupta\.minikube\profiles\cluster2\client.crt

    client-key: \\wsl.localhost\Ubuntu\home\gaugupta\.minikube\profiles\cluster2\client.key

- name: minikube

  user:

    client-certificate: \\wsl.localhost\Ubuntu\home\gaugupta\.minikube\profiles\minikube\client.crt

    client-key: \\wsl.localhost\Ubuntu\home\gaugupta\.minikube\profiles\minikube\client.key

Then

>kubectl config use-context minikube

>kubectl get pods