Vue项目的部署

       近期我完成了一个基于Vue的记账项目，下面我将分享我的器上远程部署过程。

       一、部署部署本地预览

       源代码编写完成后，码服目首先将其上传至GitHub，服务例如：git@github.com:Xin-hai/haiqing-1.git。器上瑜伽源码公众号这个仓库称为源代码仓库，部署部署其中dist目录默认不会上传。码服目根据Vue CLI部署指南，服务需要进行本地预览，器上确保yarn build打包后的部署部署dist目录正确无误。在终端执行官方推荐的码服目命令，启动HTTP服务器访问dist目录。服务

       由于我使用yarn进行包管理，器上因此使用yarn命令进行安装。部署部署在新的预览地址中，我比较了文件，发现打包后的金牛元帅源码css和js文件体积比yarn serve得到未打包的体积更小。检查完dist目录打包无误后，可以关闭预览。

       二、GitHub Pages手动推送更新

       新建一个远程仓库地址用于存放dist目录的相关代码，这个仓库仅用于网页展示，如git@github.com:Xin-hai/haiqing-1-website.git。此仓库最好与源代码仓库名称相似，例如在后面加上-website。

       在vue.config.js中设置正确的publicPath。找到vue.config.js并添加如下代码，将'/my-project/'修改为新建的仓库地址名'/haiqing-1-website/'。

       在项目目录上创建deploy.sh并按照官方写入相关代码。我使用的是yarn，进行了一点小的修改。主要修改的是git push -f git@github.com:Xin-hai/haiqing-1-website.git master:gh-pages这句代码，其中的haiqing-1-website是前面新建的存放dist的仓库，也是net扫描源码用于网页展示的仓库。

       在终端运行sh deploy.sh即可自动部署。代码会上传到haiqing-1-website仓库的gh-pages分支上，此分支会自动开启GitHub的pages功能，稍等片刻就能看到网页链接。注意，源代码仓库不会自动更新，需要自己git push相关代码。

       三、码云部署

       为了优化访问速度，我使用了码云gitee。同样，在码云上新建好仓库后，复制ssh地址，将deploy.sh中的git push -f git@github.com:/.github.io.git master修改为码云的。

       在gitee的服务选项中查看Gitee pages功能。

       ------------------------------------------..补充

       在经历一个星期的实名认证之后，我的源码出售程序码云终于可以使用Gitee page功能了。在推送时，除了修改deploy.sh为如下，还需要将vue.config.js中的仓库地址改为码云中的远程仓库地址如下。

       注意，gitee需要手动更新，每次git push后需要手动更新才能看到效果。

       最后，是我最近做的海青记账的GitHub源代码仓库和Gitee源代码仓库，欢迎大家体验和提出建议。

在boa服务器上可以部署vue吗？

       在BOA服务器上部署Vue是可行的，只要服务器满足Vue应用程序的运行要求即可。

       下面是一些在BOA服务器上部署Vue应用程序的基本步骤：

       1. 确保你的BOA服务器上已经安装了Node.js和npm。你可以使用以下命令验证安装：

       ```bash

       node --version

       npm --version

       ```

       如果它们没有显示版本号，则需要先安装Node.js和npm。

       2. 在本地构建Vue应用程序。在命令行中进入你的Vue项目根目录，并运行以下命令：

       ```bash

       npm run build

       ```

       这将在项目的指标源码图片`dist`目录中生成用于生产环境的构建文件。

       3. 将构建文件上传到BOA服务器中。使用FTP或其他文件传输工具将构建文件复制到BOA服务器的合适目录中。

       4. 配置BOA服务器以正确地托管Vue应用程序。具体的配置方法可能因服务器和配置而异。一种常见的方法是配置BOA服务器的虚拟主机，并将网站的根目录指向Vue应用程序的构建文件所在的目录。

       5. 重启BOA服务器使配置生效。

       6. 测试访问Vue应用程序。在浏览器中输入你的服务器的域名或IP地址，应该能够访问到部署的Vue应用程序。

       请注意，在部署Vue应用程序时，你还需要考虑服务器的安全性、域名配置、SSL证书等其他设置。确保你的服务器和应用程序的配置符合你的需求和最佳实践，并依据需要进行相应的调整。

Docker + Nginx 部署 Vue 项目

       本文将引导你通过Docker和Nginx部署Vue项目，提供详细实现步骤和关键注意事项。首先，理解Docker作为轻量级虚拟化技术带来的优势，如持续集成、版本控制、可移植性、隔离性和安全性。Docker提供了一种方便快速的自动化部署方式，确保应用程序在不同环境中稳定运行。

       在运行环境为macOS的情况下，假设已经安装了docker和@vue/cli。默认版本适应多数情况，若与你的操作系统存在差异，请自行调整。

       接下来，创建Vue应用并进行初步配置。使用vue cli创建项目`vue create vueclidemo`，通过`yarn serve`命令启动应用，访问`http://localhost:`查看项目界面。在`App.vue`中修改页面，将`HelloWorld`组件中的`msg`参数改为`Hello Docker`，同时在`created`生命周期中加入接口请求。此时页面会显示报错信息，因为`/api/json`接口尚未实现，这里暂时留白，后续将加入接口服务。

       构建Vue项目后，项目根目录下会新增`dist`文件夹。将`dist`目录及其内容上传至服务器，作为静态资源站点，可直接访问项目。

       为了将Vue应用与静态资源站点整合，选用Nginx作为反向代理服务器。首先获取并构建Nginx镜像，创建配置文件`default.conf`，定义首页指向为`/usr/share/nginx/html/index.html`。构建Vue应用镜像时，基于Nginx镜像创建包含Vue应用的镜像，并启动容器。此时，通过访问`http://localhost:`即可访问Vue应用。

       为了实现接口服务，部署一个Node容器来提供API。使用Node.js框架Express构建服务，注册返回JSON格式的路由。构建Node服务镜像，启动容器`nodeserver`，提供接口服务在端口``，并通过宿主机端口``映射。访问`localhost:/json`可以获取接口数据。

       为了解决Vue应用请求转发到Node接口服务的问题，需要修改Nginx配置文件以实现跨域转发。首先查看Node服务容器的IP地址和端口，将接口请求转发到Node服务。若修改配置文件后，需确保每次更改后仅重启容器即可生效，避免重新构建镜像。为此，修改Dockerfile，将Nginx配置文件挂载至宿主机，实现动态更新。

       部署后端服务时，考虑负载均衡以提升资源利用率、减少延迟和确保容错配置。启动额外的后端服务容器，并调整Nginx配置文件以优化部署。

       最后，建议使用Kitematic等可视化工具管理Docker容器，提高操作便捷性。通过定期推送高质量文章，欢迎关注与点赞。本文旨在提供Vue项目使用Docker部署的完整步骤，希望对探索Docker的同学有所帮助。