部署文档 vue+springboot项目

### 部署文档：Vue + SpringBoot 项目 #### 一、概述 本文档旨在为开发者提供关于如何部署一个结合了Vue前端框架与Spring Boot后端框架的应用项目的详细步骤。这种架构组合在现代Web开发中非常流行，因为它能够有效地分离前端与后端的职责，同时利用各自的优势来构建高性能、高可用性的应用。 #### 二、环境准备 **1.1 使用Maven打包Spring Boot项目** 为了将Spring Boot项目打包成可部署的JAR文件，你需要确保你的项目已经配置了Maven作为构建工具，并且所有依赖都已正确安装。打包过程可以通过执行以下命令来完成： ```bash mvn clean package ``` 该命令会清理项目，编译源代码并打包项目。完成后，你将在项目的`target`目录下找到打包后的`.jar`文件。 **1.2 准备线上环境** - **确认服务器安装好Java环境**：Spring Boot项目依赖于Java运行时环境(JRE)，因此确保服务器上已安装适当版本的Java是非常重要的。可以通过执行以下命令来验证Java是否已安装： ```bash java -version ``` - **确保服务器有可用的MySQL**：如果你的应用程序需要与数据库交互，那么确保MySQL服务已经安装并且运行正常是非常必要的。你可以通过以下命令来验证MySQL服务状态： ```bash systemctl status mysql ``` **1.3 上传Jar包到服务器** 使用FTP工具（如XShell/XFTP/FinalShell等）将打包好的JAR文件上传至服务器。这里以XFTP为例： 1. 在XFTP中打开连接至服务器。 2. 导航至你想存放JAR文件的目录。 3. 将JAR文件拖拽至服务器窗口中完成上传。 **1.4 启动项目** 使用以下命令启动Spring Boot项目： ```bash nohup java -jar xxx.jar & ``` 其中`xxx.jar`是你的项目JAR文件名。`nohup`命令用于使进程在后台运行，即使退出终端也不会被终止。 **注意事项**： - 在打包项目之前，请确保数据库配置正确指向远程服务器的MySQL，并且密码正确无误。 - 若要停止项目，首先查询运行中的Spring Boot进程，然后使用`kill -9`命令杀死进程。 #### 三、前端代码部署 **2.1 前端代码打包** Vue项目通常使用Webpack进行构建。在项目根目录下执行以下命令来构建生产版本的代码： ```bash npm run build ``` 这将把所有的资源文件压缩合并到指定的目录中。 **2.2 服务器安装Nginx** - **离线安装**：可以从Nginx官方网站下载Linux安装包，上传至服务器并按照以下步骤进行安装： 1. 下载Linux安装包并上传至服务器。 2. 解压文件：`tar -zxvf linux-nginx-1.16.1.tar.gz`。 3. 进入目录：`cd nginx-1.16.1/`。 4. 执行配置：`./configure`。 5. 编译安装：`make`，然后`make install`。 - **在线安装**：可以通过以下命令快速安装Nginx： ```bash wget http://nginx.org/download/nginx-1.16.1.tar.gz ``` 注意，默认情况下Nginx会被安装在`/usr/local/nginx`目录下。 **2.3 配置Nginx** 编辑Nginx配置文件`/usr/local/nginx/conf/nginx.conf`，添加以下内容以代理到Spring Boot服务： ```nginx server { listen 80; server_name example.com; # 替换为你的域名或IP location / { root /path/to/vue/dist; # Vue项目的构建输出路径 index index.html; try_files $uri $uri/ /index.html; } location /api { # Spring Boot服务端口 proxy_pass http://localhost:8080; # 替换为Spring Boot的实际端口 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } ``` 完成配置后，重启Nginx使其生效： ```bash cd /usr/local/nginx/sbin ./nginx -s reload ``` **2.4 上传前端打包后代码** 将Vue项目的构建输出文件上传至服务器上Nginx配置中指定的目录。例如，如果Nginx配置中的`root`设置为`/path/to/vue/dist`，则将构建后的文件上传至此目录。 #### 四、访问地址 通过浏览器访问服务器IP加配置的前端端口及前缀即可访问你的Vue + SpringBoot项目。例如： ``` http://your-server-ip:port/prefix ``` 以上步骤涵盖了部署Vue + SpringBoot项目的整个流程，希望能帮助你顺利完成部署工作。