将你的Vue应用部署在Docker环境中

将你的Vue应用部署在Docker环境中

8012年,你不得不会的技能,将你的app部署在docker环境中

这篇文章不是docker教程,内容假设你对docker有一定的了解,如果你还不知道docker是什么,docker的基本操作,点我,小半天就能入门基础操作。通过vue-cli脚手架工具,将Vue项目搭建起来之后……

在项目根目录下创建Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
FROM node:9.11.1-alpine
# 安装一个简单的http静态文件服务器
RUN npm install -g http-server
# 设置 'app' 目录为工作目录
WORKDIR /app
# 复制package.json以及package-lock.json
COPY package*.json ./
# 安装依赖
RUN npm install
# 复制项目文件到当前工作目录
COPY . .
# 构建项目
RUN npm run build
# 对外暴露8080端口
EXPOSE 8080
# 执行http-server
CMD ["http-server","dist"]

开始构建项目

docker build -t my-project/my-dockerize-vuejs-app-0.2.3 .

最后,我们就可以在docker中运行我们的Vue.js项目了

docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-0.2.3 my-project/my-dockerize-vuejs-app-0.2.3

我们上边的项目中用到了http-server,这用在原型开发,或者用户量非常小的情况下还是比较适用的,然而实际生产中,我们还是要借助巨人的肩膀,来让我们的应用更加健壮。

结合nginx,用docker部署Vue应用

编写Dockerfile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# build阶段 docker在17.05版本之后出的多阶段构建(解决构建臃肿问题)
FROM node:9.11.1-apline as build-stage
# 设置工作目录
WORKDIR /app
# 复制package.json以及package-lock.json
COPY package*.json ./
# 安装依赖
RUN npm install
# 复制项目文件到当前工作目录
COPY . .
# 构建项目
RUN npm run build

# 生产阶段(用nginx简洁版镜像)
from nginx:1.13.12-alpine as production-stage
# 直接复制构建阶段生成在dist的代码到nginx的html目录下
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 对外暴露nginx端口
EXPOSE 80
# 运行nginx
CMD ["nginx", "-g", "daemon off;"]

构建镜像
docker build -t my-project/my-dockerize-vuejs-app-with-nginx-0.1.1 .

在docker容器中运行我们的app
docker run -it -p 8080:80 --rm --name dockerize-vuejs-app-with-nginx-0.1.1 my-project/my-dockerize-vuejs-app-with-nginx-0.1.1

好了,现在你可以在localhost:8080查看你的Vue.js 应用了

[完]