Add agent config for ng serve (#18323)

1. Add agent setting for the proxy config 2. Add https-proxy-agent package Signed-off-by: AllForNothing <[email protected]>
goharbor · Mar 10, 2023 · ec7c99c · ec7c99c
1 parent 1e38565
commit ec7c99c
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -33,7 +33,7 @@ src/portal/typings/
 .vscode/
 **/node_modules
 **/ssl/
-**/proxy.config.json
+**/proxy.config.mjs
 
 src/portal/src/**/*.js
 src/portal/src/**/*.js.map

diff --git a/src/portal/README.md b/src/portal/README.md
@@ -10,27 +10,9 @@ Start
 ============
 1. npm install (should trigger 'npm postinstall')
 2. npm run postinstall  (if not triggered, manually run this step)
-3. create "proxy.config.json" file with below content under "portal" directory, and replace "hostname" with an available Harbor hostname
-4. npm run start
-5. open your browser on https://localhost:4200
-```json
-[
-  {
-    "context": [
-      "/api",
-      "/c",
-      "/i18n",
-      "/chartrepo",
-      "/LICENSE",
-      "/swagger.json",
-      "/swagger2.json",
-      "/devcenter-api-2.0",
-      "/swagger-ui.bundle.js"
-    ],
-    "target": "https://hostname",
-    "secure": false,
-    "changeOrigin": true,
-    "logLevel": "debug"
-  }
-]
-```
+3. copy "proxy.config.mjs.temp" file to "proxy.config.mjs"                 
+   `cp proxy.config.mjs.temp proxy.config.mjs`
+4. Modify "proxy.config.mjs" to specify a Harbor server. And you can specify the agent if you work behind a corporate proxy
+5. npm run start
+6. open your browser on https://localhost:4200
+
diff --git a/src/portal/angular.json b/src/portal/angular.json
@@ -83,7 +83,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "harbor-portal:build"
+            "browserTarget": "harbor-portal:build",
+            "proxyConfig": "proxy.config.mjs"
           },
           "configurations": {
             "production": {

diff --git a/src/portal/package-lock.json b/src/portal/package-lock.json
diff --git a/src/portal/package.json b/src/portal/package.json
@@ -5,9 +5,9 @@
   "angular-cli": {},
   "scripts": {
     "postinstall": "node scripts/convert-yaml-to-json.js && ng-swagger-gen -i ng-swagger-gen/swagger.json -o ng-swagger-gen && node scripts/delete-swagger-json.js",
-    "start": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng serve --ssl true --host 0.0.0.0 --proxy-config proxy.config.json",
-    "start:prod": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng serve --ssl true --host 0.0.0.0 --proxy-config proxy.config.json --configuration production",
-    "start_default_port": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng serve --ssl true --host 0.0.0.0 --port 443 --disable-host-check --proxy-config proxy.config.json",
+    "start": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng serve --ssl true --host 0.0.0.0",
+    "start:prod": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng serve --ssl true --host 0.0.0.0 --configuration production",
+    "start_default_port": "node --max_old_space_size=2048 ./node_modules/@angular/cli/bin/ng serve --ssl true --host 0.0.0.0 --port 443 --disable-host-check",
     "lint": "ng lint",
     "lint_fix": "ng lint --fix",
     "lint:style": "npx stylelint \"**/*.scss\"",
@@ -70,6 +70,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "express": "^4.17.1",
+    "https-proxy-agent": "^5.0.1",
     "jasmine-core": "~4.5.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "^6.4.0",

diff --git a/src/portal/proxy.config.mjs.temp b/src/portal/proxy.config.mjs.temp
@@ -0,0 +1,43 @@
+import HttpsProxyAgent from 'https-proxy-agent';
+// Define the proxy configuration
+const HarborProxyConfig = [
+  {
+    "context": [
+      "/api",
+      "/c",
+      "/i18n",
+      "/chartrepo",
+      "/LICENSE",
+      "/swagger.json",
+      "/swagger2.json",
+      "/devcenter-api-2.0",
+      "/swagger-ui.bundle.js"
+    ],
+    "target": "${A Harbor server}",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug"
+  }
+];
+// Define if you use agent
+const useAgent = false;
+// Specify an agent server, if empty, will read it from environment variable http_proxy or HTTP_PROXY
+const specifiedAgentServer = "${An agent server}";
+
+function setupForCorporateProxy(proxyConfig) {
+  if (useAgent) {
+    const agentServer = process.env.http_proxy || process.env.HTTP_PROXY || specifiedAgentServer;
+    if (agentServer) {
+      const agent = new HttpsProxyAgent(agentServer);
+      console.log('Using corporate agent server: ' + agentServer);
+      proxyConfig.forEach(function(entry) {
+        entry.agent = agent;
+      });
+    }
+  }
+  return proxyConfig;
+}
+
+export default setupForCorporateProxy(HarborProxyConfig);
+
+