项目部署上线教程

购买服务器

阿里云服务器

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

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

参考图片:

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐