Getting Started with Cloud: Dockerizing and Deploying a “Hello-World” Next.js App to Azure App Service Using GitHub Actions

Welcome to the world of cloud computing! Whether you’re new to cloud or just looking to get your feet wet with a hands-on project, this guide is designed to help you understand the basics and practically guide you through deploying a simple “hello-world” Next.js application to Azure App Service using Docker and GitHub Actions.

By the end of this post, you’ll have a better understanding of cloud deployment, Docker, and continuous integration/continuous deployment (CI/CD) pipelines using GitHub Actions.

Table of Contents

1. What is Cloud Computing?
2. Introduction to Docker
3. Setting Up Your Development Environment
4. Creating a Simple Next.js “Hello-World” App
5. Dockerizing the Next.js App
6. Testing the Dockerized App Locally
7. Setting Up GitHub Actions for CI/CD
8. Deploying the App to Azure App Service
9. Configuring a Custom Domain (Optional)
10. Summary and Next Steps

1. What is Cloud Computing?

Cloud computing allows you to use computing resources over the internet instead of relying solely on your local machine. This means you can deploy, scale, and manage applications on servers managed by cloud providers like Microsoft Azure, Amazon Web Services (AWS), or Google Cloud Platform (GCP).

In this guide, we’ll focus on Microsoft Azure, one of the leading cloud platforms, and show you how to deploy an application to Azure App Service, a platform-as-a-service (PaaS) offering that makes it easy to host web apps.

2. Introduction to Docker

Before we dive into deploying your app to the cloud, let’s talk about Docker. Docker is a tool that allows you to package your application and its dependencies into a standardized unit called a “container.” Containers are lightweight, portable, and ensure that your app runs consistently across different environments.

Key Docker Concepts:

• Dockerfile: A text file that contains instructions for building a Docker image.
• Docker Image: A snapshot of your application, including all necessary dependencies.
• Docker Container: A running instance of a Docker image.

3. Setting Up Your Development Environment

Prerequisites

Before starting, ensure you have the following installed on your local machine:

• Node.js: Required to run and build Next.js applications.
• Docker Desktop: Available for Windows, macOS, and Linux. Download it from Docker’s official site.
• Visual Studio Code (VS Code): A code editor that works well with Docker and GitHub Actions.
• GitHub Account: You’ll need this to set up GitHub Actions.

Verify Your Setup

Node.js: Open a terminal and check if Node.js is installed by running

node -v 

If Node.js is not installed, download and install it from Node.js official site.

Docker: Verify that Docker is running by opening a terminal and typing

docker --version 

If Docker is not running, start Docker Desktop.

4. Creating a Simple Next.js “Hello-World” App

Let’s create a basic Next.js app to work with.

Open your terminal and create a new Next.js app

npx create-next-app hello-world-app
cd hello-world-app

Open the project in VS Code

code .

Modify the default pages/index.js file to display “Hello World” on the homepage

export default function Home() {
  return (
    <div>
      <h1>Hello World!</h1>
      <p>Welcome to your first Next.js app.</p>
    </div>
  );
}

Run the app locally to see it in action

npm run dev

Visit http://localhost:3000 in your browser. You should see “Hello World!” displayed.

5. Dockerizing the Next.js App

Now, let’s package the Next.js app into a Docker container.

Create a Dockerfile

A Dockerfile defines the steps Docker should take to build an image of your app.

In the root of your hello-world-app directory, create a file named Dockerfile (no extension) and add the following content

# Step 1: Build the Next.js app
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Step 2: Run the Next.js app
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app ./
EXPOSE 3000
CMD ["npm", "start"]

Create a .dockerignore file:This file tells Docker which files and directories to ignore when building the image

node_modules
npm-debug.log
.git

6. Testing the Dockerized App Locally

Before deploying to the cloud, let’s test the Docker container on your local machine.

Build the Docker Image:Open a terminal and run the following command to build the Docker image

docker build -t hello-world-app .

Run the Docker Container:After the image is built, run it using the following command

docker run -p 3000:3000 hello-world-app

Test the Application:Visit http://localhost:3000 in your browser. If everything is set up correctly, you should see the “Hello World!” message.

7. Setting Up GitHub Actions for CI/CD

GitHub Actions allows you to automate the process of building, testing, and deploying your application whenever you push changes to your repository.

Set Up the Workflow

1. In your project directory, create a new folder named .github/workflows.
2. Inside the workflows folder, create a file named ci-cd.yml with the following content:yaml

name: Build and Deploy Next.js App

on:
  push:
    branches:
      - main  # Trigger on push to the main branch

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2

      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push Docker image
        uses: docker/build-push-action@v4
        with:
          context: .
          file: ./Dockerfile
          push: true
          tags: ${{ secrets.DOCKERHUB_USERNAME }}/hello-world-app:latest

      - name: Deploy to Azure App Service
        uses: azure/webapps-deploy@v2
        with:
          app-name: my-nextjs-app
          slot-name: production
          publish-profile: ${{ secrets.AZURE_PUBLISH_PROFILE }}

Setting Up GitHub Secrets

You’ll need to add some secrets to your GitHub repository:

1. DOCKERHUB_USERNAME: Your Docker Hub username.
2. DOCKERHUB_TOKEN: Your Docker Hub access token or password.
3. AZURE_PUBLISH_PROFILE: This is a file you download from the Azure portal that contains deployment credentials.

To add secrets:

• Go to your GitHub repository.
• Navigate to Settings > Secrets and variables > Actions.
• Add the above secrets.

8. Deploying the App to Azure App Service

Now, let’s deploy your Dockerized app to Azure.

1. Set Up Azure App Service

1. Login to Azure:Open your terminal and log in to Azure

az login

1. Create a Resource Group:A resource group is a container that holds related resources for an Azure solution

az group create --name myResourceGroup --location eastus

1. Create an Azure App Service Plan:An App Service plan defines the region, instance size, and scaling options for your web app

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1 --is-linux

1. Create a Web App:Create a web app within the App Service plan

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name my-nextjs-app --deployment-container-image-name yourdockerhubusername/hello-world-app:latest

2. Deploy Using GitHub Actions

Now that everything is set up, push your code to GitHub. The GitHub Actions workflow you created will automatically build, push, and deploy your app to Azure App Service.

9. Configuring a Custom Domain (Optional)

Configuring a custom domain allows you to use your own domain name (e.g., www.yourdomain.com) instead of the default Azure-provided URL (e.g., my-nextjs-app.azurewebsites.net). Here’s how to set it up:

Step 1: Purchase a Domain Name

If you don’t already have a domain name, you’ll need to purchase one from a domain registrar like Namecheap, GoDaddy, or any other registrar.

Step 2: Configure DNS Settings

1. Log in to your domain registrar’s dashboard.
2. Find the DNS settings for your domain.
3. Add a CNAME record that points your custom domain (e.g., www.yourdomain.com) to your Azure web app’s default domain (e.g., my-nextjs-app.azurewebsites.net).
   • Name: www (or @ if you’re setting up a root domain)
   • Type: CNAME
   • Value: my-nextjs-app.azurewebsites.net
4. Save the DNS settings. DNS changes may take a few minutes to propagate.

Step 3: Configure the Custom Domain in Azure

1. Go to the Azure Portal and navigate to your Web App.
2. Select “Custom domains” from the left-hand menu.
3. Click on “Add custom domain”.
4. Enter your custom domain name (e.g., www.yourdomain.com) and click “Validate”.
5. Verify ownership by following the instructions provided. This typically involves adding a TXT record to your domain’s DNS settings.
6. Once validated, click “Add” to link your custom domain to your Azure Web App.

Step 4: Secure Your Domain with HTTPS

1. In the Azure Portal, go to your Web App.
2. Select “TLS/SSL settings” from the left-hand menu.
3. Click on “Private Key Certificates (.pfx)” and then click “Create App Service Managed Certificate”.
4. Select your custom domain from the list.
5. Click “Create” to generate and assign a free SSL certificate to your custom domain.

Once the certificate is generated and assigned, your custom domain will be accessible over HTTPS.

10. Summary and Next Steps

Congratulations! You’ve successfully Dockerized a Next.js “Hello-World” app, tested it locally, and deployed it to Azure App Service using GitHub Actions. You’ve also learned how to configure a custom domain and secure it with HTTPS.

What You’ve Learned:

• Cloud Basics: Understanding the fundamentals of cloud computing and how it applies to your projects.
• Docker: How to create Docker images and run containers locally.
• GitHub Actions: Automating CI/CD pipelines to build, push, and deploy applications.
• Azure App Service: Deploying web applications to a managed cloud service.
• Custom Domains and SSL: Configuring custom domains and securing them with HTTPS.

Next Steps

Now that you’ve deployed a simple Next.js app, here are some ideas for what you could explore next:

1. Advanced Docker Usage: Learn more about Docker Compose and multi-stage builds to optimize your Docker images.
2. Environment-Specific Configurations: Implement environment variables to manage different configurations for development, staging, and production.
3. Monitoring and Logging: Set up monitoring and logging for your app using Azure Monitor or other tools.
4. Scaling and Performance: Explore how to scale your app using Azure’s built-in scaling features and optimize its performance.
5. CI/CD Enhancements: Add testing and linting steps to your GitHub Actions workflow to ensure code quality before deployment.

Cloud computing is a vast field with endless opportunities for learning and growth. Keep experimenting, building, and deploying, and you’ll continue to expand your skillset in this exciting area.

Happy coding! 🚀