本文由 简悦 SimpRead 转码， 原文地址 blog.csdn.net
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
- 安装 pcre、pcre-devel
yum install -y pcre pcre-devel
- 安装 zlib 库
yum install -y zlib zlib-devel
- 安装 Openssl
yum install -y openssl openssl-devel
- 下载 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
在进入到 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 地址
看到 Welcome to nginx! 就说明 nginx 安装成功！(访问失败记得看下防火墙是否开放 80 端口)
二、项目打包
1. 打包 Vue 项目
npm run build
打包好后项目里会出现一个 dist 文件夹，将其压缩上传到云服务器
我这里压缩为的是 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 可以根据项目自行修改 (其实写法很多，可以根据自己的想法来)，修改端口后记得在防火墙中开放对应端口号
如果你的项目路径中没有 api，那应该是直接如下
location / {
proxy_pass htp://localhost:8080; # 8080是后端项目启动端口
proxy_set_header x-forwarded-for $remote_addr;
}
保存好后重新启动 nginx
/usr/local/nginx/sbin/nginx -s reload
在浏览器中刷新页面，会发现 Vue 项目已经部署完成
2. 打包 SpringBoot 项目
SpringBoot 项目打包就比较简单，直接在 pom 文件中加入
<packaging>jar</packaging>
然后点击右上角 Maven，再双击 package
将打包好的 jar 上传到云服务器
启动 Java 项目，项目名记得换成自己的
方式一：一次启动
java -jar ***.jar //***为你的jar包名
这种启动方式是一次启动，当我们关掉 Xshell 的时候，我们的网站又访问不上了，又得重新打开 Xshell，再次执行该命令
方式二：永久启动
nohup java -jar ***.jar & //***为你的jar包名
永久启动后即便关闭 Xshell 软件，仍能访问网站
接下来就可以在公网上使用自己的项目了，如果项目中用到一些特殊配置，可能需要在 nginx.conf 中加入一些设置
到这里 Vue+SpringBoot 就部署完成了，希望本教程对您有所帮助！如有任何疑问或问题，请随时在评论区留言。感谢阅读！