Setting Proxy Web IIS - Reverse Proxy IIS with Agnular 2 - Proxy chuyển hướng đến 2 địa chỉ IP khác nhau - (IIS rewrite rules configuration for Angular 2+)

Lưu lại nhưng gì đã cài đặt phía trên để tự động cài đặt IIS

Cài đặt môi trường web server test IIS: refer

Lưu ý rằng để hiển thị chức năng URL rewrite bạn cần phải download và install: download

Mở chức năng IIS và Add Website demo

Dưới đây là cấu hình Proxy phục vụ mục đích chuyển hướng đến 2 địa chỉ IP máy khác nhau.

Sau khi tạo các rules xong chúng ta có được file: web.config

File này sẽ nằm tại thư mục root/ như ví dụ này thì sẽ là 
D:\MY_JOB\HTC\dist\web.config
IIS rewrite rules configuration for Angular

D:\MY_JOB\HTC\dist\web.config

IIS vs Angular 2+ 

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <clear />
                <rule name="ReverseProxyInboundRule1" stopProcessing="true">
                    <match url=".*"/>
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
			<add input="{REQUEST_URI}" pattern="^/(API/Mobile/)" negate="true"/>
			<add input="{REQUEST_URI}" pattern="^/(api)" negate="true"/>
                    </conditions>
		    <action type="Rewrite" url="/index.html"/>
                </rule>
                <rule name="ReverseProxyInboundRule2" stopProcessing="true">
                    <match url="API/Mobile/(.*)" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
                    <action type="Rewrite" url="http://10.32.35.20:89/API/Mobile/{R:1}" logRewrittenUrl="true" />
                </rule>
                <rule name="ReverseProxyInboundRule3" stopProcessing="true">
                    <match url="api/(.*)" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
                    <action type="Rewrite" url="http://portal-devxxx.vn:88/api/{R:1}" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Chúng ta co thể so sánh cấu hình trên server với Angular 2+
Dưới đây là cấu hình phía Angular 2+

D:\MY_JOB\HTC\RTS-metronic-angular\src\assets\env\proxy.config.js

IIS vs Angular 2+

module.exports = {
  "/api/*": {
    target: "http://portal-devxxx.vn:88",
    secure: false,
    logLevel: "debug",
    changeOrigin: true,
  },
  "/API/Mobile/*": {
    target: "http://10.32.35.20:89",
    secure: false,
    logLevel: "debug",
    changeOrigin: true,
  },
};

Rewrite (Fake url proxy.config.js. Eg. /abcd/ => '')
https://test.com/abcd/demo => https://test.com/demo

2021

module.exports = {
  "/abcd/*": {
    target: "https://test.com",
    secure: false,
    logLevel: "debug",
    changeOrigin: true,
    pathRewrite: { "/abcd/": "" },
  },
};

D:\MY_JOB\HTC\RTS-metronic-angular\angular.json

IIS vs Angular 2+

...
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "demo1-app:build",
    "proxyConfig": "src/assets/env/proxy.config.js"
  },
  "configurations": {
    "production": {
      "browserTarget": "demo1-app:build:production"
    }
  }
},
...

Các bạn có thể tham khảo thêm tại một số trang khác:|
https://stackoverflow.com/questions/35284988/angular-2-404-error-occur-when-i-refresh-through-the-browser
https://devblogs.microsoft.com/premier-developer/tips-for-running-an-angular-app-in-iis/
https://www.stefanoscerra.it/iis-rewrite-rules-configuration-angular-web-config/

Bài viết trên đây chỉ là để tham khảo, một số vấn đề tôi đề cập có thể chưa đúng hoàn toàn 
nhưng hy vọng cũng cung cấp cho bạn đọc một cái nhìn khái quát.
Cảm ơn đã xem bài viết này!