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

前后端分离部署

前后端部署前期准备

1.前端

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

2.在上面找到运行->运行终端->选择第一个也就是npm run bulid
通过npm run bulid命令进行打包,最后生成dist文件夹
Springboot+Vue前后端分离部署图书借阅管理系统(阿里云进行部署)_第1张图片

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文件对里面的配置文件进行修改,比如数据库的地址、账号、密码这些要换成你远程数据相应的内容。
Springboot+Vue前后端分离部署图书借阅管理系统(阿里云进行部署)_第2张图片
4.在application.yaml文件最后一行增加如下内容。

context-path:/api

5.因为是Maven工程。在右边找到Maven,直接用install运行,进行打包,打包最后变成jar包。
Springboot+Vue前后端分离部署图书借阅管理系统(阿里云进行部署)_第3张图片
6.在target下面找到对应的jar包。对于我这个来说就是里面的bg-book-1.0-SNAPSHOT.jar这个jar包。
Springboot+Vue前后端分离部署图书借阅管理系统(阿里云进行部署)_第4张图片

前后端部署后期准备

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

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

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

vim nginx.conf

Springboot+Vue前后端分离部署图书借阅管理系统(阿里云进行部署)_第6张图片
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.前端的话,应该可以正常访问,后端还需要继续配置。
Springboot+Vue前后端分离部署图书借阅管理系统(阿里云进行部署)_第7张图片

10.登录阿里云(https://cn.aliyun.com/),把你后端请求端口号放到安全组里面。
Springboot+Vue前后端分离部署图书借阅管理系统(阿里云进行部署)_第8张图片
11.然后再Xshell里面通过以下命令再看防火墙是否给后端的端口号放行。

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

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

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

完了之后可以再查看一下防火墙是否放行。
12.最后就可以在浏览器输入网址框输入后端请求的地址加端口号,就可以看到对应的后端内容。
Springboot+Vue前后端分离部署图书借阅管理系统(阿里云进行部署)_第9张图片
13.然后到现在的话,可以通过前端可以给后端发送数据,完成整个项目在服务器上面部署。

你可能感兴趣的:(javaweb,vue.js,阿里云,spring,boot)