从零开始在Linux上部署前后端分离的Vue+Springboot项目项目是放在云服务器上的，做完之后发现了很多问题，所以把整个部署过程记录下来。使用的技术栈如题一般是Vue+Springboot，但是还是要提一下详细的版本，因为在解决问题的过程中，发现由于开发环境不同，会有很多影响。前提往往会导致很多不必要的误会，甚至误操作，浪费时间。详细版本如下：Vue2.6.11Vue-cli4.5.0Springboot2.1.1MySQL8.0.13(特别注意)Nginx1上传工具部署第一步是将文件上传到云服务器，后续将在云服务器上进行操作的方式有很多种。我这里选择了Xshell和Xftp，都是NETSARANG公司的。需要注意的是，免费家庭版的申请地址在中国官网是隐藏的。您可以免费直接访问Xshell和Xftp。下载权限，需要填写你的姓名和邮箱地址。1.1Xftp首先在Xftp中新建一个连接，填写主机地址和用户名及密码。如果连接成功，可以看到左边标签页是本地文件目录，右边标签页是云服务器文件目录。将文件拖到另一边，即可上传和下载对应的文件。下面的传输选项卡将显示具体进度。图形界面还是挺直观的，就不多解释了。我没有找到太多关于Linux目录规范的资料，所以我在根目录下新建了一个名为app的文件夹来存放网站应用。我们将在下一节中解释网站的包装。在这里我们学习如何只上传文件。1.2XshellXshell的连接建立方法与Xftp类似。填写主机地址，连接后输入用户名和密码。连接后即可对云服务器进行操作。通过这两个工具与云服务器建立联系后，我们就可以开始关注网站应用本身的问题了。2、前端相对来说，前端部署并没有遇到太多的问题，所以还是先从前端说起吧。2.1Vue由于我使用的是Vue-cli，项目完成后，执行命令npmrunbuilddistfolder，程序会自动打包到项目目录下，打包后的目录结构如下：之后，上传这个文件夹到通过Xftp访问云服务器。之前我新建了一个文件夹来存放，因为我们可能还有其他的项目，后台也需要一个文件文件夹，所以具体的文件夹结构如下：使用Xftp图形界面可以快速新建文件夹，或者也可以使用Xshell中的命令，看个人喜好和习惯。如果需要经常使用Linux系统，建议使用命令多练习。在windows端开发的时候，可以在控制台使用npmrunserve命令快速启动一个本地网站，但是这样的网站只能在内网访问，肯定达不到我们原本外网访问的目的网络，所以这里要使用反向代理服务器，我选择了目前广泛使用的Nginx。2.2选择Nginx的安装目录cd/usr/local/src在服务器上安装Nginx之前先安装几个依赖：yuminstallgccyuminstallpcre-develyuminstallzlibzlib-develyuminstallopensslopenssl-devel这些依赖的作用可以参考这个文章在Linux上安装Nginx取决于环境和库、Nginx安装、Nginx服务命令。我没有一一尝试过如果缺少某个依赖项会发生什么。在安装Nginx之前已经安装了这些依赖项。下载Nginx安装包并解压。您可以从官网选择需要的版本。wgethttp://nginx.org/download/nginx-1.13.7.ta??r.gz#下载tar-xvfnginx-1.13.7.ta??r.gz#执行配置安装cdnginx-1.13.7#切换目录。/configure#执行配置make&&makeinstall#编译安装（默认安装在/usr/local/nginx）安装完成后，查看版本并启动/usr/local/nginx/sbin/nginx-v#check版本cd/usr/local/nginx/sbin#cd到nginx安装位置的sbin目录下。/nginx#启动nginx这里可以先尝试访问服务器的外网IP。如果出现Welcometonginx，则表示启动成功。Nginx安装完成后，修改配置文件对应我们的网站应用。修改文件的方法也可以选择使用Xftp或者Linux上使用命令来操作location/{root/app/osd_mall/vue_app/dist;indexindex.htmlindex.htm;}location/api{proxy_passhttp://localhost:28019/api/v1;}这里映射了两个地址。第一个是网站前端部分的主体。不应该有太多的差异。主要问题应该集中在第二个地址上，由于我在做一个前后端分离的项目，而且后端接口也包含在项目中，所以肯定存在跨域问题。在开发过程中，使用Vue的Proxy从前端进行处理。代码如下：然后在axios中配置对应的名字，即api，这样就可以解决跨域问题，不过这只是本地开发使用的方法。在Linux服务器上，Nginx反向代理可以更安全的处理跨域问题，所以上图中的代码不再需要，打包前需要注释或删除。axios.defaults.baseURL=process.env.NODE_ENV=='开发'?'/api':修改'/api'配置后，测试配置文件，如果没有问题，重启Nginx服务。/nginx-t#测试配置文件。/nginx-sreload#RestartNginx这时候我们可以通过我们的外网IP访问到前端页面，但是由于后端接口还没有配置，所以基本没有数据和图片。很明显，上图中的本地地址http://localhost:28019/api/v1就是我们后端接口的地址，所以接下来我们来讲解一下后端的部署。3相对于前端，后端遇到的问题层出不穷，中间一波三折。好在最后都解决了，也有一部分是开头强调的版本问题。3.1Java首先需要安装Java环境，从官网下载需要的版本，然后像之前一样通过Xftp上传：创建目录并解压：mkdir/usr/javatarzvxfserver-jre-8u271-linux-x64.tar.tar.gz-C/usr/java为了全局使用java命令，配置环境变量：#修改环境配置文件vi/etc/profile#编辑配置文件，添加如下三行exportJAVA_HOME=/usr/java/jdk1.8.0_271exportPATH=$JAVA_HOME/bin:$PATHexportCLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar#启用环境变量source/etc/profile#验证是否配置成功，查看java版本java-version3.2SpringbootSpringboot项目的打包部署有多种选择。具体可以参考这篇java项目部署linux服务器几种启动方式总结经验。这里我选择使用jar包部署，通过maven打包的步骤我就不多说了。再次通过Xftp将jar文件上传到服务器。在我的屏幕截图中，有一个保留控制台日志的开发版本。通常，只需要一个。3.3屏幕上面的文章提到java项目会在前台运行。当我们的Xshell窗口关闭的时候，项目实际上也会关闭，但是让连接的机器保持开机是不合理的，所以使用nohub命令让jar程序保持后台挂载。这里介绍另一种方法，就是Screen工具。Screen是GNU项目开发的一款用于命令行终端切换的免费软件。用户可以通过软件同时连接到多个本地或远程命令行会话，并在它们之间自由切换。GNUScreen可以被认为是窗口管理器的命令行界面版本。它为管理多个会话提供了统一的接口和相应的功能。Screen预装在一些流行的发行版上，您可以使用以下命令检查它是否安装在您的服务器上。如果screen-v不可用，可以通过内置的包管理器轻松安装。yum-yinstallscreenscreen-Syourname#创建名为yourname的sessionscreen-ls#列出当前所有sessionscreen-ryourname#返回yournamesessionscreen-dyourname#远程detach某个sessionscreen-d-ryourname#EndUsingtheScreeninthe当前session和返回yournamesession就像是切换窗口一样，这样在服务器性能允许的情况下可以同时挂载多个应用，管理起来也比较方便。3.4MySQL1。安装刚开始部署MySQL的时候我几乎忽略了它，后来我没有意识到它是最耗时的部分，但如果你按照正确的步骤进行，它并不难。我们可以通过包管理器yum安装大部分工具。上面的屏幕就是这种情况。本来以为MySQL也一样，后来查了一下，一开始确实是这样，但是自从MySQL被收购后，就出现了版权问题，所以CentOS7不再支持MySQL，而是在内部集成了MariaDB。#列出所有已安装的rpmpackagerpm-qa|grepmariadb#卸载（注意“版本号”以当前系统显示的版本信息为准）rpm-emariadb-libs-5.5.37-1.el7_0.x86_64#如果提示依赖检测失败，可以强制卸载rpm-e--nodepsmariadb-libs-5.5.37-1.el7_0.x86_64#安装依赖yuminstallvimlibaionet-tools后，我们要决定是否直接从服务器下载安装repo源或者去官网下载一个上传到服务器。一开始是按照一些教程的步骤直接从repo源下载的，但是因为选择的版本不对，导致程序最终无法正确建立连接。经过反复尝试，我选择了社区版官网下载。的版本。进入网站默认最新版本。如果要查找之前的版本，点击Archives，在新页面选择对应的版本。然后选择操作系统，CentOS系统是RedHat的社区发行版，内核是一样的，也可以使用通用版（Generic）。下载bundle包，解压如图5个文件上传到服务器，安装mysql-community-common、mysql-community-libs、mysql-community-client、mysql-community-server、mysql-community-依次释放。#以此类推rpm-ivhmysql-community-common-8.0.13-1.el7.x86_64.rpm#如果出现“dependencydetectionfailed”问题，则加上--force--nodeps强制安装rpm-ivhmysql-community-common-8.0.13-1.el7.x86_64.rpm--force--nodeps现在常见的MySQL版本一般是5.7和8.0之后的几个小版本。根据使用的版本不同，后续的配置也大不相同。我使用的版本是8.0.13，同样以8.0版本为例。2、重置密码这一步遇到了权限问题、版本不正确、字段不同等问题。因为部署的时候问题太多，所以没有截图。这里是总体思路：首先，登录MySQL安装完成后，可能会有一个随机的密码，记录下来，用这个密码登录数据库。如果存在权限问题，首先对MySQL文件夹进行授权。登录后，通过数据表修改默认密码。命令如下：#login,-p后面没有空格，直接输入密码即可，5.7版本默认密码为空，8.0版本使用随机密码mysql-uroot-ppassword#switch数据库使用mysql；#修改密码（不能使用123456之类的简单密码，需要大小写和数字，如果还是想使用简单密码，见下文）updateusersetpassword=password('123456')whereuser='root';#退出退出；设置完成后，可以使用新密码登录，如果设置有问题或者随机密码没有记录，修改本地文件重设密码的方法，这里不再介绍.如果只是个人开发，不想使用太复杂的密码怎么办？这个问题可以通过修改密码规则来解决。同样，5.7和8.0版本也有区别：#5.7setglobalvalidate_password_policy=0;setglobalvalidate_password_length=1;#8.0setglobalvalidate_password.policy=0;setglobalvalidate_password。length=1;#查看密码验证变量SHOWVARIABLESLIKE'validate_password%';密码级别表PolicyTestsPerformed0或LOWLength1或MEDIUMLength；数字、小写/大写和特殊字符2或STONGLength；数字、小写/大写和特殊字符；di文件3.远程连接每次要查看数据库都要登录linux，很不方便，界面也不友好。如果我们想使用本地的Navicat访问远程的数据库，应该怎么设置呢？首先关闭防火墙或者打开数据库的3306端口（最好打开该端口）#查看防火墙状态systemctlstatusfirewalld#打开防火墙服务systemctlstartfirewalld#打开指定端口firewall-cmd--zone=public--add-port=3306/tcp--permanent#reloadfirewall-cmd--reload如果你用的是云服务器，记得在平台上开放指定端口：设置防火墙后，还是不能登录在远程，因为我们没有授权用户，先查询一下用户表：selectuser,hostfromuser;可以看到除了remote是localhost，remote是我创建的用于远程登录的用户，host代表用户可以在哪个地址下登录，“%”代表所有地址都可以。5.7之前的版本可以通过授权直接和隐式创建用户，8.0之后就不行了。也可以直接修改root用户的host，但是这样登录的时候会有一些小的区别。具体我忘记了。这里我推荐创建一个新用户。/*创建一个用户，这里的密码也受前面设置的密码级别的限制*/CREATEUSER'用户名'@'%'IDENTIFIEDBY'password';/*授权*/grantallprivilegeson*.*to'user姓名'@'％';执行后，使用Navicat远程登录。如果报错1251clientdoesnotsupportauthentication，说明MySQL8和Navicat的加密方式不一样。修改加密方式：alteruserusernameidentifiedwithmysql_native_passwordby'password';这样就可以直接从本地访问远程数据库了。4、卸载MySQL如果不幸在安装过程中遇到问题，各种问题需要重新安装MySQL，可以按照这篇文章Linux下完全卸载mysql详解卸载MySQL。5.程序建立数据库连接。这是最后一步。我这边出问题后，尝试了各种方法都无法建立连接。如果用户名和密码正确，可能需要检查以下几个方面：数据库版本和程序的驱动版本是否一致？数据库连接字符串是否正确？该帐户是否具有访问权限？引用的插件版本必须与服务器上安装的数据库版本一致。我的连接串jdbc:mysql://localhost:3306/onesideddice_mall?useUnicode=true&serverTimezone=Asia/Shanghai&characterEncoding=utf8&autoReconnect=true&allowPublicKeyRetrieval=true&useSSL=false&allowMultiQueries=true6.导入数据的步骤很简单，有各种方法，记录一下这里通过这种方式导入服务器上的sql文件：createdatabaseabc;/*创建数据库*/使用abc;/*使用创建的数据库*/setnamesutf8;/*设置编码*/source/home/abc/abc.sql/*导入备份数据库*/3.5Nginx镜像服务器在前端部分，我们已经在Nginx中配置了后端接口，为什么还要在这里再提呢？其实理论上，网站的部署在这一步之前就已经完成了。如果中间的各种连接没有其他问题的话，网站已经可以正常运行了，但是如果你的网站里面的图片很多，你就得想一想图片应该怎么存储，怎么存储设置相对路径等部署完成后，我在图片的显示上遇到了很多问题，其中最突出的就是图片的相对路径转换。观察一些网站后发现，他们的图片一般都是单独存放在图片服务器上的。路径比较稳定，容易设置，所以想到了用Nginx配置一个图片服务器，尽可能利用现有的服务器资源。当然，你也可以选择像七牛云这样的专用图片服务器，这样图片访问应该更稳定，速度更快。配置Nginx在Nginx配置中添加一个新的Server，方便和我们的网站应用区分开来。配置如下：server{listen8000;服务器名称本地主机；位置/{root/app/osd_mall/images;自动索引；}}root然后Mapimagesto/home/ftpadmin/hatlth/images/autoindexon就是打开浏览功能。修改设置后记得测试并重新加载Nginx。打开的端口与之前打开的数据库端口相同。修改文件访问权限chownftpadmin/app/osd_mall/imageschmod777-R/app/osd_mall/images修改程序根据自己的站点修改路径。由于使用了统一的图片服务器，现在可以设置一个配置项来专门管理图片地址，比以前方便多了，而且这个在线图片服务器也可以在本地环境下使用。4到此为止，基本部署完成，已经实现本地Windows端到Linux服务器端的转换。在解决问题的过程中，没想到问题这么多。记录的时候遗漏了很多细节，但是主要问题应该都解决了，希望能帮到遇到问题的人，也方便自己以后的回顾和浏览。
