手把手教你实现Docker 部署 vue 项目

手把手教你实现Docker部署vue项目

本文主要介绍如何教你实现Dockerdeploymentvue项目。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。

1。写在前面:

Docker作为一种轻量级的虚拟化技术，具有持续集成、版本控制、可移植性、隔离性和安全性等优点。本文利用Docker部署了一个vue的前端应用，尽可能详细的介绍了实现思路和具体步骤，方便有类似需求的同学参考。

Docker是一个开源的应用程序容器引擎，它允许开发人员将其应用程序和依赖包打包到一个可移植的容器中。该容器包含必要的资源，如代码、运行环境、依赖库、配置文件等。的应用程序。通过容器，可以实现方便、快捷、与平台解耦的自动部署方法。无论您的部署环境是什么，容器中的应用程序都将在相同的环境中运行。(更多详情请移至docker官网查看docker)

Docker已经默认安装，@vue/cli

相关版本:

Docker版本18.09.2，内部版本号6247962

vuecli-版本3.3.0

macOSMojave版本10.14.1

运行环境是macOS。如与读者 *** 作系统有差异，请自行调整。

相关镜像:

nginx:最新

节点:最新

2。具体实现:

用vuecli创建一个vue项目，修改创建的项目，在页面上写一个前端接口请求，构建一个在线资源的版本，基于nginxdocker镜像构建一个前端工程镜像，然后基于这个前端工程镜像启动一个容器vuenginxcontainer。

启动一个容器，节点Web服务器，基于节点镜像，提供后端接口。

修改vuenginxcontainer的nginx配置，使前台页面的接口请求转发给nodewebserver。

做一些优化和改进。

3创建vue应用程序

3.1vuecli创建一个vue项目

运行命令

yarnserve/npmrunserve

转到http://localhost:8081

3.2重写

稍微重写一下页面，把HelloWorld组件里的msg改成App.vue里的HelloDocker在创建的生命周期中添加接口请求。

importaxiosfrom'axios'; …… axios.get('/api/json',{ params:{} }).then( res=>{ console.log(res); } ).catch( error=>{ console.log(error); } ) ……

此时，您将在页面控制台中看到一条错误消息:

/api/json接口404。当然，这个界面此时是不存在的。暂时写到这里，以后再调整这个界面。

3.3构建vue项目

运行命令

yarnbuild/npmrunbuild

这时，项目的根中又多了一个dist。

文件夹

如果将整个dist目录传输到服务器，可以通过将项目部署为静态资源站点来直接访问它。

接下来，我们将构建这样一个静态资源站点。

4构建vue应用程序映像

Nginx是一个高性能的HTTP和反向代理服务器。这里，我们选择nginx映像作为构建vue应用程序映像的基础。

4.1获取nginx图像

dockerpullnginx

Docker镜像一个特殊的文件系统。Docker映像是一种特殊的文件系统，它不仅提供了容器运行时所需的程序、库、资源、配置等文件，还包含了一些配置参数(如匿名卷、环境变量、用户等。)为运行时准备的。镜像不包含任何动态数据，并且其内容在构建后不会更改。

docker镜像相关 *** 作包括:搜索镜像dockersearch[REPOSITORY[:TAG]]，拉镜像dockerpull[REPOSITORY[:TAG]]，查看镜像列表docker镜像ls，删除镜像:Docker镜像RM[REPOSITORY[:TAG]]/DockerRMI[REPOSITORY[:TAG]]等等。

Docker镜像名称由REPOSITORY和TAG[REPOSITORY[:TAG]]组成，TAG默认为latest。

4.2创建nginxconfig配置文件

在项目的根目录下创建nginx文件夹，并在该文件夹下创建一个新文件default.conf。

server{ listen80; server_namelocalhost; #charsetkoi8-r; access_log/var/log/nginx/host.access.logmain; error_log/var/log/nginx/error.logerror; location/{ root/usr/share/nginx/html; indexindex.htmlindex.htm; } #error_page404/404.html; #redirectservererrorpagestothestaticpage/50x.html # error_page500502503504/50x.html; location=/50x.html{ root/usr/share/nginx/html; } }

配置文件将主页定义为/usr/share/nginx/html/index.html，这样我们稍后就可以将index.html文件和相关的静态资源放到/usr/share/nginx/html目录中。

4.3创建Dockerfile文件

FROMnginx COPYdist//usr/share/nginx/html/ COPYnginx/default.conf/etc/nginx/conf.d/default.conf

构建自定义映像时，它是基于Dockerfile构建的。

nginx的命令的意思是这个镜像是基于nginx:latestmirror。

copydist//usr/share/nginx/html/命令的意思是将项目根目录下dist文件夹中的所有文件复制到镜像中的/usr/share/nginx/html/目录下。

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

4.4基于此Dockerfile文件构建vue应用程序映像

运行命令(注意不要错过最后一个“.”)

dockerbuild-tvuenginxcontainer.

-t是给镜子命名。它是基于当前目录的Dockerfile建立镜像。

检查本地映像并运行命令。

dockerimagels|grepvuenginxcontainer

至此，我们的vue应用程序映像vuenginxcontainer已经成功创建。接下来，我们基于这个图像启动一个docker。

集装箱。

4.5启动vue应用程序容器

Docker容器容器:镜像运行时的实体。图像和容器的关系就像面向对象编程中的类和实例一样。图像是静态定义，容器是图像的运行时实体。可以创建、启动、停止、删除、暂停容器，等等。

基于vuenginxcontainer映像启动容器，并运行命令:

dockerrun\ -p3000:80\ -d--namevueApp\ vuenginxcontainer

Dockerrun基于镜像启动一个容器
-p3000:80端口映射，将主机的3000端口映射到容器的80端口
-d在后台运行
-name容器名称查看Docker进程

dockerps

可以发现名为vueApp的容器已经在运行了。此时访问http://localhost:3000。

您应该能够访问vue应用程序:

到目前为止，已经通过docker容器部署了一个静态资源服务，它可以访问静态资源文件。有没有/api/json的接口数据？接下来，我们来解决这个问题。

5接口服务

部署另一个节点容器来提供接口服务。

5.1快递服务

用nodewebframeworkexpress写一个服务，注册一个返回json数据格式的routingserver.js:

'usestrict'; constexpress=require('express'); constPORT=8080; constHOST='0.0.0.0'; constapp=express(); app.get('/',(req,res)=>{ res.send('Helloworld\n'); }); app.get('/json',(req,res)=>{ res.json({ code:0, data:'Thisismessagefromnodecontainer' }) }); app.listen(PORT,HOST); console.log(`Runningonhttp://${HOST}:${PORT}`);

express应用程序需要节点环境，因此我们基于节点映像构建一个新映像。

5.2获取节点镜像

dockerpullnode

5.3编写Dock文件以对接express应用程序

FROMnode WORKDIR/usr/src/app COPYpackage*.json./ RUNnpminstall COPY.. EXPOSE8080 CMD["npm","start"]

node_modules的依赖关系是在建立镜像时通过RUNnpminstall直接安装的，并且在项目中创建一个.dockerignore文件来忽略一些直接跳过的文件:

node_modules npm-debug.log

5.4构建节点web服务器镜像

运行构建命令:

dockerbuild-tnodewebserver.

5.5启动节点服务器容器

基于新建的nodewebserver映像启动一个名为nodeserver的容器，提供接口服务端口8080，映射主机端口5000。

dockerrun\ -p5000:8080\ -d--namenodeserver\ nodewebserver

查看当前docker进程

dockerps

可以发现nodeserver的容器也正常工作。请访问下面的http://localhost:5000/json

您可以访问之前编写的json数据。

至此，后端接口服务正常启动。只有将页面请求的接口转发给后端接口服务，接口才能被调用。

6。跨域转发

将vueApp容器上的请求转发到nodeserver容器。首先，你需要知道nodeserver容器的ip地址和端口。目前已知nodeserver容器内部服务在8080端口被监听，你还需要知道ip。

6.1检查节点服务器容器的ip地址:

有许多方法可以查看容器内部的ip，这里有两种方法:

看看集装箱里面。

dockerexect-it02277acc3efcbash cat/etc/hosts

erinspect[集装箱id]直接查看集装箱信息:

dockerinspect02277acc3efc

网络的相关配置信息可在此处找到:

记录节点服务容器对应的ip，稍后配置nginx转发时会用到。

6.2修改nginx配置

Ngx配置位置指向节点服务default.conf(前端想了解Nginx，可以参考Nginx配置位置的具体写法(了解文章中Nginx的位置匹配))

添加重写规则以将/api/{path}传输到目标服务的/{path}接口。在前面的nginx/default.conf文件中，添加:

location/api/{ rewrite/api/(.*)/$1break; proxy_passhttp://172.17.0.2:8080; }

修改后我意识到一个问题:vueApp容器是基于vuenginxcontainer的镜像，但是nginx配置的default.conf是在镜像刚构建的时候直接构建的。因此，如果您需要修改default.conf，您必须重新构建一个新的映像，然后运行一个基于新映像的新容器。

7。改进

每次修改配置文件时，不能通过直接重新启动容器来使新配置生效。答案当然是肯定的。

在构建镜像时，Nginx配置不会复制到镜像中，而是直接挂载到主机上。每次配置修改后，可以直接重启容器。

7.1修改Dockerfile文件

修改vueclidemo项目下的Dockerfile。

FROMnginx COPYdist//usr/share/nginx/html/ COPYnginx/default.conf/etc/nginx/conf.d/default.conf

删除copynginx/default.conf/etc/nginx/conf.d/default.conf命令，nginx配置将通过mount命令挂载到主机上。再看一下copydist//usr/share/nginx/html/命令。如果每次构建的项目dist/的内容发生变化，就需要经历构建一个新的映像并再次启动一个新的容器的 *** 作。因此，这个命令也可以删除，容器可以通过挂载来启动。

7.2重新运行vue应用程序容器

直接基于nginx映像启动容器vuenginxnew，并运行命令:

dockerrun\ -p3000:80\ -d--namevuenginxnew\ --mounttype=bind,source=$HOME/SelfWork/docker/vueclidemo/nginx,target=/etc/nginx/conf.d\ --mounttype=bind,source=$HOME/SelfWork/docker/vueclidemo/dist,target=/usr/share/nginx/html\ nginx

-mounttype=bind，source={sourceDir}，target={targetDir}将主机的sourceDir装载到容器的targetDir目录中。

这里运行的命令比较长，如果每次都很难重新输入，我们可以将完整的命令保存到一个shell文件vueapp.sh中，然后直接执行shvueapp.sh。

这样，每次修改nginx配置或重新构建vue应用程序时，只需重启容器即可立即生效。此时，当我们访问http://localhost:3000/api/json时，可以看到接口可以正常返回，说明转发有效。

此时，接口服务的转发也被调优。

7.3配置负载平衡

后端服务通常是双机或者多机，以保证服务的稳定性。我们可以启动另一个后端服务容器，并修改nginx的配置，以优化资源利用率，最大化吞吐量，减少延迟并确保容错配置。

根据前面第4.5节中的类似 *** 作启动一个新容器，并根据第5.1节中的类似 *** 作检查新容器的IP(172.17.0.3)。

修改nginx/default.conf(在location/api/)中添加上游并修改proxy_pass:

upstreambackend{ server172.17.0.2:8080; server172.17.0.3:8080; } …… location/api/{ rewrite/api/(.*)/$1break; proxy_passbackend; }

8。写在后面

不习惯命令行的同学可以选择Kitematic来管理docker容器的状态、数据目录和网络。所有的容量 *** 作都可以可视化，这里就不多介绍了。有兴趣的同学可以自己体验一下。

9摘要

Docker提供了非常强大的自动化部署模式和灵活性，解耦多个应用程序，并在开发中提供敏捷性、可控性和可移植性。本文以vue项目为例，实现了使用docker部署一个前后分离项目的完整步骤，希望能给想要拥抱docker的同学带来一些帮助。

参考资源

Docker官网
nginx官网
docker从初学者到实践者
Kitematic用户指南
前端想了解nginx什么
[/h

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。