【Java全栈学习】十九、Springboot+Vue云端环境部署(阿里云服务器部署项目)

注意

在部署前后端项目之前，首先需要保证nginx服务是开启的：

1	systemctl start nginx #开启nginx服务

接着将服务器的公网IP地址粘到浏览器中，如果能看见如下界面，说明nginx可以访问。(这个访问的是80端口，需要保证安全组的80端口是开启的)

项目部署

前端vue项目部署

打包简单的vue项目

以全栈学习·第三方组件（element-ui）里的vue项目为例。

打开项目，在终端服务器输入

1

npm run build

将代码进行打包，打包下来的文件会放在dist目录下的index.html(只有一行是因为做了压缩)，最后需要做的就是把dist目录放在服务器上进行访问。

打包复杂的vue项目

以全栈学习·vue-element-admin里的vue项目为例。

修改.env.production文件里面的BASE_API为服务器的公网IP地址并打包文件：

1

npm run build:prod

上传vue项目dist文件

先创建一个目录放上传的项目文件

1
2
3

cd /usr 
mkdir app
cd app

接着使用xftp将dist文件拖进服务器文件夹里

配置nginx读取dist文件

进入到/etc/nginx/conf.d目录，创建vue.conf文件

1
2

cd /etc/nginx/conf.d
vim vue.conf

1
2
3
4
5
6
7
8

server {
    listen 80;
    server_name locahost;
    location / {
        root /usr/app/dist;
        index index.html;
    }
}

其中，localhost处是自己的域名，location里面的index.html是自己的首页。

接着输入指令加载配置，然后再去访问公网IP，页面就会变化(此时是登录不进去的，还没连上后台)

1

nginx -s reload

后端springboot项目部署

新建数据库

注意

如果创建不了数据库，记得重新开一下服务器的数据库。

如果执行sql文件导入表时出现问题，Navicat可以看这个解决方法：Navicat报错Unknown collation: ‘utf8mb4_0900_ai_ci’_

数据库工具上创建和依赖文件同名的数据库

打包发送文件

点Maven里面的package打包文件，生成jar包，并上传到服务器的/usr/app目录下

执行jar包

在服务器终端执行命令，加载jar包(记得修改jar包的名字变成自己的)

1
2

cd /usr/app
ls

1
2
3

nohup java -jar projectName-0.0.1-SNAPSHOT.jar > logName.log 2>&1 &
ls
cat logName.log

注意

如果日志显示

1 2	nohup: ignoring input no main manifest attribute, in projectName-0.0.1-SNAPSHOT.jar

把pom.xml文件里面的这个地方注释掉，再上传启动一次

(可害死我了，找了半天发现这里居然有个默认跳过的代码！)

1

    /#/login?redirect=%2Fdashboard:1 Access to XMLHttpRequest at 'http://47.98.46.117:8080/user/login' from origin 'http://47.98.46.117' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

本篇流程总结

部署Vue项目

打包Vue项目

进入到Vue项目目录，执行

1

npm run build

将生成的dist目录上传至服务器 /usr/vue/dist

配置nginx

进入到/etc/nginx/conf.d目录，创建vue.conf文件，内容如下

1
2
3
4
5
6
7
8

server {
    listen 80;
    server_name locahost;
    location / {
        root /usr/app/dist;
        index index.html;
    }
}

使配置生效

1

nginx -s reload

打包Java程序

双击package，会自动打包在项目路径文件夹的/target文件夹下

因为springboot有内置tomcat容器，这点比较方便，省去了tomcat的部署。我们到时候直接可以直接把jar包扔到linux上。

1

nohup java -jar projectName-0.0.1-SNAPSHOT.jar > logName.log 2>&1 &