第一部分：部署linux + nginx
第二部分：部署Windows+tomcat
第三部分：调用第三方api的跨域问题处理。
以及常见的部署后页面显示404 的问题处理。
（ruoyi平台简介：
若依是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。
前端采用Vue、Element UI。
后端采用Spring Boot、Spring Security、Redis & Jwt。
权限认证使用Jwt，支持多终端认证系统。
支持加载动态权限菜单，多方式轻松权限控制。
高效率开发，使用代码生成器可以一键生成前后端代码。）
### 若依前后端分离项目部署指南
#### 一、部署Linux + Nginx
##### 部署后台代码
**1.1 生成JAR包**
对于基于IDEA的开发者而言，可以通过在集成开发环境的Terminal中执行`mvn clean package`命令来生成项目的JAR包。生成的JAR文件位于项目目录下的`target`文件夹中。
**1.2 将JAR文件上传至Linux服务器**
使用FTP或SCP等工具将生成的JAR文件传输到Linux服务器上的指定位置。
##### 部署前端代码
**2.1 打包前端项目**
利用npm脚本命令`npm run build:prod --report`进行前端项目的打包工作。打包完成后，会在项目的根目录下生成名为`dist`的文件夹，该文件夹包含了前端的所有静态资源文件。
**2.2 将`dist`文件夹上传至Linux服务器**
同样地，使用FTP或其他工具将`dist`文件夹整体上传至Linux服务器。
##### 安装与配置Nginx
**3.1 安装Redis**
由于若依平台使用了Redis作为缓存解决方案，因此需要确保Linux服务器上已经安装并启动了Redis服务。
**3.2 安装Nginx并配置**
在Linux服务器上安装Nginx，并且修改其配置文件`nginx.conf`，以便正确配置前端与后端的服务。配置示例如下：
```nginx
server {
listen 80;
server_name yourdomain.com;
location / {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
error_page 404 /index.html;
location ~* ^.+\.(ico|css|js|gif|jpg|jpeg|png|svg|ttf|woff|eot)$ {
access_log off;
expires max;
add_header Cache-Control "public";
}
}
```
其中，`proxy_pass`字段中的`http://localhost:8080`应替换为实际的后端服务地址。
**4. 启动服务**
**4.1 启动后端服务**
使用以下命令启动JAR文件：
```bash
nohup java -jar jarName > msg.log 2>&1 &
```
这里`jarName`需要替换为实际的JAR文件名，而`msg.log`则是在启动命令所在的目录下创建的日志文件，用于记录服务启动过程中的信息。
**5. 菜单配置调整**
如果在后续部署过程中遇到了菜单无法打开等问题，可以通过修改`vue.config.js`文件中的配置来解决。具体来说，需要确保该文件中的代理配置正确，即去除`.proxy`前的`.`字符，确保代理配置指向正确的后端服务地址。
#### 二、部署Windows + Tomcat (无Nginx)
##### 修改POM文件
为了适应Tomcat的部署需求，首先需要在项目的`pom.xml`文件中将`packaging`类型由`jar`改为`war`，这样构建时就会生成WAR格式的文件。
**1.1 修改`pom.xml`文件**
```xml
<packaging>war</packaging>
```
**1.2 打包并部署**
打包完成后，将生成的WAR文件复制到Windows服务器上的Tomcat的`webapps`目录下，并重命名为`prod-api`。
##### 部署前端代码
**2.1 打包前端项目**
与Linux部署相同，使用`npm run build:prod --report`命令进行前端项目的打包工作。
**2.2 复制`dist`文件夹**
将生成的`dist`文件夹复制到Tomcat的`webapps`目录下。
##### 配置Tomcat
**3.1 修改`server.xml`文件**
打开Tomcat安装目录下的`conf/server.xml`文件，并添加如下配置：
```xml
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />
```
**3.2 添加`Context`配置**
在`server.xml`文件中`<Host>`节点内添加以下配置：
```xml
<Context path="/" docBase="dist的绝对路径(也可以写相对于webapps的路径)" reloadable="true" crossContext="true"/>
```
这里`docBase`属性需要指向`dist`文件夹的实际路径。
**3.3 创建`WEB-INF`目录**
在`dist`目录下创建`WEB-INF`文件夹，并在其中创建`web.xml`文件以处理404错误。
**3.4 `web.xml`配置**
```xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1" metadata-complete="true">
<display-name>Router for Tomcat</display-name>
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
</web-app>
```
通过以上步骤，可以在Tomcat环境中正确配置和部署前后端分离的项目。
#### 三、解决调用第三方API的跨域问题
当应用中需要调用第三方API时，可能会遇到跨域问题。通常情况下，可以通过以下几种方法来解决：
1. **CORS（跨源资源共享）**：如果第三方API支持CORS，则可以直接在前端发起请求。
2. **JSONP**：适用于那些不支持CORS但提供JSONP回调功能的API。
3. **后端代理转发**：在自己的后端服务中实现一个代理接口，通过该接口来调用第三方API，从而绕过跨域限制。
例如，若要调用百度地图API，可以考虑在后端服务中实现一个代理接口，前端通过调用这个代理接口来获取地图数据。
通过上述步骤和方法，可以顺利地完成若依平台的前后端分离项目在不同环境下的部署，并有效解决部署过程中可能出现的各种问题。
LearnBC2022-07-26若依-部署文档-完整版
