宝塔面板部署vue前后端分离项目
检查连接数据库的用户名和密码都没有出现错误,而且本地mysql服务的localhost也修改成对应的阿里云服务ip了,可就是连接失败,不能访问数据库。在导入sql文件之前,需要先创建数据库,此时需要先设置这个数据库的用户名和密码(只是这个数据库的用户名和密码)而已,如果嫌麻烦可以使用全局的root用户(说明nginx监听的是8081的请求,如果listen配置了ip地址,那么下面的server_n
这里写目录标题
项目部署上线教程
购买服务器
阿里云服务器
- 重置密码,重新启动
- 设置对应安全组
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
参考图片:
更多推荐
所有评论(0)