Coder Legion - Recent posts tagged docker-compose

Deploy a Next.js App on AWS EC2 with Docker, NGINX, and Automate with GitHub Actions.

Mon, 29 Sep 2025 12:54:42 +0000

Next.js is a powerful React framework that provides server-side rendering, static site generation, and API routes. Deploying a Next.js app on an AWS EC2 instance allows for better control and customization of the hosting environment. This guide will walk you through the process of setting up a Next.js application on AWS EC2 using Docker and NGINX while automating deployment with GitHub Actions.

Before following this Next.js tutorial, we recommend that you first consult Build and Deploy a ReactJS App to AWS EC2 with Docker, NGINX, and Automate with GitHub Actions. This guide is a continuation of the series on React deployment, focusing solely on Next.js-specific updates. The basic steps remain the same, and you can refer to the previous article for more details.

Table of Contents

Setting Up the Project
Dockerizing the NextJS application
Setting up NGINX
Automating deployment with GitHub Actions on AWS EC2

Note that you can find the link of final source code in the
https://github.com/kilamaelie/Deploy-a-Next.js-App-on-AWS-EC2-with-Docker-NGINX-and-Automate-with-GitHub-Actions
repository.

Step 1. Setting Up the Project
Open your terminal and navigate to the directory where you want to create the project, for the purpose of this tutorial we’ll create a directory with a name next-tutorial-app or you can name it anything depending on your project name. This folder is considered as the root directory for our application which contains all folders and files structures.

Then, we will change our directory into the next-tutorial-app folder and all other parts of configuration files or folders will be in this folder.

> mkdir next-tutorial-app
> cd next-tutorial-app

Inside the next-tutorial-app folder, to create a new Next project runs the following command using create-next-app@latest

npx create-next-app@latest # website is our app-name or folder name

Let’s change the directory into website as our app-name for NextJs application and start development server.

cd website # app-name
npm run dev # start the development server

Step 2: Dockerizing the Next.js App

Create a Dockerfile in the root directory of your website folder:

FROM node:23.10.0-alpine

WORKDIR /app

COPY ./package*.json ./

# Install dependencies
RUN yarn

# Copy all files
COPY . .

# Expose the listening port
EXPOSE 3000

Then, create a .dockerignore file to exclude unnecessary files:

node_modules
.next
.DS_Store
dist

In your project’s root directory as next-tutorial-app, create a file named docker-compose.yml. This file will contain the configuration for your multi-container application.

services:
  website:
    build:
      context: ./website
      dockerfile: Dockerfile
    command: yarn dev
    ports:
      - "3000:3000"

So to test it, just go in your terminal, navigate to the directory containing the docker-compose.yml file and run:

docker-compose up

Kill the task in the terminal where docker-compose up is running in order to stop the. To remove the containers and their associated resources, run:

docker-compose rm -v

Step 3: Setting Up NGINX as a Reverse Proxy in Docker

In the root of your project directory, create a Nginx directory named nginx then create a configuration file named nginx.conf . So inside nginx.conf file adds the following configuration:

server {
     listen 80;
     server_name localhost; 
     #server_name can add your domain or Ip address for your server in the production
 
    location / {
        proxy_pass http://website:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
     }
 }

in the same directory as your Nginx, create a Dockerfile which defines how to build a custom Nginx Docker Image:

# Use an official Nginx image as the base image
FROM nginx:latest

# Remove any existing config files
RUN rm /etc/nginx/conf.d/*
# Copy the custom Nginx configuration
COPY nginx.conf /etc/nginx/conf.d/
# Expose port 80 for Nginx
EXPOSE 80

Before testing in development, let’s update our docker-compose file by adding the Nginx service

services:
  website:
    build:
      context: ./website
      dockerfile: Dockerfile
    ports:
    - 3000:3000
    
  nginx:
    build:
     context: ./nginx
     dockerfile: Dockerfile
    ports:
      - "80:80"
    depends_on:
      - website

Also update the Dockerfile for the next app in the website directory

# Stage 1: Install Dependencies
ARG NODE=node:20-alpine 
FROM ${NODE} AS deps

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package*.json ./
RUN npm install

# Stage 2: Build
FROM ${NODE} AS builder

WORKDIR /app

COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN npm run build

# Stage 3: Production Runner
FROM ${NODE} AS runner

WORKDIR /app

ENV NODE_ENV production
ENV PORT 3000
ENV NEXT_TELEMETRY_DISABLED 1

# Install PM2 globally
RUN npm install -g pm2

# Create a non-root user
RUN addgroup --system --gid 1001 nodegroup
RUN adduser --system --uid 1001 appuser

# Copy necessary files
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json
COPY --from=builder --chown=appuser:nodegroup /app/.next/standalone ./
COPY --from=builder --chown=appuser:nodegroup /app/.next/static ./.next/static

USER appuser

EXPOSE 3000

# Start the application using PM2
CMD ["pm2-runtime", "node", "--", "server.js"]

Before testing, ensure that output: 'standalone' is set in the next.config.js file to optimize the build for Docker deployment.

To test if everything works, open a terminal, navigate to your root directory, and run the following command:

docker-compose up  #

Then let’s testing at http://localhost:80 or http://127.0.0.1:80

Kill the task in the terminal

docker-compose rm -v

Then, let’s create docker-compose.ci and docker-compose.prod files for the production and workflow purpose in the root directory of the project

Docker-compose.ci

services:
  website:
    container_name: website
    build:
      context: ./website
      dockerfile: Dockerfile
      cache_from:
        - '${NEXT_APP_WEBSITE_IMAGE}'
    image: '${NEXT_APP_WEBSITE_IMAGE}'
    env_file:
      - ./.env
    ports:
      - '3000:3000'

  nginx:
    container_name: nginx
    build:
      context: ./nginx
      dockerfile: Dockerfile
      cache_from:
        - '${NEXT_APP_NGINX_IMAGE}'
    image: '${NEXT_APP_NGINX_IMAGE}'
    ports:
      - '80:80'
    restart: always
    depends_on:
      - website

Docker-compose.prod

services:
  website:
    container_name: website
    image: '${NEXT_APP_WEBSITE_IMAGE}'
    env_file: .env
    ports:
      - '3000:3000'

  nginx:
    container_name: nginx
    image: '${NEXT_APP_NGINX_IMAGE}'
    ports:
      - '80:80'
    depends_on:
      - website
    restart: always

So for this tutorial will use Github packages for hosting the images.

Step 4: Automating Deployment with GitHub Actions

Create a GitHub Actions workflow file at .github/workflows/deploy.yml in the root of the project.

name: Continuous Integration and Delivery

on: 
  push:
    branches: [main]
env:
  NEXT_APP_WEBSITE_IMAGE: ghcr.io/$(echo $GITHUB_REPOSITORY | tr '[:upper:]' '[:lower:]')/website
  NEXT_APP_NGINX_IMAGE: ghcr.io/$(echo $GITHUB_REPOSITORY | tr '[:upper:]' '[:lower:]')/nginx
  REGISTRY: ghcr.io
jobs:
  build:
    name: Build Docker Images
    runs-on: ubuntu-latest
    steps:
      - name: Checkout main
        uses: actions/checkout@v3

      - name: Set environment variables
        run: |
          echo "NEXT_APP_WEBSITE_IMAGE=$(echo ${{env.NEXT_APP_WEBSITE_IMAGE}} )" >> $GITHUB_ENV
          echo "NEXT_APP_NGINX_IMAGE=$(echo ${{env.NEXT_APP_NGINX_IMAGE}} )" >> $GITHUB_ENV
      - name: Log in to GitHub Packages
        env:
          PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
        run: echo ${PERSONAL_ACCESS_TOKEN} | docker login ghcr.io -u ${{ secrets.NAMESPACE }} --password-stdin

      - name: Build images
        run: |
          docker compose -f docker-compose.ci.yml build
      - name: Push images
        run: |
          docker push ${{ env.NEXT_APP_WEBSITE_IMAGE }}
          docker push ${{ env.NEXT_APP_NGINX_IMAGE }}
  deploy:
    name: Deploy to AWS EC2
    runs-on: ubuntu-latest
    needs: build
    if: github.ref == 'refs/heads/main'
    steps:
      - name: Checkout main
        uses: actions/checkout@v3
      - name: Add environment variables to .env
        run: |
          echo NEXT_APP_WEBSITE_IMAGE=${{ env.NEXT_APP_WEBSITE_IMAGE }} >> .env
          echo NEXT_APP_NGINX_IMAGE=${{ env.NEXT_APP_NGINX_IMAGE }} >> .env
          echo NAMESPACE=${{ secrets.NAMESPACE }} >> .env
          echo PERSONAL_ACCESS_TOKEN=${{ secrets.PERSONAL_ACCESS_TOKEN }} >> .env
      - name: Add the private SSH key to the ssh-agent
        env:
          SSH_AUTH_SOCK: /tmp/ssh_agent.sock
        run: |
          mkdir -p ~/.ssh
          ssh-agent -a $SSH_AUTH_SOCK > /dev/null
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          ssh-add - <<< "${{ secrets.PRIVATE_KEY }}"
      - name: Deploy images on AWS EC2
      
        env:
          SSH_AUTH_SOCK: /tmp/ssh_agent.sock

        run: |
          scp -o StrictHostKeyChecking=no -r ./.env ./docker-compose.prod.yml ${{secrets.AWS_HOST_USER}}@${{ secrets.AWS_EC2_IP_ADDRESS }}:
          ssh -o StrictHostKeyChecking=no ${{secrets.AWS_HOST_USER}}@${{ secrets.AWS_EC2_IP_ADDRESS }} << EOF
              docker-compose down --rmi all -v
              docker login ghcr.io -u ${{secrets.NAMESPACE}} -p ${{secrets.PERSONAL_ACCESS_TOKEN}}
              docker pull $WEBSITE_IMAGE
              docker pull $NGINX_IMAGE 
              docker-compose --env-file=.env -f docker-compose.prod.yml up -d
              docker logout
          EOF

Please make sure your on main branch because the workflow’s can only trigger on the main branch other you can it to your preferences.

Workflow successfully finished :

By following these steps, you have successfully deployed a Next.js application on AWS EC2 using Docker and NGINX, with automated deployments using GitHub Actions. You can further enhance this setup by integrating SSL certificates with Let’s Encrypt and using AWS services like RDS or S3 for storage.

If you would like to improve your skills, click on the following link on Master React App Deployment: AWS EC2, Route 53, SSL & GitHub Actions,A comprehensive manual which walks you through the deployment process, leveraging the power of Docker, AWS EC2, Route 53, SSL encryption and GitHub actions to build a robust CI/CD pipeline.

Keep exploring, stay curious and keep building on this foundation to create even more sophisticated and powerful projects. Happy coding!

Thanks for reading through and I hope you liked what you read here. Feel free to connect with me on portfolio,LinkedIn, twitter and GitHub.

Beginner’s Guide to Environment Variables with Docker

Wed, 20 Aug 2025 05:52:51 +0000

If you’ve ever worked with Docker, you’ve probably heard the term “environment variables”. They play an important role in configuring your containers and securing your sensitive data. This guide will walk you through everything you need to know about using environment variables with Docker Compose, even if you’re a complete beginner.

???????? What Are Environment Variables?
Environment variables are key-value pairs used to configure applications. Instead of hard-coding values (such as passwords or database URLs), you can store them as variables and access them from your code.

For example:

DATABASE_URL=mongodb://localhost:27017/mydb

API_KEY=9YmCCoJfsI9sIactxPBu

???? Why Use Environment Variables in Docker Compose?

When you’re using Docker Compose to spin up multi-container applications, environment variables help you:

Avoid hardcoding sensitive data in your docker-compose.yml
Easily switch between development, staging, and production setups
Keep your configuration clean and reusable

???? Ways to Set Environment Variables in Docker

1. Using the environment attribute
You can set variables inline in your docker-compose.yml file:

services:

web:

image: node:23.11.0
environment:
  - NODE_ENV=development
  - PORT=5000
  - API_KEY=PLdaTwF9YmCCoJfsI9sIactxPBu

⚠️ This method is simple, but can expose sensitive data.

Using an .env file as the best practice

Create a .env file in the same directory as your docker-compose.yml:

PORT=5000
NODE_ENV=development
API_KEY=PLdaTwF9YmCCoJfsI9sIactxPBu

Then in your docker-compose.yml:

services:
web:
 image: node:23.11.0
 ports:
  - "${PORT}:5000"
 environment:
  - NODE_ENV=${NODE_ENV}
  - API_KEY=${API_KEY}

✅ Docker Compose automatically loads .env from the same directory.

2. Using env_file attribute to load variables
You can also explicitly tell Docker Compose to use a specific .env file:

services:
web:

image: node:23.11.0
env_file:
  - ./dev.env

This allows configurations to be separated according to the
environment. (e.g., dev.env, prod.env).

3. Using shell environment variables
You can export environment variables in your terminal before running Docker Compose:

export NODE_ENV=development
export PORT=3000
docker-compose up

4. Passing variables inline when running a container (less common in Compose)
This approach is more common with docker run, but worth noting:

docker run -e NODE_ENV=production node:23.11.0

In Docker Compose, this is equivalent to setting them under
environment:.

???????????? Bonus: Environment Variables vs Build Arguments
Build arguments are similar to environment variables, but they’re used at build time instead of runtime.

Example: Using ARG in Dockerfile

FROM node:23.11.0
ARG NODE_ENV
RUN echo "Building in $NODE_ENV mode"

Set ARG in docker-compose.yml

services:

web:

build:
  context: .
  args:
    NODE_ENV: development

Key differences:

ARG is only available during the image build process.
ENV (environment variable) is available at container runtime.
If you need a variable during the build, use ARG. If your app needs it during runtime, use ENV.

???? Best Practices
⚡ Never commit .env files with secrets to version control.

????️ Use different .env files for different environments.
✅ Keep your .env file in the same folder as docker-compose.yml for auto-detection.

???? Debug Tip
Want to make sure your variables are loaded? Run this:

docker-compose exec web env

This shows all environment variables inside the running container.

If you would like to improve your skills, please check out my other articles on docker and docker-compose on different subjects:

How to Deploy ReactApp to AWS EC2 with docker, nginx and automate with gitHubAction.

✨ Final Thoughts
Environment variables make Docker Compose setups more secure, cleaner, and easier to manage. Whether you’re running a single service or a complex app with multiple containers, mastering environment variables is a foundational skill that pays off.

Thanks for reading through and I hope you liked what you read here. Feel free to connect with me on LinkedIn, twitter and GitHub.

Happy Dockering! ????

Deploy a ReactJS App to AWS EC2 with Docker, NGINX, and Automate with GitHub Actions part One

Wed, 25 Jun 2025 17:01:32 +0000

In today’s digital landscape, master the art of building, deploying and automating ReactJS Apps using Docker, NGINX and GitHub actions on AWS EC2. Dive into this comprehensive guide and transform your coding journey into an adventure of innovation, efficiency and cutting-edge technologies.

Table of Contents

Prerequisites
Setting Up the Project
Dockerizing the ReactJS application
Setting up NGINX
Automating deployment with GitHub Actions on AWS EC2

1. Prerequisites
Before diving into this project, which involves several technologies and concepts, you need a solid grounding in the following areas to ensure successful learning and implementation such as:

Basic Web development: A good understanding of HTML, CSS and
JavaScript is essential, as ReactJS is a JavaScript library for
building user interfaces.
Git and version control: A good knowledge of Git and version control
concepts will help you manage your code base and collaborate
effectively.
Docker: Understanding containerization for docker is crucial to
packaging your application and its dependencies in isolated
containers
NGINX: A basic knowledge of NGINX as a web server and reverse proxy
will be necessary to set up the server environment.

Remember, while these requirements are essentials, you don’t need to be an expert in every area. You can learn and develop your expertise as you go along. What’s more, official documentation, online tutorials and communities can provide invaluable support as you learn.

Note that you can find the link of final source code in the build and deploy-reactApp to-aws ec2 via github-actions repository.

2. Setting Up the Project

This involves several steps which including the installation, project structure and other basic configuration, here’s a step-by-step guide helping you get started :

Install Node.js and npm:
Before you begin, make sure Node.js and npm ( Node Package Managers) are installed on your system. You can download them from the official website: https://nodejs.org.

Create a New Project:
Open your terminal and navigate to the directory where you want to create the project, for the purpose of this tutorial we’ll create a directory with a name react-tutorial-app or you can name it anything depending on your project name. This folder is considered as the root directory for our application which contains all folders and files structures.

In software development, “project structure” provides a clear and
logical layout that helps developers understand and navigate the
codebase more easily. A well-designed project structure promotes
maintainability, collaboration, and efficient development.

Then, we will change our directory into the react-tutorial-app folder and all other parts of configuration files or folders will be in this folder.

mkdir react-tutorial-app
cd react-tutorial-app

Inside the react-tutorial-app folder, to create a new React project runs the following command using create-react-app and for more details on how create-react-app works and other staff, please visit the official website: [https://create-react-app.dev/][3]

npx create-react-app your-app-name # website is our app-name or folder name

create-react-app is a command-line tool that allows you to quickly and easily set up a new Reactjs Application, this boilerplate setup generates a basic project structure, including essential files and configuration needed to start building a React application.

Let’s change the directory into website as our app-name for React application.

cd website # app-name

To start the development server and preview your React app, use the following command:

npm start

This command will initiate the development server, which will compile your React code, bundle assets, and start a local web server to serve
your application. It will also open your app in your default web
browser automatically.

Once the development server is up and running, you can access your React app by visiting http://localhost:3000 in your web browser. So well done ???? for creating a React application and setting up the project.

3. Dockerizing the ReactJS application

Docker provides a standardized way to package and distribute applications, making it easier to deploy and manage across different environments. In this section, we’ll containerize our ReactJS application using Docker.

If you haven’t already, install Docker on your machine by following the instructions for your operating system:
https://docs.docker.com/get-docker/

In your React app’s root directory, create a file named Dockerfile. This file defines the instructions to build your Docker image.

# Use an official Node.js runtime as the base image

FROM node:19.6.0-alpine
# Set the working directory within the container
WORKDIR /website

# Copy package.json and package-lock.json to the container
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code to the container
COPY . .

# Build the React app
EXPOSE 3000

Since in this project will have more than one container , then we ‘ll need to use docker-compose

Docker-compose : allows you to define and run multiple Docker containers as a single service, making it easier to manage complex applications.

If you haven’t already, you’ll need to install Docker Compose. Follow the installation instructions for your operating system:
[https://docs.docker.com/compose/install/][4]

In your project’s root directory as react-tutorial-app, create a file named docker-compose.yml. This file will contain the configuration for your multi-container application.

services:
  website:
    build:
      context: ./website
      dockerfile: Dockerfile
    command: npm start
    ports:
      - "3000:3000"

This defines only one service website but a bit later more will be added. So in order to test it, just go in your terminal, navigate to the directory containing the docker-compose.yml file and run:

docker-compose up

Docker Compose will build the required images and start the defined containers. You’ll see logs from both services in the terminal and also depending on your configuration, you can access your ReactJS app at http://localhost:3000 . Kill the task in the terminal where docker-compose up is running in order to stop the. To remove the containers and their associated resources, run:

docker-compose rm -v

4. Setting up NGINX

NGINX is a reverse proxy to serve the built static files of your React application. This setup is commonly used to improve performance and manage routing in production environments.

In the root of your project directory, create a Nginx directory named nginx then create a configuration file named nginx.conf . So inside nginx.conf file adds the following configuration:

server {
     listen 80;
     server_name localhost; 
     #server_name can add your domain or Ip address for your server in the production
 
     location / {
         root /usr/share/nginx/html/website;
         try_files $uri $uri/ /index.html;
     }
 }

in the same directory as your Nginx, create a Dockerfile which defines how to build a custom Nginx Docker Image:

# Use an official Nginx image as the base image
FROM nginx:latest

# Remove any existing config files
RUN rm /etc/nginx/conf.d/*

# Copy the custom Nginx configuration
COPY nginx.conf /etc/nginx/conf.d/

# Expose port 80 for Nginx
EXPOSE 80

Before testing in development, let’s update our docker-compose file by adding the Nginx service

services:
website:
  build:
    context: ./website
    dockerfile: Dockerfile
  volumes:
   - website:/website/build/  # build files will be added at this directory !!!

nginx:
  build:
   context: ./nginx
   dockerfile: Dockerfile
  ports:
    - "80:80"
  volumes:
     - website:/usr/share/nginx/html/website # Copy React App's build files to the Nginx directory

volumes:
   website:

And also update the Dockerfile for the react app in the website directory

# Use an official Node.js runtime as the base image

FROM node:19.6.0-alpine
# Set the working directory within the container
WORKDIR /website

# Copy package.json and package-lock.json to the container
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code to the container
COPY . .

# Build the React app
RUN npm run build

# Build the React app
EXPOSE 3000

For the purpose of testing if everything works, we’ll open a terminal and navigate to your root directory. Run the following command:

docker-compose up  #

Then let’s testing at http://localhost:80 or http://127.0.0.1:80

Kill the task in the terminal where the container is running. To remove the container and its associated resources, run:

docker-compose rm -v

Then, let’s create docker-compose.ci and docker-compose.prod files for the production and workflow purpose in the root directory of the project

Docker-compose.ci

services:
  website:
    build:
      context: ./website
      dockerfile: Dockerfile
    cache_from:
        - '${WEBSITE_IMAGE}'
    image: '${WEBSITE_IMAGE}'
    ports:
      - "3000:3000"
    volumes:
      - website:./website/build/  # build files will be added at this directory !!!

  nginx:
    build:
     context: ./nginx
     dockerfile: Dockerfile
    cache_from:
        - '${NGINX_IMAGE}'
    image: '${NGINX_IMAGE}'
    ports:
      - "80:80"
    volumes:
      - website:/usr/share/nginx/html/website # Copy React App's build files to the Nginx directory

Docker-compose.prod

services:
  website:
    container_name: 'website'
    image: '${WEBSITE_IMAGE}'
    ports:
      - "3000:3000"
    volumes:
      - website:./website/build/  # build files will be added at this directory !!!
  
  nginx:
    container_name: 'nginx'
    image: '${NGINX_IMAGE}'
    ports:
      - "80:80"
    volumes:
      - website:/usr/share/nginx/html/website # Copy React App's build files to the Nginx directory

volumes:
  website:

So for this tutorial will use Github packages for hosting the images.

[GitHub Package Registry][5] is a package hosting service provided by GitHub. It allows you to publish, share, and manage software packages directly within your GitHub repositories.

It lets you host your software, either publicly or privately, for use in your projects on GitHub.

Click on the link for the part two

Deploy a ReactJS App to AWS EC2 with Docker, NGINX, and Automate with GitHub Actions part two

Wed, 25 Jun 2025 17:01:06 +0000

AWS Setup

Let’s start by setting up an EC2 instance to deploy our application. To do this, and you’ll need to open an AWS account (if you don’t already have one).

If you don’t know how to set up AWS EC2 , please visit this link which
will guide you through how to : launch EC2

Once we’ve finished configuring AWS EC2 and the instance is up and running, we can install Docker on it.

So connect via SSH into the instance using your Key Pair as :

$ ssh -i your-key-pair.pem ec2-user@<PUBLIC-IP-ADDRESS>

#example 
# ssh -i ~./ssh/react-tutorial.perm ec2-user@54.201.189.94

After accessing the instance, start by updating the server package and installing the latest version of Docker and Docker-compose:

[ec2-user]$ sudo yum update -y
[ec2-user]$ sudo yum install -y docker
[ec2-user]$ sudo service docker start
[ec2-user]$ sudo curl -L https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
[ec2-user]$ sudo chmod +x /usr/local/bin/docker-compose

[ec2-user]$ docker --version
Docker version 20.10.23, build 7155243

[ec2-user]$ docker-compose --version
Docker Compose version v2.18.1

Add the ec2-user to the docker group so that you can use it without running the Docker command with sudo :

[ec2-user]$ sudo usermod -a -G docker ec2-user

Next, let’s generate the SSH KEY

[ec2-user]$ ssh-keygen -t rsa

Please! save the Key without setting any password

Next, copy the public key into the authorized_keys file and set the appropriate authorizations.:

[ec2-user]$ cat ~/.ssh/id_rsa.pub 
# Copy this public key into ~/.ssh/authorized_keys
[ec2-user]$ vi ~/.ssh/authorized_keys
# After adding the public key into authorized_key then exits  from vi text editor 
# Then add these commands are used to change the permissions of these files 
[ec2-user]$ chmod 600 ~/.ssh/authorized_keys
[ec2-user]$ chmod 600 ~/.ssh/id_rsa

Now, copy the contents of the private key

[ec2-user]$ cat ~/.ssh/id_rsa

# Copy the private key somewhere for later use

5. Automating Deployment with GitHub Actions to AWS EC2

It is an integrated continuous integration and continuous deployment (CI / CD) platform provided by GitHub .

Since our workflow will use GitHub’s core features (GitHub packages), GitHub requires you to create an access token, which will be used as a GitHub user ID for all your interactions.

Go to the Personal access tokens area in the Developer settings of your GitHub profile and click Generate new token.

To configure GitHub Actions, start by adding a new directory called .github to the root of your project, then within this directory, add another directory called workflows.
Now to configure the workflow, which is a set of one or more jobs, create a new file in the workflows directory called main.yml .
You can also run the following command in your root directory.

mkdir .github && cd .github
mkdir workflows && cd workflows
touch main.yml

main.yml

name: Continuous Integration and Delivery

on:
  push:
    branches: [main]

env:
  #
  WEBSITE_IMAGE: ghcr.io/$(echo $GITHUB_REPOSITORY | tr '[:upper:]' '[:lower:]')/website
  NGINX_IMAGE: ghcr.io/$(echo $GITHUB_REPOSITORY | tr '[:upper:]' '[:lower:]')/nginx
  REGISTRY: ghcr.io

jobs:
  build:
    name: Build the Docker Image
    runs-on: ubuntu-latest

    steps:
      - name: checkout main
        uses: actions/checkout@v3

      - name: Set environment variables to .env
        run: |
          echo "WEBSITE_IMAGE=$(echo ${{env.WEBSITE_IMAGE}} )" >> $GITHUB_ENV
          echo "NGINX_IMAGE=$(echo ${{env.NGINX_IMAGE}} )" >> $GITHUB_ENV
      - name: Log in to GitHub Packages
        env:
          PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
        run: echo ${PERSONAL_ACCESS_TOKEN} | docker login ghcr.io -u ${{ secrets.NAMESPACE }} --password-stdin

      - name: Pull images
        run: |
          docker pull ${{ env.WEBSITE_IMAGE }} || true
          docker pull ${{ env.NGINX_IMAGE }} || true
      - name: Build images
        run: |
          docker compose -f docker-compose.ci.yml build
      - name: Push images
        run: |
          docker push ${{ env.WEBSITE_IMAGE }}
          docker push ${{ env.NGINX_IMAGE }}
  checking-secrets:
    name: Checking secrets
    runs-on: ubuntu-latest
    needs: build
    outputs:
      secret_key_exists: ${{steps.check_secrets.outputs.defined}}
    steps:
      - name: Check for Secrets availabilities
        id: check_secrets
        shell: bash
        run: |
          if [[ -n "${{ secrets.PRIVATE_KEY }}" && -n "${{secrets.AWS_EC2_IP_ADDRESS}}" && -n "${{secrets.AWS_HOST_USER}}" ]]; then
            echo "defined=true" >> $GITHUB_OUTPUT;
          else
            echo "defined=false" >> $GITHUB_OUTPUT;
          fi
  deploy:
    name: Deploy to AWS EC2
    runs-on: ubuntu-latest
    needs: checking-secrets
    if: needs.checking-secrets.outputs.secret_key_exists == 'true'
    steps:
      - name: Checkout main
        uses: actions/checkout@v3

      - name: Add environment variables to .env
        run: |
          echo WEBSITE_IMAGE=${{ env.WEBSITE_IMAGE }} >> .env
          echo NGINX_IMAGE=${{ env.NGINX_IMAGE }} >> .env
          echo NAMESPACE=${{ secrets.NAMESPACE }} >> .env
          echo PERSONAL_ACCESS_TOKEN=${{ secrets.PERSONAL_ACCESS_TOKEN }} >> .env
      - name: Add the private SSH key to the ssh-agent
        env:
          SSH_AUTH_SOCK: /tmp/ssh_agent.sock
        run: |
          mkdir -p ~/.ssh
          ssh-agent -a $SSH_AUTH_SOCK > /dev/null
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          ssh-add - <<< "${{ secrets.PRIVATE_KEY }}"
      - name: Deploy images on AWS EC2
        env:
          SSH_AUTH_SOCK: /tmp/ssh_agent.sock

        run: |
          scp -o StrictHostKeyChecking=no -r ./.env ./docker-compose.prod.yml ${{secrets.AWS_HOST_USER}}@${{ secrets.AWS_EC2_IP_ADDRESS }}:
          ssh -o StrictHostKeyChecking=no ${{secrets.AWS_HOST_USER}}@${{ secrets.AWS_EC2_IP_ADDRESS }} << EOF
              docker-compose down --rmi all -v 
              docker login ghcr.io -u ${{secrets.NAMESPACE}} -p ${{secrets.PERSONAL_ACCESS_TOKEN}}
              docker pull $WEBSITE_IMAGE
              docker pull $NGINX_IMAGE 
              docker-compose --env-file=.env -f docker-compose.prod.yml up -d
              docker logout
          EOF

Find the complete gist.

So, in the main.yml we define :

set the environment variables
Three jobs to run:
a. build job consist of:

Set various environment variables
Login in the Github package by using the PERSONAL_ACCESS_TOKEN created
Pull images for caching, build the images and push to Github Registry

b. checking-secret consist of :

checking if the deploy variables are existing

Notes about the secrets

secrets.PERSONAL_ACCESS_TOKEN
secrets.NAMESPACE
secrets.PRIVATE_KEY
secret.AWS_EC2_IP_ADDRESS
secrets.AWS_HOST_USER

All of the secrets need to be set in your repository’s secrets (Settings > Secrets) and use your Github username or your organization name as your NAMESPACE and your personal access token as PERSONAL_ACCESS_TOKEN .

c. deploy job consist of:

Add the environment variable to .env file which will be created on the AWS EC2 instance.
Add the private key to ssh-agent for password less.
Deploy the build the images on AWS EC2 instance.

Once you are done, commit and push your code to the Github to trigger the workflow to run, so now you should see the images in the Github Packages.

Please make sure your on main branch because the workflow’s can only trigger on the main branch other you can it to your preferences.

Workflow successfully finished :

Once all our jobs have been executed, navigate to the IP of your instance, and you should see the React application running :

And there you have it, this guide has equipped you with the skills you need to successfully build, deploy and automate ReactJS applications using Docker, NGINX and GitHub Actions on AWS EC2.

Keep exploring, stay curious and keep building on this foundation to create even more sophisticated and powerful projects. Happy coding!

Thanks for reading through and I hope you liked what you read here. Feel free to connect with me on LinkedIn, twitter and GitHub

Understanding Docker-Compose and Environmental Variables: A Beginner's Guide

Sun, 23 Feb 2025 07:05:12 +0000

Introduction
Background and Context

What Are Environmental Variables?
What Is Docker-Compose?
Why Do You Need Docker-Compose?

Main Content

Docker-Compose vs Dockerfile
Basic Docker-Compose Commands and Flags
up, down, logs, -d, ps
How Docker-Compose Works with a Dockerfile
Docker-Compose Installation

Setting Environmental Variables in Docker-Compose

Use the Environment Attribute
Use the Env_File Attribute
Docker-Compose Interpolation

Benefits of Using Docker-Compose
Challenges/Considerations
Conclusion
Call to Action

Introduction

Ever wondered how you can manage and scale multi-container Docker applications effortlessly? Enter Docker-Compose -- a tool that simplifies running and managing Docker containers.

Overview: In this article, I will introduce you to Docker-Compose, its features, and how you can manage environmental variables in your containerized applications.

Purpose: Whether you're new to Docker or just getting started with container orchestration, by the end of this article, you'll have a better understanding of Docker-Compose and how it integrates with Dockerfiles and environmental variables.

What Are Environmental Variables?

Environmental variables are key-value pairs used to pass configuration settings to your applications. These variables allow you to customize the behavior of your applications depending on the environment they're running in (e.g., production, development, etc.). In the context of Docker, these variables help you set up container settings such as database credentials, API keys, or application-specific configurations.

What Is Docker-Compose?

Docker-Compose is a tool used to define and manage multi-container Docker applications. It uses a YAML file (docker-compose.yml) to define the services, networks, and volumes that make up an application. This simplifies the process of running complex applications that require multiple containers to work together.

Why Do You Need Docker-Compose?

Without Docker-Compose, running multi-container applications could become tedious. You'd have to manually start each container, set up networking between them, and ensure they are running with the correct configuration. Docker-Compose automates all of that, making it easier to manage and scale your applications, especially when using microservices.

Docker-Compose vs Dockerfile

While Dockerfiles are used to define the steps required to build a Docker image (such as installing software and setting up the environment), Docker-Compose is used for running multiple containers at once, defining services, networks, and volumes. In short, Dockerfile is for building, and Docker-Compose is for running and managing multi-container applications.

Basic Docker-Compose Commands and Flags

To get started with Docker-Compose, here are a few essential commands:

docker-compose up: Starts all services defined in the docker-compose.yml file.
docker-compose down: Stops and removes all the containers, networks, and volumes.
docker-compose logs: Displays the logs of all services.
-d flag: Stands for "detached mode", allowing services to run in the background.
docker-compose ps: Lists the running containers.

Other: docker-compose commands

These commands help you manage your containers and services in an organized manner, streamlining the deployment process.

How Docker-Compose Works with a Dockerfile

Docker-Compose can be used in combination with a Dockerfile to build and run containers. In your docker-compose.yml file, you can specify the build path, pointing to the directory containing the Dockerfile. This allows you to build the Docker image as part of your Compose setup, streamlining the development workflow.

For example:

yaml

version: "3.8" # not recommended in new compose versions

services:

  web:

    build: .

    ports:

      - "8080:8080"

In this case, Docker-Compose will build the Dockerfile located in the current directory (.) before running the container.

Docker-Compose Installation

To get started with Docker-Compose, visit this link for installation instructions for your operating system.

Setting Environmental Variables in Docker-Compose

You may need to pass environmental variables to your containers for various reasons, such as configuring your application settings or passing sensitive information like database credentials.

Use the Environment Attribute

You can set environment variables directly within the docker-compose.yml file using the environment attribute. Recommended for nonsensitive infractions.

Example:

yaml

services:

  web:

    image: myapp

    environment:

      - DATABASE_URL=postgres://db:5432/mydb

For more details, check out the official environment attribute documentation.

Use the Env_File Attribute

Alternatively, you can load environment variables from an external .env file using the env_file attribute. This approach is my personal preference because helps keep sensitive information out of your docker-compose.yml file.

Example:

 yaml

services:

  web:

    image: myapp

    env_file:

      - .env # path to your env file

For more information, refer to the official env_file documentation.

Docker-Compose Interpolation

Interpolation is the process of replacing variables in your configuration with actual values. Docker-Compose supports variable substitution, which allows you to reference environment variables in your docker-compose.yml file.

For example:

 yaml

services:

  web:

    image: ${IMAGE_NAME}

    environment:

      - DATABASE_URL=${DATABASE_URL}

In this case, the values of IMAGE_NAME and DATABASE_URL are substituted at runtime, allowing you to customize the configuration depending on the environment.

Benefits of Using Docker-Compose

Simplifies Multi-Container Management: Docker-Compose lets you define and manage all your services with one configuration file.
Easy to Use: The docker-compose.yml file allows you to manage all settings in a readable and maintainable way.
Portability: Docker-Compose ensures your setup works consistently across different environments.
Rapid Deployment: You can start and stop all services with simple commands, saving you time.

Challenges/Considerations

Complexity: While Docker-Compose simplifies multi-container applications, it can be challenging to debug if services are misconfigured or not linked properly.
Resource Usage: Running multiple containers might require significant system resources, which could affect performance on low-resource machines.

Conclusion

Docker-Compose is an essential tool for managing multi-container applications with Docker. It simplifies the deployment process, integrates with Dockerfiles, and makes managing environment variables easy. Understanding how to work with Docker-Compose will help you deploy and manage containerized applications efficiently.

Are you ready to take control of your Dockerized applications with Docker-Compose? Start by installing it and experimenting with multi-container setups. Don't forget to share your experiences and ask any questions in the comments section below!

For more related content, check out the following resources:

Beginner's Guide to Docker

Glossary

Docker-Compose: A tool for defining and running multi-container Docker applications.
Environmental Variables: Key-value pairs used to configure container settings.
Dockerfile: A script used to build Docker images.
Interpolation: The process of substituting environment variables in Docker configurations.