Introduction

Deploying a full-stack application can feel complex, especially for beginners. You have frontend code, backend code, dependencies, servers, and deployment steps to manage. This is where Docker and GitHub Actions make life much easier.

In simple terms, Docker helps you package your application so it runs the same way everywhere, and GitHub Actions helps you automate deployment whenever you push code. Together, they enable you to deploy applications faster, with fewer errors and less manual work.

In this article, we will walk through deploying a full-stack application using Docker and GitHub Actions, explained in plain language with practical examples.

What Is a Full Stack Application?

A full-stack application usually has two main parts:

Example: An online shopping app where users browse products on the frontend, and the backend handles login, orders, and payments.

Why Use Docker for Deployment?

Docker allows you to package your application and all its dependencies into containers. This ensures that the app runs the same on your laptop, testing server, and production server.

Key benefits of Docker:

Example: A backend API running in Docker will behave the same on any server that supports Docker.

What Is GitHub Actions?

GitHub Actions is a CI/CD tool built directly into GitHub. It allows you to automate tasks like building code, running tests, creating Docker images, and deploying applications.

In simple terms:

This saves time and reduces human errors.

High-Level Deployment Flow

Before going into details, let us understand the overall flow.

This entire process happens automatically once it is set up.

Step 1: Prepare the Full Stack Application

Your project should have a clear structure.

Example structure:

Make sure the frontend and backend can run independently before containerizing them.

Step 2: Create Dockerfile for Backend

A Dockerfile tells Docker how to build an image for your application.

Example backend Dockerfile:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5000
CMD ["npm", "start"]

This file installs dependencies, copies code, and starts the backend server.

Step 3: Create Dockerfile for Frontend

The frontend also needs its own Dockerfile.

Example frontend Dockerfile:

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

This builds and serves the frontend application.

Step 4: Use Docker Compose for Local Testing

Docker Compose helps run multiple containers together.

Example docker-compose file:

version: '3'
services:
  backend:
    build: ./backend
    ports:
      - "5000:5000"
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"

This allows you to test the full stack application locally using one command.

Step 5: Push Code to GitHub Repository

Once Docker works locally, push your code to a GitHub repository.

Make sure:

This repository will be used by GitHub Actions for deployment.

Step 6: Create GitHub Actions Workflow

GitHub Actions workflows are defined using YAML files.

Example basic workflow:

name: Deploy Full Stack App

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

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

    - name: Build Docker images
      run: docker-compose build

This workflow starts when code is pushed to the main branch.

Step 7: Push Docker Images to a Registry

To deploy, Docker images must be stored in a container registry.

Common options:

Example steps include:

This makes the image available for servers to pull.

Step 8: Deploy Containers on the Server

On the server:

Example:

docker pull your-image-name
docker run -d -p 80:3000 your-image-name

This starts the application on the server.

Step 9: Automate Deployment End to End

You can extend GitHub Actions to:

This creates a full CI/CD pipeline where deployment happens automatically after every code push.

Common Mistakes to Avoid

Some common mistakes include:

Using environment variables and proper testing avoids these issues.

Benefits of Using Docker and GitHub Actions Together

Using Docker and GitHub Actions together provides:

This approach is widely used in modern DevOps practices.

Summary

Deploying a full stack application using Docker and GitHub Actions simplifies the entire deployment process. Docker ensures that your application runs consistently across environments, while GitHub Actions automates building, testing, and deployment. By combining both tools, developers can create reliable, scalable, and automated deployment pipelines that save time and reduce errors. This approach is ideal for modern full stack applications and is a valuable skill for developers and DevOps engineers.