Docker化你的React应用

2025-05-25

Docker化你的React应用

欢迎回来！本文是 Dockerize 系列文章的一部分，请务必阅读简介部分，我会在其中介绍一些我们将要用到的概念。

今天，我们将利用构建器模式和多阶段构建进行优化，使我们的 React 应用程序 dockerize！

我还制作了一个视频，如果你想跟着看的话

项目设置

我已经使用默认的创建反应应用程序（CRA）模板初始化了一个非常标准的反应项目。

本文中的所有代码都将在此 repo中提供

├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
├── package.json
└── yarn.lock
Enter fullscreen mode Exit fullscreen mode

为了发展

让我们首先添加一个Dockerfile

FROM node:14-alpine AS development
ENV NODE_ENV development
# Add a work directory
WORKDIR /app
# Cache and Install dependencies
COPY package.json .
COPY yarn.lock .
RUN yarn install
# Copy app files
COPY . .
# Expose port
EXPOSE 3000
# Start the app
CMD [ "yarn", "start" ]
Enter fullscreen mode Exit fullscreen mode

添加一个.dockerignore，这将帮助我们忽略node_modules，.env等等

**/node_modules
**/npm-debug.log
build
Enter fullscreen mode Exit fullscreen mode

让我们创建一个docker-compose.dev.yml。在这里，我们还将代码挂载到卷中，以便在开发时将更改与容器同步。

version: "3.8"

services:
  app:
    container_name: app-dev
    image: app-dev
    build:
      context: .
      target: development
    volumes:
      - ./src:/app/src
    ports:
      - 3000:3000
Enter fullscreen mode Exit fullscreen mode

让我们开始开发我们的 React 应用程序吧！

docker-compose -f docker-compose.dev.yml up
Enter fullscreen mode Exit fullscreen mode

我们也可以将其添加到我们的package.json

"dev": "docker-compose -f docker-compose.dev.yml up"
Enter fullscreen mode Exit fullscreen mode

我们可以使用该-d标志以守护进程模式运行

让我们检查一下我们的容器！

docker ps
Enter fullscreen mode Exit fullscreen mode 
REPOSITORY          TAG                   IMAGE ID       CREATED              SIZE
app-dev            latest                5064f3e40c97   About a minute ago    436MB
Enter fullscreen mode Exit fullscreen mode

完400mb！别担心，这只是开发阶段的。我们会用建造者模式来优化生产环境的构建！

用于生产

我们将使用nginx来提供我们的静态资产，并在我们使用React Router或任何类型的路由时帮助解析路由。

注意：我个人不建议在生产环境中使用像serve这样的静态服务器包，nginx 能给我们带来更好的性能和控制力

让我们创建一个nginx.conf

server {
  listen 80;

  location / {
    root /usr/share/nginx/html/;
    include /etc/nginx/mime.types;
    try_files $uri $uri/ /index.html;
  }
}
Enter fullscreen mode Exit fullscreen mode

让我们更新Dockerfile一下production

FROM node:14-alpine AS builder
ENV NODE_ENV production
# Add a work directory
WORKDIR /app
# Cache and Install dependencies
COPY package.json .
COPY yarn.lock .
RUN yarn install --production
# Copy app files
COPY . .
# Build the app
RUN yarn build

# Bundle static assets with nginx
FROM nginx:1.21.0-alpine as production
ENV NODE_ENV production
# Copy built assets from builder
COPY --from=builder /app/build /usr/share/nginx/html
# Add your nginx.conf
COPY nginx.conf /etc/nginx/conf.d/default.conf
# Expose port
EXPOSE 80
# Start nginx
CMD ["nginx", "-g", "daemon off;"]
Enter fullscreen mode Exit fullscreen mode

让我们添加一个docker-compose.prod.yml文件

version: "3.8"

services:
  app:
    container_name: app-prod
    image: app-prod
    build:
      context: .
      target: production
Enter fullscreen mode Exit fullscreen mode

构建生产映像

docker-compose -f docker-compose.prod.yml build
Enter fullscreen mode Exit fullscreen mode

让我们检查一下我们构建的生产映像

docker images
Enter fullscreen mode Exit fullscreen mode

使用构建器模式，我们将图像尺寸缩小到仅~23mb！！

REPOSITORY          TAG                   IMAGE ID       CREATED              SIZE
app-prod           latest                c5db8d308bb9   About a minute ago   23.1MB
Enter fullscreen mode Exit fullscreen mode

让我们在端口上启动我们的生产容器，80名称为react-app

docker run -p 80:80 --name react-app app-prod
Enter fullscreen mode Exit fullscreen mode

优化静态资产（奖励）

您还可以在块内添加以下内容location来为我们的静态资产和 javascript 包引入缓存。

您可以参考本指南深入了解优化

# Cache static assets
location ~* \.(?:jpg|jpeg|gif|png|ico|svg)$ {
  expires 7d;
  add_header Cache-Control "public";
}

# Cache css and js bundle
location ~* \.(?:css|js)$ {
  add_header Cache-Control "no-cache, public, must-revalidate, proxy-revalidate";
}
Enter fullscreen mode Exit fullscreen mode

后续步骤Next steps

这样，我们应该能够在工作流程中利用 docker，并将生产镜像更快地部署到我们选择的任何平台。

如果您遇到任何问题，请随时通过Twitter与我联系。

文章来源：https://dev.to/karanpratapsingh/dockerize-your-react-app-4j2e
Devto 翻译
PREV
系统设计：Netflix 系统设计目录
NEXT
您应该关注的被低估的 Web Dev YouTuber