springboot+vue 部署到nginx服务器

1. 后端操作

nacicat连接服务器数据库，mysql默认是不允许远程连接的，需要配置

1. 打开Xshell，先试试连接数据库

2. mysql -uroot -proot（123456是数据库密码）

3. 登录进去后输入命令
   use mysql;
   select user, host from user;
   

4. 如果看到host那排是localhost，说明只允许本地访问（这里我已授权过，所以显示了%。如果已经显示%，说明就ok了）

5. 权限修改

   # 8.0之前的mysql
   grant all privileges on *.* to 'root'@'%' identified by '密码' with grant 
   option;
   flush privileges;
   # 8.0之后的mysql
   create user root@'%' identified by '密码';
   grant all privileges on *.* to root@'%' with grant option;
   flush privileges;
   

6. 连接navicat
   

修改application-prod.properties文件

#在application.properties文件中指定加载application-prod.properties文件
spring.profiles.active=prod

server.port=9091
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.url=jdbc:p6spy:mysql://112.74.55.xx:3306/springboot-vue?useSSL=false&serverTimezone=Hongkong&characterEncoding=utf-8&autoReconnect=true&allowPublicKeyRetrieval=true
spring.datasource.driver-class-name=com.p6spy.engine.spy.P6SpyDriver
#上传文件的ip
file.ip=http://112.74.55.xx
#mybatis配置
mybatis-plus.type-aliases-package=com.pojo
mybatis-plus.mapper-locations=classpath:mybatis/xml/*.xml

打包springboot项目，生成jar包，放入服务器某个位置，后台运行

#服务器运行
nohup java -jar springboot-book-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &
#看启动日志
tailf nohup.out

2. 前端操作

打包vue项目,后生成dist目录，修改后端给的ip地址，放进服务器某个目录

npm run build

3. 配置nginx

修改nginx配置文件

user  root;
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       81;
        server_name  112.74.55.xx;#这里是服务器地址
        location / {
            root /home/xhz/book/vue/dist;#这里是我vue项目地址
            index index.html index.htm;
            try_files $uri $uri/ /index.html;#防止刷新页面报错
            
        }

        location /api {
            proxy_pass http://112.74.55.xx:9091/;#这里是后端服务器地址
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

如果访问出现 Nginx出现403 forbidden
把 user改成 root;

重新启动nginx（这里我用的是宝塔启动）

访问 http://112.74.55.xx:81 成功

4. 提示：这只是我自个写的笔记，仅供参考