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

---

👉原文阅读

---

💡章前导言

本文为B站1天搞定SpringBoot+Vue全栈开发系列视频学习笔记，带时间戳的B站笔记（不含代码）已经施工完成，点击视频右下角的“笔记”按钮即可查看（不带B站时间戳的笔记专栏链接在这）。

有能力的朋友请多多支持up拿完整的课件代码！本笔记代码部分不全，纯手打（我手打是因为个人而言手打记忆才深刻）。

如果想要资料，老师的微信公众号有免费的课件和文档，关注“软件练习生”公众号回复“Java”获取课件资料（注意：关注回复关键字就可以，不会让你加群/微信的！）。

我自己整理的课件、代码等资料（不保证全），放在Github上了，需要的自取。
👉1天搞定SpringBoot+Vue全栈开发·个人整理资料

---

---

📘正文开始

对应视频内容👉Springboot+Vue项目云端部署

---

🚩注意

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

systemctl start nginx #开启nginx服务

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

---

项目部署

前端vue项目部署

打包简单的vue项目

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

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

npm run build

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

打包复杂的vue项目

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

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

npm run build:prod

上传vue项目dist文件

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

cd /usr 
mkdir app
cd app

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

配置nginx读取dist文件

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

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

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

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

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

nginx -s reload

后端springboot项目部署

新建数据库

---

🚩注意

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

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

---

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

打包发送文件

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

执行jar包

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

cd /usr/app
ls

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

---

🚩注意

如果日志显示

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

把pom.xml文件里面的这个地方注释掉，再上传启动一次
(可害死我了，找了半天发现这里居然有个默认跳过的代码！)

---

---

🔺报错

我部署完之后无法成功登录，点击登录按钮后老是报Network Error，具体报错信息是

    /#/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项目目录，执行

npm run build

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

配置nginx

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

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

使配置生效

nginx -s reload

打包Java程序

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

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

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