阅读 876

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

前言

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

什么是Docker?

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

为什么前端需要了解Docker

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

具体实现!撸它。

Docker安装

brew cask install docker
复制代码

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

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

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

$ docker --version
Docker version 19.03.8, build afacb8b
复制代码

构建vue项目

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

获取Nginx镜像

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

docker pull nginx:alpine
复制代码

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

使用 Dockerfile 定制镜像

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

编辑Dockerfile 文件

FROM nginx:alpine
复制代码

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

打包镜像

docker build -t vuetest:v1 .
复制代码

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

查看镜像

docker images
复制代码

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

docker-images

运行容器
docker run -P -d vuetest:v1
复制代码

查看端口信息

docker ps
复制代码

访问localhost:32770

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

二次编辑Dockerfile 文件

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 文件

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:运行的容器名称可以自定义吗?我不想使用默认的!!!


    答:当然可以。

    docker run -P -d vuetest:v1
    复制代码

    将以上命令改为如下就行:

    docker run --name myproject -P -d vuetest:v1
    复制代码

    该命令的意思为运行vuetest:v1镜像,并将运行的容器名称设置为myproject,且在后台运行容器,并返回容器ID


  • 问题3: 博主可以提供更多常见的命令吗?或者高阶应用?


    答:当然可以,大家可以点击查看更多来学习更多命令。

关注下面的标签,发现更多相似文章
评论