使用 Docker 构建前端应用

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

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

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

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

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

Dockerfile

一个样例Dockerfile如下:

 1# Stage 0, "build-stage", based on Node.js, to build and compile the frontend
 2FROM node:14 as build-stage
 3
 4WORKDIR /app
 5
 6# 配置淘宝镜像
 7RUN yarn config set registry https://registry.npm.taobao.org/
 8
 9# 复制前端依赖文件
10COPY package.json /app/
11RUN yarn install
12COPY . /app
13RUN yarn run build
14
15# 复制 nginx 配置文件
16COPY default.conf default.conf
17
18# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
19FROM nginx:1.18
20COPY --from=build-stage /app/dist/ /usr/share/nginx/html
21# Copy the default default.conf provided by tiangolo/node-frontend
22COPY --from=build-stage /app/default.conf /etc/nginx/conf.d/default.conf
23
24CMD ["nginx", "-g", "daemon off;"]

nginx 配置文件如下:

1server {
2    listen      80;
3    access_log /dev/log;
4    root /usr/share/nginx/html;
5}

启动应用

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

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

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

(未完待续)


comments powered by Disqus