1、提出問題
訪問頁面使用的是：http://localhost:9001
實際開發中，會有不同的環境：
開發環境：自己的電腦
測試環境：提供給測試人員使用的環境
預發佈環境：數據是和生成環境的數據一致，運行最新的項目代碼進去測試
生產環境：項目最終發佈上線的環境
如果不同環境使用不同的ip去訪問，可能會出現一些問題。爲了保證所有環境的一致，我們會在各種環境下都使用域名來訪問。
那麼，當我們在瀏覽器輸入一個域名時，瀏覽器是如何找到對應服務的ip和端口的呢？
2、域名解析
一個域名一定會被解析爲一個或多個ip。這一般會包含兩步：
本地域名解析
瀏覽器會首先在本機的hosts文件中查找域名映射的IP地址，如果查找到就返回IP ，沒找到則進行域名服務器解析，一般本地解析都會失敗，因爲默認這個文件是空的。
Windows下的hosts文件地址：C:/Windows/System32/drivers/etc/hosts
Linux下的hosts文件所在路徑： /etc/hosts
樣式：
# My hosts
127.0.0.1 localhost
0.0.0.0 account.jetbrains.com
127.0.0.1 www.test.net
1
2
3
4
域名服務器解析
本地解析失敗，纔會進行域名服務器解析，域名服務器就是網絡中的一臺計算機，裏面記錄了所有註冊備案的域名和ip映射關係，一般只要域名是正確的，並且備案通過，一定能找到。
3、解決域名解析問題
我們不可能去購買一個域名，因此我們可以僞造本地的hosts文件，實現對域名的解析。修改本地的host爲：
127.0.0.1 api.enjoyment.com
127.0.0.1 manage.enjoyment.com
1
2
這樣就實現了域名的關係映射了。
ping一下域名試試是否暢通：
4、nginx解決端口問題
nginx可以作爲web服務器，但更多的時候，我們把它作爲網關，因爲它具備網關必備的功能：
反向代理
負載均衡
動態路由
請求過濾
4.1 nginx作爲web服務器
Web服務器分2類：
web應用服務器，如：
tomcat
resin
jetty
web服務器，如：
Apache 服務器
Nginx
IIS
區分：web服務器不能解析jsp等頁面，只能處理js、css、html等靜態資源。
併發：web服務器的併發能力遠高於web應用服務器。
Nginx + tomcat
4.2 nginx作爲反向代理
什麼是反向代理？
代理：通過客戶機的配置，實現讓一臺服務器代理客戶機，客戶的所有請求都交給代理服務器處理。
反向代理：用一臺服務器，代理真實服務器，用戶訪問時，不再是訪問真實服務器，而是代理服務器。
nginx可以當做反向代理服務器來使用：
我們需要提前在nginx中配置好反向代理的規則，不同的請求，交給不同的真實服務器處理
當請求到達nginx，nginx會根據已經定義的規則進行請求的轉發，從而實現路由功能
使用，nginx（windows解壓版本）可以通過命令行來啓動，操作命令：
啓動：start nginx.exe
停止：nginx.exe -s stop
重新加載：nginx.exe -s reload
完整配置
#user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
gzip on;
#nginx中的每個server就是一個反向代理配置，可以有多個server
server {
listen 80; #監聽端口
server_name manage.enjoyment.com;
# 頭信息
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# location請求映射規則，/ 代表一切請求路徑
location / {
proxy_pass http://127.0.0.1:9001; # 代理轉發，所有manage.enjoyment.com和80訪問的請求，都會被轉發到http://127.0.0.1:9001處理
proxy_connect_timeout 600;
proxy_read_timeout 600;
}
}
server {
listen 80;
server_name api.enjoyment.com;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 上傳路徑的映射
location /api/upload {
proxy_pass http://127.0.0.1:8082;
proxy_connect_timeout 600;
proxy_read_timeout 600;
rewrite "^/api/(.*)$" /$1 break;
}
location / {
proxy_pass http://127.0.0.1:10010;
proxy_connect_timeout 600;
proxy_read_timeout 600;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
首先，我們映射路徑是/api/upload，而下面一個映射路徑是 / ，根據最長路徑匹配原則，/api/upload優先級更高。也就是說，凡是以/api/upload開頭的路徑，都會被第一個配置處理
proxy_pass：反向代理，這次我們代理到8082端口，也就是upload-service服務
rewrite "^/api/(.*)$" /$1 break，路徑重寫：
"^/api/(.*)$"：匹配路徑的正則表達式，用了分組語法，把/api/以後的所有部分當做1組
/$1：重寫的目標路徑，這裏用$1引用前面正則表達式匹配到的分組（組編號從1開始），即/api/後面的所有。這樣新的路徑就是除去/api/以外的所有，就達到了去除/api前綴的目的
break：指令，常用的有2個，分別是：last、break
last：重寫路徑結束後，將得到的路徑重新進行一次路徑匹配
break：重寫路徑結束後，不再重新匹配路徑。
我們這裏不能選擇last，否則以新的路徑/upload/image來匹配，就不會被正確的匹配到8082端口了
5、測試
啓動ng
inx，然後用域名訪問後臺管理系統：
請求流程如下：
瀏覽器準備發起請求，訪問http://mamage.enjoyment.com，但需要進行域名解析
優先進行本地域名解析，因爲我們修改了hosts，所以解析成功，得到地址：127.0.0.1
請求被髮往解析得到的ip，並且默認使用80端口：http://127.0.0.1:80
本機的nginx一直監聽80端口，因此捕獲這個請求
nginx中配置了反向代理規則，將manage.enjoyment.com代理到127.0.0.1:9001，因此請求被轉發
後臺系統的webpack server監聽的端口是9001，得到請求並處理，完成後將響應返回到nginx
nginx將得到的結果返回到瀏覽器
————————————————
版權聲明：本文爲CSDN博主「jackaroo2020」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq3399013670/article/details/100971283