SpringBoot和Vue项目部署实战过程

avatar 2021年03月24日10:34:03 0 708 views

昨天逛阿里云和腾讯云,发现最近在搞活动,同时自己的服务器也快到期了,之前前后端2个系统是部署在两个机器上的,两个配置也不高。

决定买一个配置高的,放一起。于是也买了下面这一款,了2核8GB5MB带宽的云服务器,3年有效期,价格2200多

阿里云链接:点此

腾讯云链接:点此

 

下面讲一下如何部署这两个项目

声明,我用的是 CentOs 7.6

一、安装宝塔

宝塔地址:点此

注意安装后,修改宝塔的默认8888端口号为其他端口号(先开防火墙和安全组)

宝塔是一款可视化的面板,对于我们这种懒人还是很不错的。

直接在宝塔里安装了 Ngnix,MySQL5.6,Redis 几个软件。

 

二、安装Java环境

通过终端(windows可以用xshell)连接服务器

yum install java-1.8.0-openjdk-devel.x86_64
yum install maven

通过以上2行命令,先安装 Jdk1.8,然后安装 Maven

因为我们到时候会把本地java代码通过 Git 方式提交到GitHub或码云,然后在服务器上把代码拉下来,执行 maven clean install 来下载依赖

Centos7.6 默认有Git不需要我们安装

 

三、通过码云下载代码

个人私密项目,我一般用码云,因为速度比较快。

1、本地将springboot后端代码push到码云

 

然后准备在服务器上把代码拉下来

先配置一下ssh密钥,方便 pull 时不用输入密码

2、生成公钥密钥

ssh-keygen -t rsa -C "847064370@qq.com"

公钥私钥会在~/.ssh 目录

然后一路点确定,最后复制公钥

cat ~/.ssh/id_rsa.pub

3、将公钥添加码云的设置->SSH公钥里

 

4、拉取代码

git clone git@gitee.com:saysky/sens-parent-back.git

 

四、部署 springboot 项目

1、创建数据库和导入数据库

可以直接在宝塔里创建数据库,然后导入之前准备的数据库sql文件

确保后端代码数据库连接信息是正常的,即root密码,数据库名称是否正确

2、下载依赖和部署

刚才已经拉了代码,现在开始下载依赖和部署吧

正常情况大家只需要即可

mvn clean install
cd target
nohup java -jar xxx.jar &

我这里分享一下我部署使用的 shell 脚本

deploy.sh

#!/bin/bash

# 指定SENS的根目录,请按实际修改
SENS_DIR="/www/wwwroot/sens-parent-back"

# 拉取最新的源码
git pull
#echo "代码拉取完毕!"

# 进入SENS根目录
cd $SENS_DIR

# 停止SENS
sh $SENS_DIR/bin/sens.sh stop

mvn clean package -Dmaven.test.skip=true
echo "代码打包完毕!"

# 进入打包好的SENS目录
cd $SENS_DIR/sens-bootstrap/target

# 运行SENS
sh $SENS_DIR/bin/sens.sh start

echo "部署完毕,Enjoy!"

 

sens.sh

#!/bin/bash
APP_NAME=sens-bootstrap-1.0.0-SNAPSHOT.jar

usage() {
    echo "用法: sh sens.sh [start(启动)|stop(停止)|restart(重启)|status(状态)]"
    exit 1
}

is_exist(){
  pid=`ps -ef|grep $APP_NAME|grep -v grep|awk '{print $2}' `
  if [ -z "${pid}" ]; then
   return 1
  else
    return 0
  fi
}

start(){
  is_exist
  if [ $? -eq "0" ]; then
    echo "${APP_NAME} 正在运行。 pid=${pid} ."
  else
    nohup java -server -Xms2048m -Xmx2048m -Xmn680m -Xloggc:/www/wwwroot/sens-parent-back/gc.log -jar $APP_NAME  > /dev/null 2>&1 &

    echo "${APP_NAME}启动 成功,请查看日志确保运行正常。"
    fi
}

stop(){
  is_exist
  if [ $? -eq "0" ]; then
    kill -9 $pid
    echo "${pid} 进程已被杀死,程序停止运行"
  else
    echo "${APP_NAME} 没有运行。"
  fi
}

status(){
  is_exist
  if [ $? -eq "0" ]; then
    echo "${APP_NAME} 正在运行。Pid is ${pid}"
  else
    echo "${APP_NAME} 没有运行。"
  fi
}

restart(){
  stop
  start
}

case "$1" in
  "start")
    start
    ;;
  "stop")
    stop
    ;;
  "status")
    status
    ;;
  "restart")
    restart
    ;;
  *)
    usage
    ;;
esac

 

3、然后通检查java进程状态

ps -ef|grep java 或 jps 查看是否启动成功

启动成功,上面是我启动的ES,因为大部分用不上,我这里就不说明了。

启动成功,我设置启动在 8888 端口,点此可以访问

至此 springboot 项目部署成功。

 

五、部署 vue 项目

1、本地打包项目

npm run install

生成 dist.zip 文件

 

2、将其上传到服务器

我这里偷懒就不用 Git 上传了,直接手动上传了

比如上传到 /www/wwwroot/sens-parent-front 目录,解压

目前我wwwroot目录文件如下

3、配置nginx.conf

我单独创建了一个 nginx.conf ,到时候会在 nginx 的 nginx.conf 文件里 inclue 这个文件

代码如下

# 开始
server {
    listen       80;
	listen       443 ssl;
	server_name  liuyanzhao.com;

	ssl_certificate      /www/wwwroot/sens-parent-back/liuyanzhao.com/Nginx/1_liuyanzhao.com_bundle.crt;
	ssl_certificate_key  /www/wwwroot/sens-parent-back/liuyanzhao.com/Nginx/2_liuyanzhao.com.key;

	ssl_session_cache    shared:SSL:1m;
	ssl_session_timeout  5m;
	ssl_ciphers  HIGH:!aNULL:!MD5;

	location / {
	    proxy_pass http://127.0.0.1:8888;
	    index  index.html index.htm index.jsp;
	}
}

server {
    listen       80;
    listen       443 ssl;
    server_name  admin.liuyanzhao.com;
    root /www/wwwroot/sens-parent-front/dist;
    try_files $uri $uri/ /index.html;
    
    ssl_certificate      /www/wwwroot/sens-parent-front/admin.liuyanzhao.com/Nginx/1_admin.liuyanzhao.com_bundle.crt;
    ssl_certificate_key  /www/wwwroot/sens-parent-front/admin.liuyanzhao.com/Nginx/2_admin.liuyanzhao.com.key;

    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;
    ssl_ciphers  HIGH:!aNULL:!MD5;

    
     # 配置代理
    location /sens/{
        rewrite ^/(.*) /$1 break;  
        proxy_pass http://127.0.0.1:8888;
       # Host配置以及域名传递
        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;
    }
}

# 结束

 注意我前后端都配置了SSL证书

4、然后引入这个自定义的配置

include /www/wwwroot/nginx.conf;

然后重载配置即可。

 

部署成功

 

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
可以匿名评论或者登录后台评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0