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:
Frontend: The user interface, built using technologies like HTML, CSS, JavaScript, React, or Angular
Backend: The server-side logic, built using technologies like Node.js, .NET, Java, or Python
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:
No "it works on my machine" problem
Easy to move applications between environments
Consistent and repeatable deployments
Better resource usage
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.
Developer pushes code to GitHub
GitHub Actions workflow starts
Application is built using Docker
Docker image is pushed to a registry
Server pulls the image and runs the container
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:
frontend folder
backend folder
Docker-related files
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:
Login to registry
Build Docker image
Push image
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:
Hardcoding secrets in code
Not testing Docker images locally
Skipping error handling in workflows
Using outdated images
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.