前端项目打包容器化发布

以经典vue项目为例

项目根目录新增Dockerfile文件

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建镜像

docker build -t vuejs-cookbook/dockerize-vuejs-app .

运行容器

docker run -it -p 8080:80 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app

这样你就可以通过地址 http://localhost:8080/来访问你的项目啦！

参考资料：

https://v2.vuejs.org/v2/cookbook/dockerize-vuejs-app.html