前后端分离(Vue+SpringBoot)项目部署云服务器
媒介云服务器可以提供高可用性、可扩展性和机动性，适合部署Vue+SpringBoot项目。本文将介绍如何使用云服务器部署Vue+SpringBoot项目
前置预备
[*]云服务器
[*]Nginx服务
[*]Java情况
[*]Mysql
[*]Redis(如果项目没有用到可以不配置)
刚开始学Vue大概会疑惑启动Vue项目不应该必要安装Nodejs吗？为什么要安装Nginx呢？
Nginx是一个高性能的Web服务器，它可以用来部署Vue项目。Nginx可以配置为代理哀求到Vue项目的服务器，然后将Vue项目的静态文件提供给浏览器。如许，当用户访问Vue项目时，Nginx会将哀求转发给Vue项目的服务器，并返回相干的静态文件和数据。所以，在部署Vue项目时，通常必要安装Nginx来接收和处置处罚用户的哀求。 总结起来，安装Node.js是为了在本地开辟和构建Vue项目，而安装Nginx是为了在生产情况中部署Vue项目。
一、情况搭建
由于之前写过一个部署SpringBoot项目到阿里云服务器，内里配置了Java、Mysql、Redis情况，这里就不在赘述，必要的可以先去配置一下，我这里就直接开始配置Nginx情况
安装Nginx
[*]安装gcc
yum install -y gcc
https://i-blog.csdnimg.cn/direct/8190f84e18694b519eba6bce456d6c81.png
[*]安装pcre、pcre-devel
yum install -y pcre pcre-devel
https://i-blog.csdnimg.cn/direct/e6da853a4c1a4ca59022e0b7fcfea532.png
[*]安装zlib库
yum install -y zlib zlib-devel
https://i-blog.csdnimg.cn/direct/67d626b90077417c94a7aa7a70bb6dba.png
[*]安装Openssl
yum install -y openssl openssl-devel
https://i-blog.csdnimg.cn/direct/9ca3bc5036194cc68d169688daf2101e.png
[*]下载Nginx
wget http://nginx.org/download/nginx-1.9.9.tar.gz
将其解压到/usr/local下
tar -zxvf nginx-1.9.9.tar.gz -C /usr/local
https://i-blog.csdnimg.cn/direct/9b0247fbc1bc403faa16d750164eb92b.png
在进入到nginx-1.9.9
实行下如下命名
cd /usr/local/nginx-1.9.9
./configure
make
make install
进入/usr/local/nginx/sbin/ 下启动nginx
cd /usr/local/nginx/sbin/
./nginx
在浏览器访问服务器ip地址
https://i-blog.csdnimg.cn/direct/cddfc6c1e031422491ded8ce0383faac.png
看到Welcome to nginx! 就说明nginx安装成功！(访问失败记得看下防火墙是否开放80端口)
二、项目打包
1.打包Vue项目
npm run build
https://i-blog.csdnimg.cn/direct/c4001f9e3b5e4b97999b39ec2730c374.png
打包好后项目里会出现一个dist文件夹，将其压缩上传到云服务器
https://i-blog.csdnimg.cn/direct/269a1f9b752d467393a45c655e40d578.png
我这里压缩为的是rar，解压必要先在centos上安装unar
yum install epel-release -y
yum install unar -y
unar dist.rar
解压后将其移动到/usr/local/nginx/
mv dist /usr/local/nginx/
接下来在修改nginx配置
vim /usr/local/nginx/conf/nginx.conf
将server/location/root 对应的index修改为dist，至于端口号listen可以根据项目自行修改(其实写法许多，可以根据本身的想法来)，修改端口跋文得在防火墙中开放对应端口号
https://i-blog.csdnimg.cn/direct/af2a7f16dfd74cc8968e67011a498b5e.png
如果你的项目路径中没有api，那应该是直接如下
location / {
proxy_pass http://localhost:8080; # 8080是后端项目启动端口
proxy_set_header x-forwarded-for$remote_addr;
}
生存好后重新启动nginx
/usr/local/nginx/sbin/nginx -s reload
在浏览器中革新页面，会发现Vue项目已经部署完成
https://i-blog.csdnimg.cn/direct/281033fc9c3f4d4f97fdab51fd065c16.png
2.打包SpringBoot项目
SpringBoot项目打包就比较简朴，直接在pom文件中到场
<packaging>jar</packaging>
然后点击右上角Maven，再双击package
https://i-blog.csdnimg.cn/direct/66efafa8f1804ff0915efb0ec115f25f.png
将打包好的jar上传到云服务器
https://i-blog.csdnimg.cn/direct/7b5b2546a6744ac1883bc0074787ad0f.png
启动Java项目，项目名记得换成本身的
方式一：一次启动
java -jar ***.jar//***为你的jar包名
https://i-blog.csdnimg.cn/direct/6e59b631d86d43dfb1c48b2b79649703.png这种启动方式是一次启动，当我们关掉Xshell的时间，我们的网站又访问不上了，又得重新打开Xshell，再次实行该命令
方式二：永世启动
nohup java -jar***.jar& //***为你的jar包名
永世启动后即便关闭Xshell软件，仍能访问网站
接下来就可以在公网上使用本身的项目了，如果项目中用到一些特殊配置，大概必要在nginx.conf中到场一些设置
到这里Vue+SpringBoot就部署完成了，希望本教程对您有所帮助！如有任何疑问或问题，请随时在批评区留言。感谢阅读！
参考博客
[*]彻底卸载Nginx以及安装Nginx的详细教程
[*]保姆级步调 Vue项目打包部署到Linux 兼容Centos , Ubuntu 服务器
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]