Docker + Nginx 镜像部署 Vue 项目

发表于 更新于 阅读次数： 本文字数： 588 阅读时长 ≈ 1 分钟

简单介绍 Docker

Docker 真是个好东西，很好的降低了不同环境发版的兼容性问题。无论是 Linux, Windows 或是 Mac OS，再也不用怕系统环境不同，软件版本不同导致的项目无法启动。这些问题只需要自定义 Docker 镜像，并在 Docker 中启动，就能搞定部署啦。

部署 Vue 项目

传统的部署一般为编译后放在 Nginx 目录下，或者放在 Tomcat 目录下。玩了有一阵子 Docker 了，就试试用 Docker 来部署吧。

本地操作

首先给本地的vue项目打包

1
npm run build

执行命令之后项目根目录下会出现 dist 文件夹，将其上传至服务器。

服务器操作

编写 Dockerfile

新建 Dockerfile

vi Dockerfile

1
2
3
4
5
6
7
8
9
10
#导入nginx镜像
FROM nginx:1.13.7
MAINTAINER amosannn <amosannn@gmail.com>
#把当前打包工程的html复制到虚拟地址
COPY dist/ /usr/share/nginx/html/
#使用自定义nginx.conf配置端口和监听
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/

RUN /bin/bash -c 'echo init ok!!!'

Nginx配置

新建default.conf

vi default.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
server {
# 项目中定义的端口号
    listen       8000; 
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/log/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

Docker 打包

打包前项目目录下应该有这几个文件(夹)：default.conf, dist,Dockerfile

1
docker build -t zhiliao:v1 .

别忘了末尾的小点点

最后出现这两条提示即为打包成功

1
2
Successfully built 6f656946fde3
Successfully tagged zhiliao:v1

查看镜像

1
docker images

如果在结果中看到，则为打包成功

1
2
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
zhiliao             latest              c5d9c47be079        17 minutes ago      111MB

运行

1
docker run -d -p 80:8000 zhiliao:v1

命令中的-d意为后台运行

-p 为端口号，前半部分为外网访问的端口，后半部分为 Nginx 反向代理寻找的内部端口

查看运行结果

1
docker ps

这条命令等价于docker container ls，加上 -a 则可显示全部

1
2
3
[root@VM_108_54_centos zhiliao-vue]# docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS                      PORTS               NAMES
bdd5842a4cae        zhiliao:v1          "nginx -g 'daemon ..."   42 seconds ago      Exited (1) 41 seconds ago                       frosty_joliot

查找日志

如果遇到程序崩溃或者镜像启动失败

1
docker logs 'CONTAINER ID'

使用 ps 命令可以找到到 CONTAINER ID

1
2
3
[root@VM_108_54_centos zhiliao-vue]# docker logs bdd5842a4cae
2018/03/28 07:11:51 [emerg] 1#1: unknown directive "//这里使用项目中的端口号" in /etc/nginx/conf.d/default.conf:3
nginx: [emerg] unknown directive "//这里使用项目中的端口号" in /etc/nginx/conf.d/default.conf:3

参考链接：

使用 Dockerfile 定制镜像