Springboot+Vue前后端分离部署图书借阅管理系统(阿里云进行部署)

前后端分离部署

前后端部署前期准备

1.前端

1.在打包之前把方法请求的地址换成你服务器的地址,换完之后给后面再加上/api。(然后再打包)。

2.在上面找到运行->运行终端->选择第一个也就是npm run bulid
通过npm run bulid命令进行打包,最后生成dist文件夹
在这里插入图片描述

2.后端

1.找到该springboot项目pom.xml,给里面增加如下代码。
配置项目打包发布(jar包)

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

2.找到application.yaml文件对里面的配置文件进行修改,比如数据库的地址、账号、密码这些要换成你远程数据相应的内容。
在这里插入图片描述
4.在application.yaml文件最后一行增加如下内容。

context-path:/api

5.因为是Maven工程。在右边找到Maven,直接用install运行,进行打包,打包最后变成jar包。
在这里插入图片描述
6.在target下面找到对应的jar包。对于我这个来说就是里面的bg-book-1.0-SNAPSHOT.jar这个jar包。
在这里插入图片描述

前后端部署后期准备

1.通过FileZilla文件传输助手把刚才打包的前端dist和后端的jar传到你的服务器里面,最后是把他们两个放在文件夹下面。

2.通过Xshell连接远程服务器。
3.安装nginx.
先安装nginx所需要的库

yum install gcc-c++
yum install pcre pcre-devel
yum install zlib zlib-devel
yum install openssl openssl-devel

nginx官网下载地址:http://nginx.org/
下载完成之后,找到对应的目录进行解压

#把该压缩包进行解压到相对应的目录,后面的可以写也可以不写
tar -zxvf 文件名.jar -C 目录

编译并安装nginx, 在该文件夹根目录下, 输入编译命令 make ,然后安装 make install 。

#判断自己是否成功安装nginx
find / -name nginx

4.安装成功之后在命令行输入如下命令。

cd /usr/local/nginx/conf

在这里插入图片描述

4.通过vim命令进入nginx.conf

vim nginx.conf

在这里插入图片描述
5.在nginx里面配置相应的前端和后端
前端

 location / {
            root   /usr/springboot/dist;
            (写成你把前端放在的目录)
            index  index.html index.htm;
        }

后端
执行你的jar.

nohup java -jar xxx.jar&  #程序会在后台一直运行
location /api/{
      proxy_pass http://localhost:9000$request_uri;            
      (这块你需要改成你前端的端口号)
      proxy_redirect    off;
      proxy_set_header  Host $host;
      proxy_set_header  X-real-ip $remote_addr;
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
      }

6.配置完成之后,先按ESC键,然后再按 shift+:;输入wq,目的是为了保存修改。

7.然后先退到上一级,再切换到sbin目录里面

#退到上一级目录  cd ..
#使用ll进行查看该目录里面的文件  ll
#进行sbin目录   cd sbin

8.用如下命令,启动nginx服务。

#启动 ./nginx  

说一下,如果改了之后,可以使用重新加载配置文件命令。

# 重新加载配置文件 ./nginx -s reload

由于会经常使用到nginx命令,就总结一下常用的命令。

1.cd /usr/local/nginx/sbin/
2.#启动   ./nginx
3.#停止   ./nginx -s stop 
4.#安全退出 ./nginx -s quit
5.#重新加载配置文件 ./nginx -s -reload
6.查看nginx进程 ps aux | grep nginx

9.前端的话,应该可以正常访问,后端还需要继续配置。
在这里插入图片描述

10.登录阿里云(https://cn.aliyun.com/),把你后端请求端口号放到安全组里面。
在这里插入图片描述
11.然后再Xshell里面通过以下命令再看防火墙是否给后端的端口号放行。

	# firewall-cmd --list-all 查看防火墙的相关信息

看里面有没有给你后端的端口放行,如果没有放行,使用下面的命令。

#firewall-cmd --zone=public --add-port=(你自己后端的端口)/tcp --permanent
#firewall-cmd --reload,永久打开端口

完了之后可以再查看一下防火墙是否放行。
12.最后就可以在浏览器输入网址框输入后端请求的地址加端口号,就可以看到对应的后端内容。
在这里插入图片描述
13.然后到现在的话,可以通过前端可以给后端发送数据,完成整个项目在服务器上面部署。

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CPanMirai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值