docker compose 构建前端 app 是否容易，强烈建议中小企业采用这种方法。
对于前后端分离的 WEB 应用，一般采用npm run build的形式构建静态文件。
生成静态文件后，将静态文件放置到 nginx 的静态目录下。
因此，我们可以根据这个特点，完成 nginx 镜像的构建。
这个构建过程往往分成两步：
- 构建前端的环境，并且生成静态文件
- 构建
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，并且将前端的应用拷贝了进去。
下一步，我们可以在此基础上构建整个应用。
（未完待续）