前端与后端的部署

前端与后端的部署

Time：2021-4-7

前言

终于走到这一步了。
主要记录了关于使用服务器部署个人网站的流程。

Author：雾雨霜星
欢迎来我的网站学习：
https://www.shuangxing.top/#/passage?id=18

服务器的选择

我选择了腾讯云的学生优惠服务器，1核2G，5Mbps带宽，60G硬盘，费用是108元/年。

按照众多大佬的说法，比较推荐的就是阿里云的ECS共享型服务器或者腾讯云的轻量应用服务器，一般最低配置(带宽建议>=5)就够用了。

最好开通学生认证，或者买活动的云服务器，然后到期换个号再买活动云服务器。

至于操作系统，想顺路学一下Linux，因此选了centOS7。

关于宝塔面板的安装与使用

官方教程：https://www.bt/bbs/thread-19376-1-1.html

Linux系统下，首先使用su指令，获取根权限。

然后就按照Linux操作系统安装软件的方法来安装即可，安装宝塔，一般输入如下指令：

yum install -y wget && wget -O install.sh http://download.bt/install/install_6.0.sh && sh install.sh

这里使用了yum这种包管理工具，在以前学习webpack我用的是npm，不过原理与方法几乎一样就是了。

安装后命令行会输出宝塔相应的入口和用户名密码。

宝塔安装成功后，在系统的根目录下，会有一个www文件夹(注意不是home目录里面的)，该文件夹就是宝塔的默认根目录文件夹。

似乎宝塔的登录需要在云服务器的安全组(或者防火墙)放行8888端口，我不记得自己当时是否自己设置了放行。

宝塔可以通过在自己的Windows电脑上，进入浏览器，输入入口url后登录，即可使用图形化界面管理云服务器了。

使用Nginx部署前端

安装好Nginx后，会有一个nginx文件夹。

如果是使用宝塔安装nginx，那么该文件夹一般在宝塔的根目录(名字一般是www)里面的serve目录里面。

nginx的html文件夹中放置前端需要部署的东西，比如Html文件，或者是VueCLI项目的打包后的dist文件夹。

• VueCLI前端部署：

  1. 上传打包文件：

     进入到nginx的html文件夹中，使用宝塔的文件上传，选择上传目录，选择相应的打后的dist文件夹，上传即可。

  2. 配置nginx代理：

     在nginx文件夹中，找到conf文件夹，在里面找到nginx.conf文件，双击打开进行编辑。在html字段内，加入一个server字段，例如：

     server
        {
         listen   80; #nginx监听的端口，腾讯云可以在防火墙栏目看到有哪些端口开发的
         server_name  http://121.5.253.71/; #安装nginx的服务器的ip
     
         location /dist/ {
             root   html;
             index  index.html index.htm;
             try_files $uri $uri/ /dist/index.html;
         }
         
         location /api/ {     #配置前端请求的代理
             proxy_pass    http://localhost:8080; #前端http请求转发的地址
             rewrite ^/api/(.*)$ /$1 break;
         }
        }
     

  3. 测试：

     在浏览器输入如下：

     http://121.5.253.71:80/dist/index.html
     

     正常来说就可以访问到dist文件夹里面的index.html了。

     注意端口是需要看云服务器防火墙(安全组)那里的设置的。

     如果安装了宝塔面板，还需要在宝塔面板的安全栏目处检查是否放行了HTTP端口或HTTPS端口。

• 普通Html文件的部署：

  类似上述操作，在nginx目录下的html目录中，上传相应的文件，然后配置在conf文件夹中找到nginx.conf，在html字段中加入server字段，格式如上。

部署SpringBoot项目为后端

• 安装JDK1.8：

  登录进入centos的界面，输入指令：

  yum install java-1.8.0-openjdk java-1.8.0openjdk-devel
  

  会要求获取root权限，输入su回车，输入密码后回车即可。注意密码是隐藏的，所以输入的时候是看不到的。

  然后等待下载结束，输入java -version查看安装是否成功。

  接着配置jdk环境，在宝塔中进入文件栏目，找到etc文件夹，里面有个profile文件，双击打开进行编辑，增加如下内容：

  # set java env
  JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.212.b04-0.el7_6.x86_64
  JRE_HOME=$JAVA_HOME/jre CLASS_PATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib
  PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin
  export JAVA_HOME JRE_HOME CLASS_PATH PATH
  

  注意上述第一行中，java-1.8.0-openjdk-1.8.0.212.b04-0.el7_6.x86_64，不一定是这样的。需要到/usr/lib/jvm目录中查看，第一个文件夹的名字就是这串代码，我的就是上述，但是不同的安装结果可能是不一样的，最好查看一下。

  然后重新登录进入centos界面，输入指令，java，若出现如下类似提示，则表示配置成功：

  Usage: java [-options] class [args...]
             (to execute a class)
     or  java [-options] -jar jarfile [args...]
             (to execute a jar file)
  where options include:
      -d32          use a 32-bit data model if available
      -d64          use a 64-bit data model if available
      -server       to select the "server" VM
                    The default VM is server.
  
      -cp <class search path of directories and zip/jar files>
      -classpath <class search path of directories and zip/jar files>
                    A : separated list of directories, JAR archives,
                    and ZIP archives to search for class files.
      -D<name>=<value>
                    set a system property
      -verbose:[class|gc|jni]
                    enable verbose output
      -version      print product version and exit
      -version:<value>
                    Warning: this feature is deprecated and will be removed
                    in a future release.
                    require the specified version to run
      -showversion  print product version and continue
      -jre-restrict-search | -no-jre-restrict-search
                    Warning: this feature is deprecated and will be removed
                    in a future release.
                    include/exclude user private JREs in the version search
      -? -help      print this help message
      -X            print help on non-standard options
      -ea[:<packagename>...|:<classname>]
      -enableassertions[:<packagename>...|:<classname>]
                    enable assertions with specified granularity
      -da[:<packagename>...|:<classname>]
      -disableassertions[:<packagename>...|:<classname>]
                    disable assertions with specified granularity
      -esa | -enablesystemassertions
                    enable system assertions
      -dsa | -disablesystemassertions
                    disable system assertions
      -agentlib:<libname>[=<options>]
                    load native agent library <libname>, e.g. -agentlib:hprof
                    see also, -agentlib:jdwp=help and -agentlib:hprof=help
      -agentpath:<pathname>[=<options>]
                    load native agent library by full pathname
      -javaagent:<jarpath>[=<options>]
                    load Java programming language agent, see java.lang.instrument
      -splash:<imagepath>
                    show splash screen with specified image
  See http://www.oracle/technetwork/java/javase/documentation/index.html for more details.
  

• 安装MySQL：

  1. 在宝塔面板的软件商店栏目，找到MySQL，选择版本5.7(内存需求相对8而言小一些)，选择快速安装。

  2. 安装使用图形化界面对MySQL管理的工具：

     • 第一个选择：在宝塔中使用phpMyAdmin进行管理

       1. 在宝塔软件商店安装php7.1。然后安装phpMyAdmin。

       2. 在软件商店的phpMyAdmin处选择设置，打开phpMyAdmin的设置面板，选择安全设置选项卡，设置授权账号与访问密码，选择保存。

       3. 进入宝塔的数据库栏目，选择phpMyAdmin。打开需要先输入phpMyAdmin刚才设置的账号和密码，然后看到phpMyAdmin的登录页面，账户名是数据库账户名字，一般是root，密码是数据库的root密码，可以在宝塔是数据库栏目中找到。

       4. 登录进入，即可对数据库进行界面操作管理。

       然后到宝塔的安全栏目中，设置放行3306端口，在云服务器的防火墙栏目中设置3306端口开发规则。方便数据库的访问。

     • 第二个选择：选择在自己的电脑上使用Navicat进行管理

       1. 在自己电脑上安装好Navicat。

       2. 在宝塔面板的安全栏目中，设置放行3306端口。在云服务器的防火墙栏目中设置3306端口开放规则。

       3. 在宝塔面板的数据库栏目中，添加数据库，注意保存数据库名和数据库密码。

       4. 设置数据库权限，设置所有人或者指定IP。

       5. 在Navicat中建立连接，主机是云服务器的外网IP地址，端口一般是3306(除非自己做了修改)，用户名是数据库的名字，密码是相应数据库的密码。

          • 注意：Navicat连接云服务器上的数据库，用户名不是root而密码也不是root密码啊！否则即使开启了数据库的访问权限，也会一直报1045错误，说你用户名或者密码有问题。

          我服了被这搞了一天，居然是我连navicat都不会用，直到最后才觉悟，我连接的是云数据库又不是云服务器的root，我在干嘛…

• 相关报错参考：

  1. 关于未开启数据库访问权限时连接数据库的报错：

     Navicat连接时：

     1130-"Host '121.5.253.71' is not allowed to connect to this MySQL server"
     

     出现1130错误。

     在自己电脑上使用springboot的MyBatisPlus连接时：

     java.sql.SQLException: null,  message from server: "Host '121.5.253.71' is not allowed to connect to this MySQL server"
     

     从而导致该springboot项目application启动失败。

     需要设置数据库的访问权限，如果有宝塔面板，直接在数据库栏目进行设置即可。

  2. 关于未放行3306端口连接云服务器上的数据库时：

     Navicat连接时：

     10060-The last packet sent successfully to the server was 0 milliseconds ago.
     

     出现10060错误。

     springboot的MybatisPlus进行连接时：

     com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
     
     The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.
     

     需要设置宝塔的安全组合云服务器的防火墙，放行3306端口。

  3. 连接的用户名或者密码出现错误：

     Navicat连接时：

     1045-Access denied for ...... 'root'@'......'
     

     出现1045错误，主要是，建立连接的用户名是数据库名，密码是相应数据库的密码，不是root和root密码！

     如果是SpringBoot会报错：

     java.sql.SQLException: Access denied for user 'root'@'221.4.34.247' (using password: YES)
     

     原因就是因为非loaclhost下的远程数据库连接，必须是对数据库的，因此usernam要是数据库名，password是相应的数据库密码，而非root与root密码。

     如果是loacalhost的访问，是可以直接连数据库的root的。

  4. 数据库驱动设置不当：

     SpringBoot进行数据库连接时：

     Registered driver with driverClassName=com.mysql.jdbc.Driver was not found
     

     数据库驱动需要换成com.mysql.cj.jdbc.Driver

• SpringBoot使用MyBatisPlus连接云服务器上数据库时的配置：

  application.properties文件应该修改如下：

  spring.datasource.url=jdbc:mysql://localhost:3306/qsjblog?useSSL=false&characterEncoding=utf-8
  spring.datasource.username=root
  spring.datasource.password= "root密码"
  spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
  

  因为我的云服务器上的MySQL使用的版本是5.7，因此不需要另外设置时区。

  这种方法，如果该springboot项目打包所得jar包是运行在云服务器上，即使不修改数据库的权限也应该是可以连接成功。

后端的运行

主要是在CentOS7中运行Springboot工程用Mavan打包得到的jar：

详细参考：https://blog.csdn/u012240455/article/details/86571644

登录进入CentOS的命令行界面，cd进入到jar所在目录，输入如下指令即可：

jave -jar "后端打包得到的jar包名字(例如:blogsys-1.0-SNAPSHOT.jar)"

回车即可看到jar的开始运行，如果一切正常，最终可以看到运行的端口与相关的日志，例如：

 Initializing ExecutorService 'applicationTaskExecutor'
2021-04-08 19:00:11.364  INFO 17487 --- [main] com.zaxxer.hikari.HikariDataSource       
: HikariPool-1 - Starting...
2021-04-08 19:00:11.775  INFO 17487 --- [main] com.zaxxer.hikari.HikariDataSource       
: HikariPool-1 - Start completed.
2021-04-08 19:00:11.948  INFO 17487 --- [main] o.s.b.w.embedded.tomcat.TomcatWebServer  
: Tomcat started on port(s): 8080 (http) with context path ''
2021-04-08 19:00:11.982  INFO 17487 --- [main] com.blogsys.boot.MainApplication         
: Started MainApplication in 6.536 seconds (JVM running for 7.344)

如上可见此时Springboot搭建的后端使用内置的Tomcat运行于8080端口。

使用该方法运行后端存在一个问题，当目前窗口关闭的时候，该jar的运行也会被终止，或者可按CTRL + C打断程序运行。

或者使用"&"符号结尾时程序在后台运行，即：

jave -jar "后端打包得到的jar包名字(例如:blogsys-1.0-SNAPSHOT.jar)" &

&：让命令在后台执行，终端退出后命令仍旧执行。

但是此时关闭窗口，jar的运行也是会被中断的。

最终选择使用nohup命令。

详细参考：https://www.runoob/linux/linux-comm-nohup.html

nohup命令：no hang up (不挂起) ,用于在系统后台不挂断地运行命令 ,退出终端不会影响程序的运行。

如下：

nohup java -jar "后端打包得到的jar包名字(例如:blogsys-1.0-SNAPSHOT.jar)" &

执行后会输出一个名叫 nohup.out 的文件到当前目录下，若当前目录不可写，输出重定向到 $HOME/nohup.out文件中。

指定相关日志文件的输出：

nohup java -jar xxx.jar >logs.txt &

使用nohup指令后的进程关闭方法：

直接杀死相关进程即可，nohup命令运行成功后，会返回一个进程号，可以通过 kill -9 命令杀死这个进程来直接关闭。

kill -9  进程号PID

若要查看相关进程号，可以使用如下指令：

ps -ef|grep "后端打包得到的jar包名字(例如:blogsys-1.0-SNAPSHOT.jar)"

会显示出一条信息，一般相应的内容是：进程所属用户、进程PID、父级进程PID、CPU占用百分比、进程开启时间、进程占用CPU时间、进程结束时间

其中第一个数字一般就是进程PID，一般应该是21561这样大3的数字。

ps aux命令：查看相应进程号PID。

Author：雾雨霜星
欢迎来我的网站学习：
https://www.shuangxing.top/#/passage?id=18

转载请注明出处！！！

Thanks!

PS: 毕竟，霜星酱水平有限，如果发现任何错误还请及时邮箱告知我，我会去改哦！