一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署
作者:mmseoamin日期:2023-12-13

🧑‍💻作者名称:DaenCode

🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。

😎人生感悟:尝尽人生百味,方知世间冷暖。

📖所属专栏:SpringBoot实战


一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第1张


文章目录

  • 思维导图
  • 🌟前言
  • 🌟云服务器配置
    • 域名配置
    • 端口开放-防火墙配置
    • 🌟JDK安装及配置
    • 🌟Nginx安装以及配置
    • 🌟MySQL安装
    • 🌟打包项目,进行上传
      • 后端项目
      • 前端项目
      • 🌟项目启动
      • 🌟写在最后

        思维导图

        一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第2张

        🌟前言

        日常开发项目上线或者部署个人博客网站,都离不开线上服务器部署应用。本文带你学会线上部署应用。以腾讯云轻量应用服务器部署SpringBoot、Vue项目为例。

        🌟云服务器配置

        域名配置

        1.进入到轻量应用服务器控制台,选中域名。如下图所示

        一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第3张

        2.如果是首次购买域名,点击添加域名。之后点击添加域名解析

        一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第4张

        3.此时是A记录,主机名前方命名根据个人需要起名称。一定要勾选实例

        一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第5张

        端口开放-防火墙配置

        1.找到服务器中的防火墙配置,进行开发端口。

        一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第6张

        2.添加规则。进行端口号添加即可。但是平常不使用ssh登录时,尽量关闭22端口,为了服务器安全。

        一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第7张

        🌟JDK安装及配置

        这里我在linux中的/usr/local/下创建了software文件夹用于后续文件的上传。

        一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第8张

        1.上传JDK包到linux中,我这里采用的是xftp。

        一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第9张

        2.通过tar -zxvf jdk-8u171-linux-x64.tar.gz进行解压。这里我已经提前安装过就不再演示了。

        3.通过vim /ect/profile配置环境变量。vim的使用方法大家可网上查阅,这里不进行赘述。注意JAVA_HOME的路径为你jdk安装的路径。

        一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第10张

        4.通过source /ect/profile使环境变量生效。

        5.通过java -version验证是否安装成功。

        一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第11张

        🌟Nginx安装以及配置

        1.安装依赖。

        yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel​
        

        2.上传nginx包,并使用tar -zxvf nginx-1.13.7.tar.gz ​解压。需要服务器开放80端口。

        一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第12张

        3.进入到配置文件目录/usr/local/nginx/conf。这里注意nginx默认安装目录为/usr/local/nginx。

        cd /usr/local/nginx/conf
        

        4.修改配置文件。vim nginx.conf。其中红框部分为新增或者修改内容。

        解释:

        • upstream部分为你服务器的ip地址+后端项目的访问端口。lbs命名相当于变量名,随意即可。
        • server中的location第一个是接口代理地址配置。proxy_pass中//后的名称要和你上方upstream后的名称一致。
        • server中的location第二个location是前端项目路径的地址配置。写在root处即可。

          一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第13张

          5.重新启动nginx加载配置文件,使其生效。

          ./nginx -s reload
          

          🌟MySQL安装

          1.通过以下命令进行MySQL环境的准备。

          #下载mysql的Yum仓库
          wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm
          yum -y install mysql57-community-release-el7-10.noarch.rpm
          #安装 mysql服务
          yum -y install mysql-community-server
          #启动数据库服务, systemctl 该命令可用于查看系统状态和管理系统及服务,centos7上开始使用
          systemctl start  mysqld.service
          #查看状态
          systemctl status mysqld.service
          #在日志文件中查看初始密码
          grep "password" /var/log/mysqld.log
          #进入时输入默认密码,之后修改Mysql密码
          mysql -uroot -p
          #新密码设置必须由大小写字母、数字和特殊符号组成
          ALTER USER 'root'@'localhost' IDENTIFIED BY '你的密码';
          #开启mysql的远程访问, %是指全部
          grant all privileges on *.* to 'root'@'%' identified by '你的密码' with grant option;
          #刷新权限
          flush privileges; 
          

          在执行yum -y install mysql57-community-release-el7-10.noarch.rpm遇到问题:

          一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第14张

          通过以下方式解决:

          rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022
          //再次执行
          yum -y install mysql57-community-release-el7-10.noarch.rpm
          

          2.在mysql数据库中导入项目中用到的数据库脚本。注意红框处填写ip地址,同时数据库名称要与项目中名称保持一致。

          一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第15张

          🌟打包项目,进行上传

          后端项目

          1.配置文件的修改。注意要和线上数据库用户名、密码、ip地址一致。

          一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第16张

          2.mvn install打包。之后会在target目录下生成jar包。生成之后上传到服务器路径下即可。

          一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第17张

          下图是我的路径,请根据个人需求。

          一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第18张

          前端项目

          1.配置文件修改成自己的域名地址。

          一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第19张

          2.使用npm run build打包。打包完成之后会生成一个dist文件夹,将此文件上传即可。一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第20张

          下图是我的个人路径,要与nginx配置文件中的地址配置一致。

          一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,在这里插入图片描述,第21张

          🌟项目启动

          进入到项目路径中,通过nohup java -jar xxxx.jar &启动。如项目报错,则可以用过tail -f nohup.out查看日志情况。

          🌟写在最后

          有关于SpringBoot、Vue线上应用部署到此就结束了。感谢大家的阅读,如有部署问题,大家可以在评论区进行留言。


          一张思维导图带你学会SpringBoot、Vue前后端分离项目线上部署,请添加图片描述,第22张