宝塔面板部署vue前后端分离项目

项目部署上线教程

购买服务器

阿里云服务器

• 重置密码，重新启动
• 设置对应安全组

Xshell远程连接工具

宝塔面板官网：https://www.bt.cn/new/download.html

这里选择的是Centos安装脚本：yum install -y wget && wget -O install.sh

• 使用Xshell远程连接工具连接阿里云服务器

• 安装宝塔面板，等待安装完成，会展示宝塔面板的外网、内网面板地址以及账号密码

• 使用外网地址在浏览器输入用户名和密码进行宝塔面板登录

• 进入之后，一般需要进行认证，按照步骤认证完成即可

• 之后，我这里进行了选择安装，先安装的是mysql和nginx

  

  
  

补充：

• 修改宝塔面板密码：在Xshell宝塔面板输入命令bt 命令，按照选项进行操作

宝塔面板搭建数据库

• 将本地sql文件导入宝塔面板

  

补充（注意上图方框）：

• 在导入sql文件之前，需要先创建数据库，此时需要先设置这个数据库的用户名和密码（只是这个数据库的用户名和密码）而已，如果嫌麻烦可以使用全局的root用户（注意这里的root用户 ）

• 搭建完成数据库导入sql文件，点击“工具”菜单查看成功导入的数据表

• 如果完成上述操作之后，java项目的配置文件连接mysql数据库使用的还是全局root用户，会出现第一个BUG！就是连接数据库失败，详细的报错信息如下：

  [忽略]
  java.sql.SQLException: null,  message from server: "Host '8.130.99.127' is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts'"
  
  Access denied for user ‘root‘@‘localhost‘ (using password: YES)
  大致意思：就是连接不上8.130.99.127服务器上的mysql数据库
  

  为什么会出现这种情况？检查连接数据库的用户名和密码都没有出现错误，而且本地mysql服务的localhost也修改成对应的阿里云服务ip了，可就是连接失败，不能访问数据库。

  查阅了很多博客，看到有人提到root用户没有操作我们先创建的数据库的权限，需要借助phpMyAdmin数据库可视化工具进行root权限设置，给root用户赋予操作新建数据库的权限，参考链接：参考链接

• 安装phpMyAdmin注意事项：

  • 安装phpMyAdmin之前，需要先安装php

  • 安装phpMyAdmin，配置phpMyAdmin，否则phpMyAdmin面板打不开

    

    

宝塔面板搭建Redis

• 宝塔面板软件商店安装Redis，进行ip绑定和密码设置

  

• 宝塔面板安装php，进行安装扩展（为什么这么做还不清楚）

  

• 完成之后，重启即可，参考链接：https://cloud.tencent.com/developer/article/1956057

前端和后端项目

构建目录

• 到宝塔面板“文件”目录，在www目录下新建文件夹"Blog"

上传前端项目

• 我的前端项目是使用vue-cli构建的，控制台使用命令npm run build 打包vue项目

• 打包成功之后，生成dis文件夹

  

• 上传dist到Blog文件夹

上传后端项目

• 使用package将后端项目打成jar包
• 在打jar包之前，需要先修改配置文件，例如：mysql的localhost配置改成阿里云服务公网ip、Redis服务localhost配置改为阿里云服务公网ip
• 上传jar包到Blog文件夹
• 使用宝塔面板的终端，nohup java -jar jar包名称 启动java项目
• 注意：此时还并不能进行浏览器访问（需要使用nginx进行跨域处理）

Nginx配置文件解析

后端项目上下文路径

server: 
  port: 8088
  context-path: /test
# 项目启动访问端口8080 前缀路径test

后端正常访问路径：http://localhost:8088/text/user/login

前端vue项目（npm run build）

前端为axios请求创建公共前缀：axios.default.baseURL="/api"

解决前端页面跳转路由返回到nginx欢迎页面

• 前端vue.config.js文件配置publicPath = "/myRoute/"
• 路由index.js 配置文件配置base = "/myRoute/"
• 参考链接：

Nginx配置

# 查看宝塔面板安装的nginx的配置文件
cat /www/server/nginx/conf/nginx.conf

# 找到nginx自定义配置目录，进行当前前后端项目的跨域处理配置
include /www/server/panel/vhost/nginx/*.conf;

# 新建blog.conf配置文件
vim blog.conf

server {
		listen       8081;
		server_name  8.130.99.127;

        location / {
			root   /www/Blog/dist;    #你打包项目存放的位置
            try_files $uri $uri/ @router; #检测文件存在性重定向到首页目录    防止404
            index  index.html;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
		
		location /myRoute/ {
			alias /www/Blog/dist; 
			try_files $uri $uri/ @router;
		}

	    location /api/ {
	        proxy_set_header Host $host;
	        proxy_set_header X-Real-IP $remote_addr;
	        proxy_set_header REMOTE-HOST $remote_addr;
	        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	        add_header Access-Control-Allow-Methods *;
	        add_header Access-Control-Allow-Origin $http_origin;
	        proxy_pass http://localhost:8080/; #请求转向定义的服务器
	    }
}

注意：

• 如果在创建blog.conf配置过程中异常退出，再次进入会报错，怎么解决？直接删除生成的配置文件.swap文件，命令rm .*.swp ，参考链接：参考链接

• ​

• listen 说明nginx监听的是8081的请求，如果listen配置了ip地址，那么下面的server_name就不生效了

• server_name 配置域名，收到一个请求，nginx会先匹配listen中的ip；如果没有配置ip，再匹配server_name；然后匹配listen中的端口。

Nginx常用命令

重新加载
nginx -s reload

打印运行的nginx的端口
tasklist /fi "imagename eq nginx.exe"

启动nginx服务
start nginx

项目部署常用命令

部署java项目：nohup java -jar jar包名称

查看正在运行的java服务：ps -ef |grep java 或 ps -aux |grep java

停止正在运行的java服务：kill 进程号

宝塔面板终端Nginx相关命令：

• 切换到sbin目录查看nginx配置文件状态，是否正确 cd /www/server/nginx/sbin
• ./nginx -t
• ./nginx -s reload

宝塔形式下，ssh命令操作nginx的操作：

• 启动：/etc/init.d/nginx start
• 停止：/etc/init.d/nginx stop
• 重启：/etc/init.d/nginx restart
• 重新加载：/etc/init.d/nginx reload

Windows下的nginx服务操作：

• 查看nginx是否启动：tasklist /fi "imagename eq nginx.exe"
• 启动nginx：start nginx
• 停止nginx：nginx -s stop nginx -s quit
• 重新载入nginx：nginx -s reload

参考图片：