Docker部署前端应用

55 阅读1分钟

以 Docker 为代表的容器是 ci/cd 里不可缺少的一环,个人理解 docker 带来的好处:

  1. 可以保证环境的一致性,从开发到生产,每个项目对应的都是同一个镜像启动的容器(所以不存在测试环境可以,上线后就不行了情况啦);
  2. 部署方便,拿到镜像后(pull 线上的或者 load 本地的)docker run就完事了;

一般在 js 项目中,涉及到 docker 部署的可分为两大类,一个是传统的前端应用,一个是基于 nodejs 的服务端应用。

前端应用

前端应用一般会采用多阶段构建(multistage)可以有效减小镜像体积,其实就是有多个FROM,一般采用两个基础镜像,一个 node 用来编译项目,另一个 nginx 来部署项目

如下Dockerfile:

# 构建容器
FROM node:14-alpine as builder

WORKDIR /app

COPY package*.json ./

RUN npm install --registry=https://registry.npm.taobao.org

COPY . /app

RUN npm run build

# 生产容器(打包后的镜像只会包含最后一个FROM的镜像)
FROM nginx:1.23-alpine

COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 80

nodejs 后端应用

后端应用就比较简单了,只需要一个 node 镜像就可以完成编译、启动

如下Dockerfile:

FROM node:16-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . /app

EXPOSE 3000
// 容器运行时执行
CMD [ "npm", "start" ]