docker部署React项目

原创

mob64ca12dd455e 2023-08-29 13:05:04 ©著作权

文章标签 Docker Nginx Dockerfile 文章分类 Docker 云计算

©著作权归作者所有：来自51CTO博客作者mob64ca12dd455e的原创作品，请联系作者获取转载授权，否则将追究法律责任

Docker部署React项目

在软件开发过程中，我们经常遇到部署项目的问题。传统的部署方式可能需要手动配置环境、安装依赖等繁琐的步骤。为了解决这个问题，Docker应运而生。Docker是一个开源的容器化平台，可以将应用程序和其依赖打包成一个可移植的容器，从而实现快速、可靠的部署。

本文将介绍如何使用Docker来部署React项目。我们将使用一个简单的React项目作为示例。

准备工作

在开始之前，我们需要安装Docker。可以从[Docker官网](

创建React项目

首先，我们需要创建一个React项目。打开终端，执行以下命令：

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

上述命令会创建一个名为my-app的React项目，并进入项目目录。

Dockerfile

接下来，我们需要创建一个名为Dockerfile的文件，用于定义Docker镜像的构建规则。在项目根目录下创建一个Dockerfile文件，内容如下：

# 使用官方的Node镜像作为构建环境
FROM node:14 as build

# 设置工作目录
WORKDIR /app

# 复制源代码到工作目录
COPY . .

# 安装依赖并构建生产环境代码
RUN npm install
RUN npm run build

# 使用Nginx作为Web服务器
FROM nginx:alpine

# 复制构建好的代码到Nginx的默认目录
COPY --from=build /app/build /usr/share/nginx/html

# 暴露80端口
EXPOSE 80

# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]

上述Dockerfile文件定义了两个构建阶段。第一个阶段使用官方的Node镜像作为构建环境，将源代码复制到容器中，并在容器中安装依赖并构建生产环境代码。第二个阶段使用Nginx镜像作为Web服务器，并将构建好的代码复制到Nginx的默认目录。