Docker如何部署前端项目

1. 1. github 上先下载 create-react-app 的源码。
2. 2. 在项目根目录下创建 Dockerfile 文件,并编写以下内容
3. 3. 创建 image 文件
4. 4. 从 image 文件生成容器
5. 利用镜像缓存
6. 总结

docker 入门之部署前端项目，以 create-react-app 为例。

1. github 上先下载 create-react-app 的源码。

git clone https://github.com/facebook/create-react-app.git

执行ls查看一下并cd进入该项目.

2. 在项目根目录下创建 Dockerfile 文件,并编写以下内容

vi Dockerfile  // 创建文件

编写内容：

# node 版本号
FROM node:15-alpine
# 工作目录
WORKDIR /create-react-app
# 添加所有文件到 create-react-app 目录
ADD . /create-react-app
# 执行命令
RUN npm install && npm run build && npm install -g http-server
# 暴露端口号
EXPOSE 3000
# 容器启动之后, 执行 http-server 注：./build 是指打包后的文件
CMD http-server ./build -p 3000

3. 创建 image 文件

docker image build --progress plain -t create-react-app-demo .

执行成功后, 查看一下 image 文件：

总结

• 镜像中使用基于alpine的镜像，减小镜像体积；
• 镜像中需要锁定 node 的版本号，尽可能也锁定 alpine 的版本号，如node:15-alpine；
• npm ci替代npm i，避免版本问题及提高依赖安装速度；
• package.json 单独添加，充分利用镜像缓存；
• 只提取编译文件（多阶段构建），减小镜像体积。