阿里云权益中心_助力学生、开发者、企业用云快速上云-阿里云

中小企业扶持权益_助力企业开启智能时代创业新范式-阿里云

现在阿里云对于新用户来说，还是挺仗义的，新用户能有一个月的云服务器免费使用福利，学生还能申请到两个月的免费使用福利，而且如果你是学生的话，一年的云服务器租金也不是很贵。

（1）安全组->创建安全组

（2） 在安全组里添加一些授权端口，方便后续的服务访问，比如：Tomact服务器端口访问、MySql数据库的访问、宝塔控制后台的访问等等。宝塔的源ip地址，设置为自己的本地地址（百度ip即可获取到自己的本地地址），这样方便安全登录宝塔的管理后台,。其余的源可以设置为0.0.0.0，这样的设置比较方便快捷地让我们使用其它的服务。下列是一些常用的端口与服务：

（1）点击实例------>管理，进入实例修改界面
（2） 我们可以修改实例名称、密码等。(注意这里要重置实例密码，方便下面登陆)

接着，我们把对应系统版本的宝塔面板安装命令，输入到这个命令行，然后敲回车键执行。

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

下载完成之后，可以得到两个地址，这两个地址就是宝塔管理面板的后台地址，一个是外网面板地址，一个是内网面板地址。还有宝塔用户名和密码。

sudo yum update ca-certificates 

（1）可以看见里面有很多分工明确的功能

一台服务器（小编以阿里云为准，备案没有通过，可以使用公网ip进行访问）
一个域名
宝塔可视化界面
springboot的jar包
vue的dist包

基于 Spring Boot + Vue 的前后端分离项目的部署方式主要有如下两种：
1前后端一起部署：将 Vue 项目打包后的dist文件放到 Spring Boot 项目的资源目录下，然后在服务器上部署 Spring Boot 项目即可，终究还是后端项目，并不是真正的分离部署。
2前后端单独部署：将 Spring Boot 项目打包后部署到服务器，再将 Vue 项目打包部署至服务器，最后配置 Nginx 解决请求跨域时的端口转发问题。
第一种方式较容易，也无需进行服务器跨域的相关配置，都使用的是Tomcat服务器进行部署。适合小型项目，如果部署的项目比较大，会造成Tomcat服务器的压力，响应速度也变慢。
第二种方式稍微复杂些，需要在 Nginx 下配置跨域时的端口转发。本文将介绍后者（使用宝塔可视化式部署）。在该方式下，后端 Spring Boot 使用内嵌的 Tomcat 运行，前端 Vue 则需要借助 Nginx 运行（需完成跨域时的请求端口转发）。所以部署前需要在服务器上安装 Nginx 环境。

之前在B站跟着博主写了一个前后端分离的项目，前端工程使用Vue-cli脚手架，后端工程使用SpringBoot，前端和后端分别为8087和8088端口，需跨域配置。自己踩了很多坑，研究了几天才部署成功。现将经验分享。
————————————————

后端项目打包之前，需要将某些配置改为服务器的配置。
将允许跨域设置为服务器IP+端口

将数据库配置为服务器IP地址，并且设置后端项目上下文如/api

通过Maven的package打包为jar包

请求加上前缀
还记得我们在SpringBoot中加了/api的应用上下文吗？现在将前端所有向后端URL请求中加上/api的前缀。

配置转发代理

如图分别配置如下

在前端终端输入 npm run build
将打包生成的dist文件下的static静态文件，和index.html先保存下

安装包需要前端npm打包、后端maven打包，或者可以直接从如下链接下载：

https://share.weiyun.com/NDJNLhry 密码：vd3aig

将jar 上传到这里

2、创建网站
1、添加站点
新建一个站点，编写域名，域名可以添加端口号，如：www.test.com:9999，则访问的时候要戴上端口号访问，如果有域名证书，用80即可 （没有域名也可以）

2、上传文件 vue 打包的 dist
该网站的目录如下。

点击进入查看文件，然后将vue打包后的dist文件传输到该目录下。

进入该网站的设置页面。

选择刚才的dist文件，保存就可以了。

通过阿里云获取的免费ssl证书输入正确的key和pem就可以部署成功了。

给nginx配置文件增加如下内容，改完之后重启nginx。注意: gzip 配置可以提高系统访问速度。

 server {listen 3000;server_name  这里写自己的ip地址;gzip on;gzip_min_length 100;gzip_types text/plain text/css application/xml application/javascript;gzip_vary on;location / {root   /home/jshERP/jshERP-web;index  index.html index.htm;try_files $uri $uri/ /index.html;}
location /jshERP-boot/ {proxy_pass http://localhost:9999/jshERP-boot/;proxy_set_header Host $host:$server_port;}}

nginx 和前后端 项目 都重启就可以。 访问前端项目用 ip+端口就就可以