docker compose 构建前端 app 是否容易，强烈建议中小企业采用这种方法。

对于前后端分离的 WEB 应用，一般采用npm run build的形式构建静态文件。 生成静态文件后，将静态文件放置到 nginx 的静态目录下。

因此，我们可以根据这个特点，完成 nginx 镜像的构建。

这个构建过程往往分成两步：

  1. 构建前端的环境，并且生成静态文件
  2. 构建nginx镜像，将静态文件拷贝

Dockerfile

一个样例Dockerfile如下：

# Stage 0, "build-stage", based on Node.js, to build and compile the frontend
FROM node:14 as build-stage

WORKDIR /app

# 配置淘宝镜像
RUN yarn config set registry https://registry.npm.taobao.org/

# 复制前端依赖文件
COPY package.json /app/
RUN yarn install
COPY . /app
RUN yarn run build

# 复制 nginx 配置文件
COPY default.conf default.conf

# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:1.18
COPY --from=build-stage /app/dist/ /usr/share/nginx/html
# Copy the default default.conf provided by tiangolo/node-frontend
COPY --from=build-stage /app/default.conf /etc/nginx/conf.d/default.conf

CMD ["nginx", "-g", "daemon off;"]

nginx 配置文件如下：

server {
    listen      80;
    access_log /dev/log;
    root /usr/share/nginx/html;
}

启动应用

  • 构建前端镜像：docker build -t frontend .
  • 启动前端应用：docker run -it -p 3000:80 -d frontend .

这样，我们在主机的3000端口启动了nginx，并且将前端的应用拷贝了进去。

下一步，我们可以在此基础上构建整个应用。

（未完待续）