Deploy Docker App with Docker and Docker Compose, Tutorial

React is a popular JavaScript library for building user interfaces, particularly single-page applications. To ensure your React app is portable and can be deployed consistently across different environments, Docker is an excellent tool.

This tutorial will guide you through the steps to containerize and deploy a React app using Docker and Docker Compose.

Set Up Your React Application

If you haven’t already set up your React application, you can create a new one using Create React App:

npx create-react-app my-react-app
cd my-react-app

This will create a new React application in the my-react-app directory.

Create a Dockerfile

In the root directory of your React application (my-react-app), create a Dockerfile to define the Docker image. Here’s a sample Dockerfile:

# Use an official Node.js runtime as a parent image
FROM node:18-alpine AS build

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the React app
RUN npm run build

# Stage 2: Serve the app with a lightweight web server
FROM nginx:alpine

# Copy the build files from the previous stage
COPY --from=build /app/build /usr/share/nginx/html

# Expose the port that the app will run on
EXPOSE 80

# Start Nginx server
CMD ["nginx", "-g", "daemon off;"]

Create a docker-compose.yml File

In the root directory of your project, create a docker-compose.yml file to define the services required to run your React application. Here’s an example:

version: '3.7'

services:
  react-app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: react_app
    ports:
      - "80:80"
    environment:
      - NODE_ENV=production

Build and Run the Docker Containers

With your Dockerfile and docker-compose.yml in place, you can now build and run your React app using Docker Compose. Run the following command to build the Docker image and start the container:

docker-compose up --build -d

This command will build the Docker image for your React app and start it in a detached mode. The app will be accessible at http://localhost (or http://<your-ip-address> if you're running it on a remote server).

Access Your React Application

Once the container is up and running, open your web browser and navigate to http://localhost to see your React application in action.

Managing the Containers

Here are some useful Docker Compose commands to manage your containers:

Rebuild and restart the containers:

docker-compose up --build -d

View logs:

docker-compose logs -f

Stop the containers:

docker-compose down

Customizing Nginx Configuration (Optional)

If you need to customize the Nginx server configuration (e.g., to add caching, redirects, or compression), you can create an Nginx configuration file and add it to your Dockerfile.

Modify the Dockerfile to use this custom configuration:

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Create a custom Nginx configuration file (e.g., nginx.conf):

server {
    listen 80;

    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }

    # Enable gzip compression
    gzip on;
    gzip_types text/css application/javascript image/svg+xml;
}

Final Note

By following this tutorial, you’ve successfully containerized and deployed your React application using Docker and Docker Compose. This setup ensures that your React app is portable, scalable, and easy to deploy across various environments, whether it’s for development, staging, or production.

Docker's ability to create consistent environments helps eliminate the "works on my machine" problem, making deployment smoother and more reliable.