部署vue+springboot

Posted on Edited on In , Views: Word count in article: 1.4k Reading time ≈ 1 mins.

一、安装nginx

Nginx是一个高性能的HTTP和反向代理服务，也是一个IMAP/POP3/SMTP服务，所以nginx主要做反向代理、负载均衡以及HTTP服务器。

安装步骤：
1.apt-get命令安装

1
2
sudo apt-get update       //更新apt源
sudo apt-get install nginx       //安装nginx

2.查找nginx的安装路径

1
whereis nginx

3.启动nginx

1
2
cd /usr/sbin    
./nginx

注意：启动后可能会遇到80端口被占用的情况，则：

1
2
3
cd /usr/sbin    
fuser -k 80/tcp 
./nginx

访问ubuntu服务器的主机名，出现以下界面则说明nginx安装成功：

二、将vue项目部署到nginx

1.进入到vue项目根目录下，执行如下命令打包：

1
npm run build

打包成功后项目目录下会生成dist文件夹(里面有index.html文件和static文件夹)

2.在服务器创建如下目录并将dist文件夹下的文件拷贝进去，如下图：

3.配置nginx

1
2
3
4
cd /etc/nginx/conf.d         //进入配置文件目录
touch vue.conf        //创建vue.conf文件
sudo vim vue.conf      //打开并编辑vue.conf文件

将如下代码复制到vue.conf文件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
        listen       80;
        server_name  47.99.41.246;
        location / {
            root   /opt/project/vue;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /opt/project/vue;
        }
    }

接着按Esc键和:wq保存文件并退出

三、在服务器上安装相关软件

1.jdk
2.maven
3.mysql(或者你使用的对应的数据库)
4.redis(springboot项目中有用到就安装)

四、将springboot项目部署到服务器
1、进入到springboot项目根目录执行如下命令将项目打包：

1
2
mvn clean package -Dmaven.test.skip=true

打包成功后项目目录下的target会出现一个jar包，将其拷贝到服务器的/opt/project/springboot目录下，并执行如下命令运行程序：

1
2
nohup java -jar demo-0.0.1-SNAPSHOT.jar &

注意：完成以上三步后可能还是无法成功访问到项目，可能有如下两个原因：
1.在阿里云购买的虚拟服务器需要进入控制台的安全组里设置配置规则，将前端、后端、nginx使用的端口设置为允许访问即可。
2.前端和后端项目甚至nginx的防火墙未开启，运行如下命令发现为no则防火墙未开启：

1
2
firewall-cmd --query-port=3306/tcp        //判断端口3306是否开放

接着运行以下命令开放：

1
2
3
firewall-cmd --zone=public --add-port=3306/tcp --permanent     //永久开启3306端口
firewall-cmd --reload        //重启防火墙