记一次在宝塔环境下通过docker部署vue.js框架网站并配置nginx反代实现正常的域名访问

发布于 2020-11-15  133 次阅读


起因

自己只会写html和简单的php页面,对于Laravel、ThinkPHP、Vue.js这类php框架完全搞不懂(主要是中文文档太散了,而且内容很空,没有框架经验真的不好入门)。

有天晚上想着查查pjax和ajax是个啥东西,然后一查,好家伙,这玩意也太牛逼了,直接让网页的视觉交互上升了一个档次。但是网上关于这俩的中文文章又都是这么几份,复制来复制去的,没有适合入门的,于是就放弃了。(菜)

不过想着要不直接研究一下被吹得飞起的vue,可能说不定就悟了呢?于是就找了个Creative Tim大佬的Vuetify.js实现的后台模板 Vuetify Material Dashboard

经过

网上关于如何让宝塔和Vue共存的文章又是寥寥无几(可能是前端的程序员不兴写笔记这一套?)然后想着要不试试Docker里跑Vue把机器环境隔离开来,这样子就不会存在端口冲突啥的问题了。(其实我连Docker怎么用也不太清楚,只知道这玩意是个牛逼哄哄的虚拟机)

新建网站

在宝塔网站管理中新建个网站,绑定一下需要反代的那个域名或者IP(不太推荐IP,因为用IP的话还不如IP+端口直接访问来的快)。

安装宝塔插件 Docker管理器

这个就去宝塔的软件商店里安装就行了,反正傻瓜式的,没什么好说的。
Docker管理器

选择合适的镜像

众所周知,虚拟机都需要镜像才能运行虚拟系统,所以Docker也需要选择合适的虚拟镜像来运行Vue。

我第一次选的是nignx的镜像,因为网上关键词为宝塔VueDocker的文章都说要用这个(也可能是我理解错了)。

我装上去之后,建了个容器发现node.js还要自己装,自己装了之后又是各种版本冲突,直接裂开...

第二次我选择直接用node的镜像,这回上去node.js有了,npm也可以直接跑,舒服了。

创建Docker容器

创建Docker容器

如上图所示,镜像选择node,IP的话不用管,反正是内网的Docker容器,转外网用nginx反代就行。

端口映射是重点,容器端口指Docker容器内部运行程序的端口,比如我选的这个 Vuetify Material Dashboard 的http服务用了8080端口,那么这里就填8080。然后是服务器端口,指的是需要映射到宝塔环境的服务器中的端口,即:在宝塔安全中开放了这个端口的话,那么在外网访问这个服务器端口,就等同于访问到Docker容器内的8080端口,这里我们填大端口号,因为小端口号一般都有程序占了,这里注意千万别按照自己的理解填成80或者443,不然会和nginx服务冲突。这里我填的是40001,应该是没有知名程序占用了这个端口的,后面还需要其他容器的话,也可以4000240003这样接下去。

目录映射是可选项,如果喜欢在宝塔环境中编辑vue项目,那就开目录映射,如果不需要的话,可以跳过这一步。容器目录是指Docker容器内部的文件目录,我一般比较喜欢存在\home里,因为这个分区基本上没程序乱放东西,很干净,自己的文件很好找,所以填\home的下级目录,我这里是\home\vmd服务器目录的话,因为等一下需要和域名对接,所以宝塔会在新建域名网站的时候,新建个文件夹,正好可以充分利用一下这个文件夹,所以这里我们就填这个文件夹\www\wwwroot\example,之后把vue项目文件都放在网站的这个目录就行,几乎就等同于正常的部署网站了。

端口映射和目录映射填好后记得点加号,不然是白忙活。

环境变量的话,如果你的vue项目用不到就可以不用。

内存配额这个由于我对vue的硬件需求不太了解,先填个512试试,应该是够用的。CPU权重一般100即可。

执行命令这个选项似乎是用于容器开机自启时执行的,我还没搞明白vue的启动机制,就先不填了。(了解的可以填一下,理论上是需要填个vue启动命令的)

最后创建就行。

部署vue项目

我因为设置了目录映射,所以直接在主机ssh中把项目git clone到网站目录了。

去容器中,进入你项目的目录,如果有网站映射那就是映射的那个目录。

运行npm install命令,安装一下项目所需的npm各种环境包,如果有报错的话,自行解决。

运行npm run dev,然后等个几分钟你的项目就成功跑起来了。(不知道为啥是dev,反正我对vue根本不了解,这条命令应该不唯一)

设置nginx反代

在宝塔的网站管理中,创建反向代理,代理名称随便填,目标URL填写http://127.0.0.1:+你映射出来的那个端口,其他保持默认。
设置nginx反代

结果

测试网站能否正常访问

直接访问你网站绑定的域名,理论上已经可以正常访问了。

如果不能访问,可以试试看在宝塔安全中,开启你映射的端口,然后通过IP+端口的形式访问,如果这回能访问那么就是反向代理设置问题,请自行解决。如果依旧不能访问,那么就是npm没run成功或者项目本身的问题,请自行解决。

正常情况并不需要在宝塔安全中添加任何端口。


The End