Prerequisites
- Node.js and npm installed on your machine
- Docker installed on your machine
- Create a React App (or an existing React project)
- IDE (Visual Studio Code, IntelliJ IDEA, etc.)
Step 1: Create a React Application
If you don't have an existing React application, you can create a new one using the Create React App.
Open your terminal and run the following commands:
npx create-react-app my-react-app
cd my-react-app
This will create a new React application in the my-react-app directory.
Step 2: Create a Production Build
Before we can dockerize the React application, we need to create a production build.
Run the following command:
npm run build
This command will generate a build directory containing the optimized production build of your React application.
Step 3: Create a Dockerfile
Create a file named Dockerfile in the root directory of your React project. This file will contain instructions for building the Docker image.
# Use an official Node runtime as a parent image
FROM node:18 as build
# Set the working directory
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 application
RUN npm run build
# Use an official Nginx image to serve the React application
FROM nginx:latest
# Copy the build output to the Nginx HTML directory
COPY --from=build /app/build /usr/share/nginx/html
# Expose port 80
EXPOSE 80
# Start Nginx server
CMD ["nginx", "-g", "daemon off;"]
Explanation:
FROM node:18 as build: Use the official Node.js image to build the React application.WORKDIR /app: Set the working directory inside the container to/app.COPY package*.json ./: Copypackage.jsonandpackage-lock.jsonto the container.RUN npm install: Install the project dependencies.COPY . .: Copy the rest of the application code to the container.RUN npm run build: Build the React application.FROM nginx:latest: Use the official Nginx image to serve the built React application.COPY --from=build /app/build /usr/share/nginx/html: Copy the build output to the Nginx HTML directory.EXPOSE 80: Expose port 80 to the host.CMD ["nginx", "-g", "daemon off;"]: Start the Nginx server.
Step 4: Build the Docker Image
Run the following command to build the Docker image:
docker build -t my-react-app .
Explanation:
docker build: The Docker command to build an image.-t my-react-app: Tags the image with the namemy-react-app..: Specifies the current directory as the build context.
Step 5: Run the Docker Container
Run the following command to start a Docker container from the image:
docker run -p 80:80 my-react-app
Explanation:
docker run: The Docker command to run a container.-p 80:80: Maps port 80 of the container to port 80 on the host machine.my-react-app: The name of the Docker image to run.
Step 6: Verify the Application
Open a web browser and navigate to http://localhost. You should see your React application running.
Additional Docker Commands
6.1 List Docker Images
To list all Docker images on your system, run:
docker images
6.2 List Running Containers
To list all running Docker containers, run:
docker ps
6.3 Stop a Running Container
To stop a running Docker container, run:
docker stop <container_id>
Replace <container_id> with the actual container ID obtained from the docker ps command.
6.4 Remove a Docker Container
To remove a Docker container, run:
docker rm <container_id>
Replace <container_id> with the actual container ID.
6.5 Remove a Docker Image
To remove a Docker image, run:
docker rmi my-react-app
Conclusion
In this guide, you have learned how to dockerize a React application using Docker. We covered:
- Creating a production build of the React application.
- Writing a Dockerfile to build and serve the React application using Nginx.
- Building the Docker image.
- Running the Docker container.
- Verifying the application.
By following these steps, you can easily package your React application into a Docker container, providing a consistent and portable deployment environment.
Comments
Post a Comment
Leave Comment