docker部署基于nodejs的vue应用

摘要:use Docker containers for Vue.js applications

正文:

环境准备

安装docker,具体操作参考官方文档

Vue项目准备

- 在项目根目录下,添加Dockerfile文件,Dockerfile是一个文本文档,其中包含用户可以在命令行上调用以构建镜像的所有命令(注意要先清除node_modules文件夹内容)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#指定我们的基础镜像是node,版本是v8.0.0 指定的基础image可以是官方远程仓库中的,也可以位于本地仓库
FROM node:8.0.0

#指定维护者的信息
MAINTAINER mser

#将根目录下的文件都copy到container(运行此镜像的容器)文件系统的app文件夹下
ADD . /app/

#cd到app文件夹下
WORKDIR /app

#安装项目依赖包
RUN npm install
RUN npm rebuild node-sass --force

#配置环境变量
ENV HOST 0.0.0.0
ENV PORT 9528

#容器对外暴露的端口号
EXPOSE 9528

#容器启动时执行的命令 每个Dockerfile只有一个CMD命令 多了则会覆盖之前的CMD
CMD ["npm", "run","dev"]

构建镜像

- 查看本地docker镜像

1
2
3
4
[root@localhost AG-Admin-v2.0]# docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
docker.io/sebp/elk latest 2918030b8729 8 days ago 1.051 GB
docker.io/node 8.0.0 065e283f68bd 5 months ago 666.5 MB

- build

1
2
3
4
5
6
7
8
9
10
11
12
[root@localhost AG-Admin-v2.0]# docker build -t ms-ui:1.0 .
Sending build context to Docker daemon 3.897 MB
Step 1 : FROM node:8.0.0
---> 065e283f68bd
Step 2 : MAINTAINER EOI
---> Running in 275025d855c0
---> e66a97693ac5
Removing intermediate container 275025d855c0
Step 3 : ADD . /app/
---> bbb817cfbb8b
.....省略一万行
Successfully built 6af9d7ffb2ab

- 启动镜像

1
2
3
4
5
6
7
8
[root@localhost AG-Admin-v2.0]# docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
ms-ui 1.0 6af9d7ffb2ab 2 minutes ago 920.5 MB
docker.io/sebp/elk latest 2918030b8729 8 days ago 1.051 GB
docker.io/node 8.0.0 065e283f68bd 5 months ago 666.5 MB

[root@localhost AG-Admin-v2.0]# docker run -d -p 9528:9528 ms-ui:1.0
1ffc51cbea42bb4ee9f43a5987ed2569923cfe42bb5f140cf8268fd38d9dd37a

docker run -d -p 9528:9528 ms-ui:1.0中的 -d 代表是后台运行、-p 9528:9528代表本地9528映射到容器内的9528端口,ms-ui:1.0是我们要运行的镜像

- 测试是否成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[root@localhost AG-Admin-v2.0]# docker ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
1ffc51cbea42 ms-ui:1.0 "npm run dev" About a minute ago Up About a minute 0.0.0.0:9528->9528/tcp zen_lamarr
ea9400d0259b sebp/elk "/usr/local/bin/start" 6 days ago Exited (137) 2 hours ago test_elk_1
73e22237ef4e sebp/elk "/usr/local/bin/start" 6 days ago Exited (1) 6 days ago elk

[root@localhost AG-Admin-v2.0]# docker logs 1ffc51cbea42
npm info it worked if it ends with ok
npm info using npm@5.0.0
npm info using node@v8.0.0
> juicy@1.2.0 dev /app
> node build/dev-server.js
npm info lifecycle juicy@1.2.0~predev: juicy@1.2.0
npm info lifecycle juicy@1.2.0~dev: juicy@1.2.0
[HPM] Proxy created: /jwt -> http://localhost:8765
[HPM] Proxy rewrite rule created: "^/jwt" ~> "/jwt"
[HPM] Proxy created: /api -> http://localhost:8765
[HPM] Proxy rewrite rule created: "^/api" ~> "/api"
(node:15) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3
(node:15) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
DONE Compiled successfully in 10673ms07:51:55
> Listening at http://localhost:9528

docker ps -a可以查看docker的运行容器,发现我们的容器正在运行,可以通过docker logs 来查看运行日志,当看到我们熟悉的Listening at http://localhost:9528 就知道成功啦,可以在本地通过浏览器访问UI。

- 常用命令

1
2
3
4
5
6
7
8
9
docker stop <CONTAINER ID>可以停止容器运行

docker start <CONTAINER ID>可以启动容器运行

docker restart <CONTAINER ID>可以重启容器

docker rm <CONTAINER ID> -f可以强制删除在运行的容器

docker rmi <IMAGE NAME> 可以删除镜像