手把手教你Vue项目实现本地Docker部署

前言

近几年来，Docker 技术的应用已经越来越流行，目前已经产生前端工程Docker 化，身为前端开发的我，花了几天时间研究了下 Docker 的知识点，并实现了 Docker 本地部署Vue项目。希望可以给有需要的同学一点帮助。

什么是Docker?

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的Linux 机器上，也可以实现虚拟化，容器是完全使用沙箱机制，相互之间不会有任何接口。简言之，就是可以在 Linux 上镜像使用的这么一个容器。点击查看更多可以了解更多Docker知识。

为什么前端需要了解Docker

首先，目前产生前端工程 Docker 化的趋势，学习并且掌握这个技术有利于提高自身竞争力。
其次，前端 Docker化有利于前端开发工程师更专注于开发本身，弱化软件环境，降低项目部署难度。

具体实现！撸它。

Docker安装

1	brew cask install docker

本人是 mac 电脑，所以介绍下 mac 下的安装方式，windows 或其他系统的同学，可以点击查看更多了解其他安装方式。

在载入 Docker app 后，点击 Next，可能会询问你的 macOS 登陆密码，你输入即可。之后会弹出一个 Docker 运行的提示窗口，状态栏上也有有个小鲸鱼的图标。

启动终端后，通过命令可以检查安装后的 Docker 版本。

1 2	$ docker --version Docker version 19.03.8, build afacb8b

构建vue项目

首先，选择一个创建好的Vue项目（本案例是采用一个前后端分离的单页Vue项目）
接下来，运行 npm run build 命令，生成一个打包的 dist 文件（ps：具体打包命名根据项目配置而定。）
你会发现，项目中多了一个 dist 文件夹。

获取Nginx镜像

本案例的Vue 项目是一个前后端分离项目，前端界面在服务器上只需要能被外部访问到即可，所以直接使用 Nginx 的 Docker 来部署就行。

1	docker pull nginx:alpine

本博主推荐使用 alpine 版本，因为这个体积小，只需要 19.7MB，而 latest 版本需要 127MB。

使用 Dockerfile 定制镜像

首先，在项目根目录中新建一个文件，命名为 Dockerfile

编辑Dockerfile 文件

1	FROM nginx:alpine

FROM：定制的镜像都是基于 FROM 的镜像，这里的 nginx 就是定制需要的基础镜像。后续的操作都是基于nginx。

打包镜像

1	docker build -t vuetest:v1 .

意思是当前目录的 Dockerfile 创建了一个镜像，创建镜像的仓库是vuetest, 标签是v1。

查看镜像

1	docker images

命令执行后，可以查看镜像信息。

docker-images

运行容器

1	docker run -P -d vuetest:v1

查看端口信息

docker ps

docker-images

访问localhost:32770
docker
纳尼？这算哪门子的部署？哈哈哈，小伙伴们莫急，且听我慢慢道来！在 Dockerfile 中我们只是引入了nginx 镜像，我们开发的代码并不在其中。所以在打包镜像时，需要将我们开发的代码也打包其中。

二次编辑Dockerfile 文件

1 2	FROM nginx:alpine COPY ./dist/ /usr/share/nginx/html/

在上次的 Dockerfile 文件中，添加了 COPY 内容，意思是将 dist 文件，复制到 /usr/share/nginx/html/中。其中/usr/share/nginx/html/ 是 Nginx 的默认文件路径。

重新打包镜像，并运行容器

docker build -t vuetest:v1 .
docker images
docker run -P -d vuetest:v1
docker ps

我们看到终端输出的 port 是32782，我们运行 localhost：32782，发现访问ok，但是页面一刷新就提示nginx 404。
这个原因是因为在 Vue 项目中,我们使用了 history 路由模式。这个模式会导致刷新后找不到当前页面。点击了解更多查看更多解决方案。
这边打算采用官方推荐的做法，在 Nginx 中添加一些配置。

新建nginx.conf文件

新建并编辑 nginx.conf 文件内容

server {
    listen       80;
    server_name  localhost;
    # uding gzip
    gzip  on;
    gzip_min_length 1k;
    gzip_buffers 16 64k;
    gzip_http_version 1.1;
    gzip_comp_level 9;
    gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
}

解决404 问题主要是 try_files $uri $uri/ /index.html =404; 这段代码的意思是，如果当前访问的地址不存在，就指向index.html
为了解决资源过大问题，这边采用了gzip压缩。减少体积。

三次编辑Dockerfile 文件

1
2
3

FROM nginx:alpine
COPY ./dist/  /usr/share/nginx/html/
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

COPY /nginx.conf/etc/nginx/conf.d/default.conf
命令的意思是将根目录下的 nginx.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 nginx.conf 配置来替换 nginx 镜像里的默认配置。

重新打包镜像，并运行容器

docker build -t vuetest:v1 .
docker images
docker run -P -d vuetest:v1
docker ps

访问终端生成好的端口号，刷新ok。大功告成！！！

Tips

问题1：命令行太多，记不住哇~还有别的方案吗？

答：我们之前下载的 Docker 是具有图形界面的，我们可以配合图形界面来使用，比如：我们可以点击小鲸鱼-Dashboard，查看当前容器的运行状态，还可以一键点击访问配置好的项目页面地址。
问题2：运行的容器名称可以自定义吗？我不想使用默认的！！！
答：当然可以。
1
docker run -P -d vuetest:v1
将以上命令改为如下就行：
1
docker run --name myproject -P -d vuetest:v1
该命令的意思为运行vuetest:v1镜像，并将运行的容器名称设置为myproject，且在后台运行容器，并返回容器ID
问题3: 博主可以提供更多常见的命令吗？或者高阶应用？
答：当然可以，大家可以点击查看更多来学习更多命令。