1.當前項目架構分析

1.請求多個模塊的方式

1.請求renren-fast模塊

開發環境

生產環境

2.請求sunliving-commodity模塊

1.使用環境變量+資源路徑的方式

2.開發環境 dev.env.js

3.生產環境 prod.env.js

3.文件上傳請求 sunliving-service模塊

1.請求后端接口（開發環境） policy.js

2.請求阿里云OSS

2.架構圖

3.加入改進后的架構圖

2.將三個微服務注冊到Nacos

1.配置Nacos1.1.3到云服務器

1.GitHub下載壓縮包

nacos-server-1.1.3.tar.gz

2.上傳到寶塔

3.安裝JDK8

1.將壓縮包放到/opt/jdk下

2.進入/usr/local

3.創建文件夾 java

4.進入/opt/jdk

5.解壓縮到/usr/local/java

tar -zxvf jdk-8u261-linux-x64.tar.gz -C /usr/local/java

6.進入 /usr/local/java/jdk1.8.0_261/bin 查看java版本

./java -version

7.準備配置環境變量，復制java的bin目錄位置 pwd可以查看當前目錄

/usr/local/java/jdk1.8.0_261/bin

8.進入到環境變量的配置文件 vim /etc/profile ，移動到最后，配置環境變量

export JAVA_HOME=/usr/local/java/jdk1.8.0_261
export PATH=$JAVA_HOME/bin:$PATH

9.刷新環境變量使其生效，然后輸出一下查看

source /etc/profile
echo $PATH

10.輸入 java -version，成功！

4.安裝目錄一般在 /usr/local 目錄下，我們可以在此目錄下新建一個目錄nacos

cd /usr/local
mkdir nacos

5.進入這個軟件目錄

cd /www/nacos1.1.3/

6.解壓縮到/usr/local下的nacos目錄

tar -zxvf nacos-server-1.1.3.tar.gz -C /usr/local/nacos/

7.配置nacos的端口

1.進入nacos的conf目錄

2.將cluster.conf.example文件復制命名為cluster.conf

cp cluster.conf.example cluster.conf

3.編輯這個文件，設置ip和端口，可以配置多個

vim cluster.conf

8進入安裝目錄 /usr/local/nacos/nacos/bin

9.執行nacos

./startup.sh

10.寶塔和騰訊云都要開放8848端口

11.訪問 http://ip:8848/nacos 用戶名和密碼都是nacos

12.nacos常用命令

1.查看所有開放端口 firewall-cmd --list-all

2.查看8848端口是否被占用 netstat -tulnp | grep 8848

3.查看nacos進程 ps -ef | grep nacos

4.重啟nacos（修改配置文件之后重啟）

./startup.sh -m standalone

2.配置sunliving-common模塊引入Nacos依賴

1.使用dependencyManagement對本模塊以及子模塊進行版本仲裁

    <!-- 對本模塊以及子模塊進行版本仲裁 --><dependencyManagement><dependencies><!-- 指定spring-cloud-alibaba-dependencies的版本為2.1.0，對本模塊以及子模塊進行版本仲裁 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-dependencies</artifactId><version>2.1.0.RELEASE</version> <!-- 確保這里的版本號是正確的 --><!-- 這里的type是pom，scope是import，表示這個依賴是導入依賴，不會參與編譯和打包，可以解決單繼承問題 --><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement>

2.引入Nacos的依賴

        <!-- 引入nacos服務注冊和發現 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId><!-- <version>2.1.0.RELEASE</version> 這里使用版本仲裁--></dependency>

3.目前狀態

1. sunliving-common模塊的Nacos版本被自己版本仲裁了為2.1.0
2. sunliving-commodity和sunliving-service引入了sunliving-common模塊所以也有Nacos2.1.0依賴

3.三個模塊配置Nacos

1.sunliving-commodity模塊配置Nacos

1.application.yml 配置Nacos的服務地址和application的name

2.在主啟動類添加注解@EnableDiscoveryClient開啟Nacos的服務發現

3.確保Nacos啟動，然后啟動這個模塊，訪問 http://ip:8848/nacos 注冊成功！

2.sunliving-service模塊配置Nacos

1.配置application.yml 配置Nacos的服務地址和application的name

2.在主啟動類添加注解@EnableDiscoveryClient開啟Nacos的服務發現

3.啟動測試

3.配置renren-fast模塊

1.引入公共模塊排除mybatis-plus-boot-starter，獲取Nacos依賴

		<!-- 公共模塊 --><dependency><groupId>com.sun.sunliving</groupId><artifactId>sunliving-common</artifactId><version>1.0-SNAPSHOT</version><exclusions><exclusion><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId></exclusion></exclusions></dependency>

2.配置application.yml 配置Nacos的服務地址和application的name

3.在主啟動類添加注解@EnableDiscoveryClient開啟Nacos的服務發現

4.啟動測試

3.創建sunliving-gateway完成路由轉發測試

1.創建并配置sunliving-gateway模塊

1.創建sunliving-gateway模塊

2.檢查父子模塊

2.參考sunliving-service模塊引入依賴

    <!-- 添加描述信息 --><description>sun(家居生活)-網關服務</description><!-- 導入SpringBoot父工程 --><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.1.8.RELEASE</version><relativePath/> <!-- 當parent的groupId沒有指向父工程時就需要加 --></parent><properties><java.version>1.8</java.version><!-- SpringCloud版本 2020.0.5--><spring-cloud.version>Greenwich.SR3</spring-cloud.version><!-- 解決java: -source 1.5 中不支持 diamond 運算符 問題 --><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</maven.compiler.target></properties><dependencyManagement><dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><!-- 這里直接獲取properties里面的版本號 --><version>${spring-cloud.version}</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><dependencies><!-- SpringCloud網關模塊 --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId><!-- <version>2.2.1.RELEASE</version> 使用版本仲裁--></dependency><!-- SpringBoot web模塊必須拿掉，否則會報錯！！！ --><!-- <dependency> --><!--     <groupId>org.springframework.boot</groupId> --><!--     <artifactId>spring-boot-starter-web</artifactId> --><!-- </dependency> --><!-- SpringBoot test模塊 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!-- 公共模塊 --><dependency><groupId>com.sun.sunliving</groupId><artifactId>sunliving-common</artifactId><version>1.0-SNAPSHOT</version><!-- 排除mybatis-plus-boot-starter, 因為不使用，就不會配置application.yml的mybatis-plus的部分，不排除會報錯 --><exclusions><exclusion><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId></exclusion></exclusions></dependency></dependencies><!-- maven打包常規配置 --><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build>

3.配置Nacos服務發現

1.application.yml 配置端口，服務名，Nacos

server:port: 5050
spring:application:name: sunliving-gateway # Name of the applicationcloud:nacos:discovery:server-addr: ip:8848 # nacos服務地址

2.編寫主啟動類，開啟服務發現

package com.sun.sunliving.gateway;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;/*** Description:** @Author sun* @Create 2024/4/14 20:40* @Version 1.0*/
@SpringBootApplication
@EnableDiscoveryClient  // 開啟服務注冊與發現
public class SunlivingGateWayApplication {public static void main(String[] args) {SpringApplication.run(SunlivingGateWayApplication.class, args);}
}

3.啟動測試

4.配置GateWay完成測試

1.測試一

1.將請求轉發到 http://localhost:9091/commodity/brand/list

2.思路分析

• 請求方式：服務發現 + 上下文路徑 + 資源路徑

• 這里要想通過GateWay請求到這個網址，請求方式為GateWay服務發現 + 目標的上下文路徑 + 資源路徑

• 所以請求方式=http://localhost:5050/commodity/brand/list

• uri的編寫就是目標的服務發現

• 斷言的編寫方式為目標的上下文路徑+資源路徑，

• 一旦斷言成功，就會按照uri與斷言的路徑拼接也就是目標的服務發現 + 上下文路徑 + 資源路徑

3.配置方式

    gateway: # Gateway configurationroutes: # 可以有多個路由- id: test_routes # Route ID 保證唯一即可uri: lb://sunliving-commodity # Target servicepredicates: # Predicates- Path=/commodity/brand/**

4.瀏覽器發送請求 localhost:5050/commodity/brand/list

2.測試二

1.將請求轉發到 https://tieba.baidu.com/index.html

2.請求方式 http://localhost:5050/index.html

3.配置方式

        - id: sunliving-orderuri: https://tieba.baidu.compredicates:- Path=/index.html

4.結果展示

4.完成前端通過GateWay訪問后端

1.renren-fast 模塊配置

1.找到前端向這個模塊發送請求的前綴（服務發現 + 上下文路徑）

1.進入adornUrl

2.進入baseUrl

3.進入index.js的

4.找到開發環境的前綴了

2.修改前綴為GateWay的服務發現 + “/api” + 后端資源的上下文路徑

1.renren-fast的上下文路徑

2.修改請求

3.GateWay配置

    gateway: # Gateway configurationroutes: # 可以有多個路由- id: renren-fast # Route ID 保證唯一即可uri: lb://renren-fast # 服務發現predicates: # Predicates- Path=/api/renren-fast/** # 這里將得到的請求路徑斷言一下filters: # 重寫路徑，將/api/renren-fast/xxx重寫為/renren-fast/xxx，此時與上面的服務發現拼接，得到最終的請求路徑,也就是把/api拿掉- RewritePath=/api/(?<segment>.*), /$\{segment} 

4.測試，出現跨域問題

5.gateway添加配置類 SunlivingGatewayCorsConfiguration.java

package com.sun.sunliving.gateway.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
// 注意這個包別引錯了
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;/*** Description:** @Author sun* @Create 2024/4/15 10:17* @Version 1.0*/
@Configuration
public class SunlivingGatewayCorsConfiguration {@Beanpublic CorsWebFilter corsWebFilter() {System.out.println("enter....");UrlBasedCorsConfigurationSource source = newUrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();// 1、配置跨域corsConfiguration.addAllowedHeader("*");corsConfiguration.addAllowedMethod("*");corsConfiguration.addAllowedOrigin("*");corsConfiguration.setAllowCredentials(true);source.registerCorsConfiguration("/**", corsConfiguration);return new CorsWebFilter(source);}
}

6.再次測試，顯示有多個跨域配置，只允許有一個

7.刪除renren-fast本身的跨域配置，然后再次測試

2.關于GateWay的配置

1.前端的請求方式

• GateWay的服務發現 + /api + 目標資源的上下文路徑 + 資源路徑

2.后端的要求

• 統一設置上下文路徑，便于管理

3.GateWay的配置解析

• uri 配置的目標資源的服務發現
• predicates 斷言 /api + 目標資源的上下文路徑 + 資源路徑 需要得到 目標資源的上下文路徑 + 資源路徑
• 所以需要將/api去掉 (?.*) 表示/api后面的部分，會填充到這個標簽中/$\{segment} 這樣就得到了目標資源的上下文路徑 + 資源路徑
• 最后會將目標資源的服務發現 + 上下文路徑 + 資源路徑拼接，最終找到資源
• 注意segment可以換名稱只需要保證兩個的名字相同即可

    gateway: # Gateway configurationroutes: # 可以有多個路由- id: renren-fast # Route ID 保證唯一即可uri: lb://renren-fast # 服務發現predicates: # Predicates- Path=/api/renren-fast/** # 這里將得到的請求路徑斷言一下filters: # 重寫路徑，將/api/renren-fast/xxx重寫為/renren-fast/xxx，此時與上面的服務發現拼接，得到最終的請求路徑,也就是把/api拿掉- RewritePath=/api/(?<segment>.*), /$\{segment} 

4.GateWay配置模板

    gateway: # Gateway 配置routes: # 可以有多個路由- id: renren-fast # 保證唯一即可uri: lb://目標資源的application名稱 # 服務發現，lb：表示負載均衡predicates: # 斷言- Path=/api/目標資源上下文路徑/** filters: # 重寫路徑，將/api/上下文路徑/** 轉換為 /上下文路徑/**- RewritePath=/api/(?<segment>.*), /$\{segment}

5.注意事項

如果在配置中有一個更精確的路徑斷言應該放到前面否則會報錯

3.sunliving-commodity 模塊配置

1.application.yml 配置后端項目的上下文路徑

2.找到前端發送請求的方式

1.環境變量 + 資源路徑的方法

2.找到開發環境的環境變量，修改為GateWay的服務發現 + /api + 目標資源的上下文路徑

3.進行GateWay的配置（按照模板來即可）

        - id: sunliving-commodity # 保證唯一即可uri: lb://sunliving-commodity # 服務發現，lb：表示負載均衡predicates: # 斷言- Path=/api/sunliving-commodity/**filters: # 重寫路徑，將/api/上下文路徑/** 轉換為 /上下文路徑/**- RewritePath=/api/(?<segment>.*), /$\{segment}

4.啟動測試

1.還是多個跨域配置的問題

2.注銷sunliving-commodity模塊的跨域配置

3.重啟測試

4.目前這種配置方式的分析

1.缺點

• 目前的環境變量 + 資源路徑的方式，一旦新增加一個微服務，就需要新增一個環境變量，但是目前使用BASEPATHD的方式就很難區分

2.改進方式：使用明確的環境變量來區分不同微服務

3.修改開發環境的BASEPATH

4.將用到這個環境變量的請求替換一下

• category.vue
• brand.vue
• brand-add-or-update.vue

5.重啟測試

5.設置OSS權限

1.如果不希望被讀，就將讀寫權限設置為私有

2.控制上傳文件權限

1.進入RAM控制臺

2.刪除用戶即可

6.sunliving-service模塊的配置

1.分析

1.這個模塊主要是用來返回OSS的簽名的，所以只有文件上傳部分調用了這個接口

2.singleUpload.vue 指定的是對象存儲的地址，不需要改

3.src/components/upload/policy.js是向后端sunliving-service模塊發送的請求，需要區分多環境并交給網關統一控制

2.后端 application.yml 配置上下文路徑

3.前端開發環境配置環境變量，區分多環境

• 環境變量配置為 GateWay服務發現 + /api + 上下文路徑

4.policy.js 通過環境變量 + 資源路徑的方式請求到后端

5.配置GateWay

        - id: sunliving-service # 保證唯一即可uri: lb://sunliving-service # 服務發現，lb：表示負載均衡predicates: # 斷言- Path=/api/sunliving-service/**filters: # 重寫路徑，將/api/上下文路徑/** 轉換為 /上下文路徑/**- RewritePath=/api/(?<segment>.*), /$\{segment}  

6.啟動測試

1.報錯在brower.js:158:202

2.進入看看，發現是剛才的環境變量配置的有問題

3.修改一下即可

4.修改了環境變量需要重啟項目，再次測試，此時發現又是跨域配置過多的問題

5.把這個sunliving-service的跨域配置注銷即可

6.再次啟動，成功！

7.使用GateWay進行路由轉發總結

1.前提條件：后端配置了上下文路徑

2.前端發送請求方式

• GateWay服務發現 + /api + 目標資源的上下文路徑 + 資源路徑
• 注意：這個/api是自定義的規范，不是必須的，也可以有其他的方式

3.GateWay配置模板（僅限目前的規范）

    gateway: # Gateway 配置routes: # 可以有多個路由- id: renren-fast # 保證唯一即可uri: lb://目標資源的application名稱 # 服務發現，lb：表示負載均衡predicates: # 斷言- Path=/api/目標資源上下文路徑/** filters: # 重寫路徑，將/api/上下文路徑/** 轉換為 /上下文路徑/**- RewritePath=/api/(?<segment>.*), /$\{segment}

4.GateWay添加配置類，處理跨域問題（這樣其他微服務就不需要處理跨域了）

package com.sun.sunliving.gateway.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;/*** Description:** @Author sun* @Create 2024/4/15 10:17* @Version 1.0*/
@Configuration
public class SunlivingGatewayCorsConfiguration {@Beanpublic CorsWebFilter corsWebFilter() {System.out.println("enter....");UrlBasedCorsConfigurationSource source = newUrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();// 1、配置跨域corsConfiguration.addAllowedHeader("*");corsConfiguration.addAllowedMethod("*");corsConfiguration.addAllowedOrigin("*");corsConfiguration.setAllowCredentials(true);source.registerCorsConfiguration("/**", corsConfiguration);return new CorsWebFilter(source);}
}

5.關于前端區分多環境的細節說明

• 首先查看所有的后端模塊，一個一個看，找到每一個模塊對應的所有前端請求
• 對于前端請求使用環境變量 + 資源路徑的方式區分多環境
• 一個微服務模塊配置一個環境變量，內容為GateWay服務發現 + /api + 上下文路徑 這樣再加上資源路徑，就可以訪問到目標資源

8.Nacos配置中心的使用

1.修改Nacos的密碼保證安全

2.對sunliving-service的依賴進行版本仲裁

    <!-- 對本模塊以及子模塊進行版本仲裁 --><dependencyManagement><dependencies><!-- 指定spring-cloud-alibaba-dependencies的版本為2.1.0，對本模塊以及子模塊進行版本仲裁 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-dependencies</artifactId><version>2.1.0.RELEASE</version> <!-- 確保這里的版本號是正確的 --><!-- 這里的type是pom，scope是import，表示這個依賴是導入依賴，不會參與編譯和打包，可以解決單繼承問題 --><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement>

3.引入nacos的配置中心依賴

        <!-- 引入nacos的配置中心依賴 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId></dependency>

4.在Nacos中創建配置文件

1.新建命名空間

2.進入配置列表，選中剛才的命名空間，點擊加號

3.進行配置

4.將application.yml的部分配置放到配置中心

5.點擊發布

6.查看配置列表

5.編寫bootstrap.properties來讀取配置中心的文件（也可以使用）

#注冊到 nacos 的名字
spring.application.name=sunliving-service
#指定 nacos 的發現注冊地址
spring.cloud.nacos.discovery.server-addr=ip:8848
#指定 nacos 的配置地址
spring.cloud.nacos.config.server-addr=ip:8848
#要獲取的配置文件所在的配置空間
spring.cloud.nacos.config.namespace=830a1d44-4c4a-d708a9548c1c
#配置空間的哪一個組, 這個組下可以有多個配置文件，通過 ext-config[?] 來指定要加載某空間下的某組的第幾個文件
spring.cloud.nacos.config.group=dev
#通過 ext-config[?] 來指定要加載某空間下的某組的第幾個文件
spring.cloud.nacos.config.ext-config[0].data-id=application.yml
spring.cloud.nacos.config.ext-config[0].group=dev
spring.cloud.nacos.config.ext-config[0].refresh=true

9.為網關設置配置中心，使其可以動態配置網關信息

1.引入nacos的配置中心依賴

        <!-- 引入nacos的配置中心依賴 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId><version>2.1.0.RELEASE</version></dependency>

2.新建命名空間

3.新建配置

4.查看配置

5.創建bootstrap.properties文件，填寫信息

#注冊到 nacos 的名字
spring.application.name=sunliving-gateway
#指定 nacos 的發現注冊地址
spring.cloud.nacos.discovery.server-addr=ip:8848
#指定 nacos 的配置地址
spring.cloud.nacos.config.server-addr=ip:8848
#要獲取的配置文件所在的配置空間
spring.cloud.nacos.config.namespace=10f6a704-5d7f82519ba4
#配置空間的哪一個組, 這個組下可以有多個配置文件，通過 ext-config[?] 來指定要加載某空間下的某組的第幾個文件
spring.cloud.nacos.config.group=DEFAULT_GROUP
#通過 ext-config[?] 來指定要加載某空間下的某組的第幾個文件
spring.cloud.nacos.config.ext-config[0].data-id=application.yml
spring.cloud.nacos.config.ext-config[0].group=DEFAULT_GROUP
spring.cloud.nacos.config.ext-config[0].refresh=true

6.重啟測試

1.可以讀取到端口信息，但是網關配置一直不生效

2.把這個application和nacos的服務發現配置也放到配置中心就好了（下次粘貼配置的時候就完整粘貼就好）