前后端分离(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
  

1. yum install -y gcc

复制代码

• 安装pcre、pcre-devel
  

1. yum install -y pcre pcre-devel

复制代码

• 安装zlib库
  

1. yum install -y zlib zlib-devel

复制代码

• 安装Openssl
  

1. yum install -y openssl openssl-devel

复制代码

• 下载Nginx
  

1. wget http://nginx.org/download/nginx-1.9.9.tar.gz

复制代码

将其解压到/usr/local下

1. tar -zxvf nginx-1.9.9.tar.gz -C /usr/local

复制代码

在进入到nginx-1.9.9
实行下如下命名

1. cd /usr/local/nginx-1.9.9
2. ./configure
3. make
4. make install

复制代码

进入/usr/local/nginx/sbin/ 下启动nginx

1. cd /usr/local/nginx/sbin/
2. ./nginx

复制代码

在浏览器访问服务器ip地址

看到Welcome to nginx! 就说明nginx安装成功！(访问失败记得看下防火墙是否开放80端口)
二、项目打包

1.打包Vue项目

1. npm run build

复制代码

打包好后项目里会出现一个dist文件夹，将其压缩上传到云服务器

我这里压缩为的是rar，解压必要先在centos上安装unar

1. yum install epel-release -y
2. yum install unar -y
3. unar dist.rar

复制代码

解压后将其移动到/usr/local/nginx/

1. mv dist /usr/local/nginx/

复制代码

接下来在修改nginx配置

1. vim /usr/local/nginx/conf/nginx.conf

复制代码

将server/location/root 对应的index修改为dist，至于端口号listen可以根据项目自行修改(其实写法许多，可以根据本身的想法来)，修改端口跋文得在防火墙中开放对应端口号

如果你的项目路径中没有api，那应该是直接如下

1. location / {
2.     proxy_pass http://localhost:8080; # 8080是后端项目启动端口
3.     proxy_set_header x-forwarded-for  $remote_addr;
4. }

复制代码

生存好后重新启动nginx

1. /usr/local/nginx/sbin/nginx -s reload

复制代码

在浏览器中革新页面，会发现Vue项目已经部署完成

2.打包SpringBoot项目

SpringBoot项目打包就比较简朴，直接在pom文件中到场

1. <packaging>jar</packaging>

复制代码

然后点击右上角Maven，再双击package

将打包好的jar上传到云服务器

启动Java项目，项目名记得换成本身的
方式一：一次启动

1. java -jar ***.jar  //***为你的jar包名

复制代码

这种启动方式是一次启动，当我们关掉Xshell的时间，我们的网站又访问不上了，又得重新打开Xshell，再次实行该命令
方式二：永世启动

1. nohup java -jar  ***.jar  &     //***为你的jar包名

复制代码

永世启动后即便关闭Xshell软件，仍能访问网站
接下来就可以在公网上使用本身的项目了，如果项目中用到一些特殊配置，大概必要在nginx.conf中到场一些设置
到这里Vue+SpringBoot就部署完成了，希望本教程对您有所帮助！如有任何疑问或问题，请随时在批评区留言。感谢阅读！
参考博客

• 彻底卸载Nginx以及安装Nginx的详细教程
  
• 保姆级步调 Vue项目打包部署到Linux 兼容Centos , Ubuntu 服务器
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。