29 项目构建与优化之打包与部署

在上一篇中，我们学习了如何使用 Create React App 快速构建一个 React 应用程序。这为我们的开发提供了一个便捷的环境。然而，当我们完成了开发工作后，接下来就需要关注如何将我们的应用打包和部署到生产环境中。本篇文章将介绍如何打包和部署React项目，确保你的应用能够高效地在实际环境中运行。

打包

在使用 Create React App 时，打包过程是非常简单的。Create React App 自带了一套现代的构建工具，可以轻松地将开发版本打包为生产版本。默认的构建工具是 Webpack，而打包命令也很简单：

npm run build

执行上述命令后，项目的生产版本将会被创建在项目的 build 目录下。此目录中的文件均已优化，可以直接用于部署。打包过程会进行以下操作：

• 压缩 JavaScript 和 CSS: 通过使用 Terser 和 CSSNano 进行文件压缩，从而减少文件体积，提升加载速度。
• 增加哈希值: 文件名中会包含哈希值，使得浏览器能够通过缓存获取最新的文件版本。
• 生成 index.html: 这个文件将包含对打包后各个资源的引用。

示例

假设我们的项目目录结构如下：

my-app/
├── build/
├── public/
├── src/
│   ├── App.tsx
│   └── index.tsx
├── package.json

运行 npm run build 后，build 目录将生成如下结构：

my-app/
├── build/
│   ├── static/
│   │   ├── css/
│   │   └── js/
│   └── index.html

部署

将打包好的应用部署到服务器上，可以选择多种方式，下面介绍几种常见的部署方法。

使用静态服务器

最简单的方式就是将 build 目录中的内容上传到静态文件服务器上。比如，你可以使用 nginx、Apache 等服务器来提供服务。例如，使用 nginx 部署：

1. 安装 nginx (如果尚未安装)。

2. 配置 nginx，可以新建一个配置文件，例如：

server {
    listen 80;

    location / {
        root   /path/to/my-app/build;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
}

3. 将 build 文件夹内的所有文件放到 /path/to/my-app/build 目录下。

4. 启动 nginx，你的应用就可以通过服务器访问了。

使用云服务

现代的云平台如 Vercel、Netlify 等，提供了非常简便的部署方式。这些平台通常支持直接将你的 GitHub 仓库连接，自动进行部署。

以 Netlify 为例：

1. 前往 Netlify 官网并注册账号。
2. 创建新站点，选择连接 GitHub 并选择你的项目。
3. 在 “Build Command” 设置为 npm run build，并指定 “Publish Directory” 为 build。
4. 点击 “Deploy Site”，几秒钟后你就可以获得一个可访问的网站链接。

使用 Docker

如果你更倾向于使用容器化技术，可以将你的 React 应用打包成 Docker 镜像。

1. 创建一个新的 Dockerfile：

# 使用 Node 作为基础镜像
FROM node:14 AS build

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制应用源代码
COPY . .

# 打包应用
RUN npm run build

# 使用 Nginx 提供服务
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html

# 使容器在 80 端口上运行
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

2. 构建 Docker 镜像并运行：

docker build -t my-react-app .
docker run -p 80:80 my-react-app

现在，你的 React 应用就可以通过 http://localhost 进行访问。

小结

打包与部署是确保你的 React 应用能够在生产环境中顺利运行的重要步骤。本文介绍了如何使用 Create React App 进行打包，以及多种部署方式的具体实践。当你在下一篇中，我们将着重讨论性能优化技巧。希望大家能继续关注和学习，提高自己在前端开发中的技能！