服务器如何部署并启动前后端分离(springboot+vue)的web项目

一、打包后台项目(springboot)

1、pom.xml

打包方式一定为jar
在这里插入图片描述
添加插件:

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

2、使用maven的打包工具
先clean后package
在这里插入图片描述
3、将文件传到服务器上
4、部署

nohup java -jar agriculture-0.0.1-SNAPSHOT.jar &

在这里插入图片描述

然后回车就可以

附:
如果端口被占用 则需要关闭 或者 换一个端口
关闭:
ps -ef |grep java
杀死进程
kill -9 进程号

在这里插入图片描述使用ps -ef |grep java 查看当前进程
在这里插入图片描述
说明成功!

二、部署vue项目

1、打包vue项目

npm run build

会出现一个dist文件夹 将dist文件夹上传到服务器

使用nginx代理

2、前提需要nginx

如果已经用于nginx 跳过即可

1、安装依赖和相关库:

[root@localhost ~]# yum -y install gcc-c++ zlib-devel openssl-devel libtool

2、下载nginx安装包并解压:

[root@localhost ~]# cd /usr/local
[root@localhost local]# wget http://nginx.org/download/nginx-1.14.0.tar.gz
[root@localhost local]# tar -zxvf nginx-1.14.0.tar.gz

3、配置和安装

[root@localhost local]# cd nginx-1.14.0
[root@localhost nginx-1.14.0]# ./configure --prefix=/usr/local/nginx
[root@localhost nginx-1.14.0]# make && make install

4、启动nginx:

[root@localhost nginx-1.14.0]# cd ../nginx/sbin
[root@localhost sbin]# ./nginx

5、查看nginx:

[root@localhost nginx]# ps -ef | grep nginx
root      13850      1  0 17:01 ?        00:00:00 nginx: master process ./nginx
nobody    13851  13850  0 17:01 ?        00:00:00 nginx: worker process
root      13879   1128  0 17:11 pts/0    00:00:00 grep --color=auto nginx

6、停止和重启nginx:

./nginx -s reload   #重启
./nginx -s stop #关闭

7、安装 anywhere前端静态资源服务器插件:
npm install anywhere -g

8、进入nginx配置目录

cd /usr/local/nginx/conf

vim nginx.conf

修改:

location / {
            root [dist文件夹的位置];
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

9、nginx重启
cd ../sbin/
/nginx -s reload

注意
如果按照过nginx 只需要改conf文件夹下的location即可

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Mae_strive

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

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

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

打赏作者

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

抵扣说明:

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

余额充值