feat: configurable url prefix (#1509)

* feat: configurable url prefix

* perf: Update Dockerfile with new base image tag

---------

Co-authored-by: wangruidong <940853815@qq.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 3 people

Dockerfile

@@ -1,5 +1,5 @@
 # Use base image to build the project avoid npm install every time
-FROM jumpserver/luna-base:20250609_105214 AS stage-build
+FROM jumpserver/luna-base:20260320_114803 AS stage-build
 
 ARG VERSION
 ENV VERSION=$VERSION

angular.json

@@ -18,6 +18,7 @@
             "aot": false,
             "sourceMap": true,
             "namedChunks": true,
+            "baseHref": "/luna/",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": ["src/polyfills.ts"],
@@ -101,7 +102,8 @@
           "builder": "@angular/build:dev-server",
           "options": {
             "buildTarget": "Luna:build",
-            "proxyConfig": "proxy.conf.json"
+            "proxyConfig": "proxy.conf.json",
+            "servePath": "/luna"
           },
           "configurations": {
             "production": {

package.json

@@ -4,8 +4,8 @@
   "license": "GPLv3",
   "scripts": {
     "ng": "ng",
-    "dev": "ng serve --proxy-config proxy.conf.json --hmr --host 0.0.0.0",
-    "start": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0",
+    "dev": "ng serve --proxy-config proxy.conf.json --serve-path /luna --hmr --host 0.0.0.0",
+    "start": "ng serve --proxy-config proxy.conf.json --serve-path /luna --host 0.0.0.0",
     "build": "ng build --configuration production",
     "test": "ng test",
     "lint": "ng lint",

src/app/app.module.ts

@@ -20,22 +20,19 @@ import { AppComponent } from './pages/app.component';
 import { ElementComponents } from './elements/elements.component';
 import { PluginModules } from './plugins/plugins';
 import { ClipboardService } from 'ngx-clipboard';
-import { environment, version } from '../environments/environment';
+import { version } from '../environments/environment';
 import { BehaviorSubject, forkJoin, Observable, of } from 'rxjs';
 import { FileInputAccessorModule } from 'file-input-accessor';
 import { catchError, mergeMap } from 'rxjs/operators';
 import { PagesComponents } from './pages/pages.component';
+import { getAppBasePath, withAppBase, withSitePrefix } from '@app/utils/path';
 
 export class CustomLoader implements TranslateLoader {
   constructor(private http: HttpClient) {}
 
   public getTranslation(lang: String): Observable<any> {
-    const remote = '/api/v1/settings/i18n/luna/?lang=' + lang + '&v=' + version;
-    let local = '/assets/i18n/' + lang + '.json';
-    const isProd = environment.production;
-    if (isProd) {
-      local = '/luna' + local;
-    }
+    const remote = withSitePrefix('/api/v1/settings/i18n/luna/?lang=' + lang + '&v=' + version);
+    const local = withAppBase('/assets/i18n/' + lang + '.json');
 
     return forkJoin([
       this.http.get(remote).pipe(catchError(() => of({}))),
@@ -74,7 +71,7 @@ export class CustomLoader implements TranslateLoader {
   bootstrap: [AppComponent],
   providers: [
     ...AllServices,
-    { provide: APP_BASE_HREF, useValue: '/luna/' },
+    { provide: APP_BASE_HREF, useFactory: getAppBasePath },
     CookieService,
     NGXLogger,
     ClipboardService,

src/app/elements/chat/chat.component.ts

@@ -15,6 +15,7 @@ import {
   HostListener,
   AfterViewInit
 } from '@angular/core';
+import { withUIBase } from '@app/utils/path';
 
 @Component({
   standalone: false,
@@ -157,7 +158,7 @@ export class ElementChatComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   private listenChatAI(): void {
-    this.iframeURL = '/ui/#/chat/chat-ai?from=luna';
+    this.iframeURL = withUIBase('#/chat/chat-ai?from=luna');
 
     window.addEventListener('message', event => {
       // 确认消息的来源是你信任的域

src/app/elements/connect/download-dialog/download-dialog.component.ts

@@ -1,5 +1,6 @@
 import {Component, Inject, OnInit} from '@angular/core';
 import {NZ_MODAL_DATA} from "ng-zorro-antd/modal";
+import {withSitePrefix} from '@app/utils/path';
 
 @Component({
   standalone: false,
@@ -32,6 +33,6 @@ export class ElementDownloadDialogComponent implements OnInit {
     if (this.ignoreRemind) {
       localStorage.setItem('hasDownLoadApp', '1');
     }
-    window.open('/core/download/', '_blank');
+    window.open(withSitePrefix('/core/download/'), '_blank');
   }
 }

src/app/elements/content/content-window/default/default.component.ts

@@ -1,5 +1,6 @@
 import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
 import {Asset, Endpoint, View} from '@app/model';
+import {joinEndpointUrl} from '@app/utils/path';
 
 @Component({
   standalone: false,
@@ -40,16 +41,16 @@ export class ElementConnectorDefaultComponent implements OnInit {
     const token = this.view.connectToken.id;
     switch (this.connector) {
       case 'chen':
-        const url = `${endpointUrl}/chen/connect?token=${token}`;
+        const url = joinEndpointUrl(endpointUrl, `/chen/connect?token=${token}`);
         const disableautohash = this.view.getConnectOption('disableautohash');
         if (disableautohash) {
           return `${url}&disableautohash=true`;
         }
         return url;
       case 'lion':
-        return `${endpointUrl}/lion/connect?token=${token}`;
+        return joinEndpointUrl(endpointUrl, `/lion/connect?token=${token}`);
       case 'default':
-        return `${endpointUrl}/koko/connect?token=${token}`;
+        return joinEndpointUrl(endpointUrl, `/koko/connect?token=${token}`);
     }
   }
 }

src/app/elements/content/content-window/koko/koko.component.ts

@@ -9,6 +9,7 @@ import {
 } from '@app/services';
 import { User } from '@app/globals';
 import { Command, InfoItem } from '../guide/model';
+import { joinEndpointUrl } from '@app/utils/path';
 
 @Component({
   standalone: false,
@@ -54,7 +55,7 @@ export class ElementConnectorKokoComponent implements OnInit {
     this.account = account;
     this.token = connectToken;
     const url = smartEndpoint.getUrl();
-    this.baseUrl = `${url}/koko`;
+    this.baseUrl = url;
     this.methodName = this.view.connectMethod.value;
     if (this.methodName === 'ssh_guide') {
       this.setInfoItems();
@@ -165,14 +166,17 @@ export class ElementConnectorKokoComponent implements OnInit {
       });
 
     if (this.protocol === 'k8s') {
-      return (this.iframeURL = `${this.baseUrl}/k8s/?` + query);
+      return (this.iframeURL = joinEndpointUrl(this.baseUrl, `/koko/k8s/?${query}`));
     }
 
-    this.iframeURL = `${this.baseUrl}/connect/?` + query;
+    this.iframeURL = joinEndpointUrl(this.baseUrl, `/koko/connect/?${query}`);
   }
 
   generateFileManagerURL() {
-    this.iframeURL = `${this.baseUrl}/elfinder/sftp/?token=${this.view.connectToken.id}&asset=${this.asset.id}`;
+    this.iframeURL = joinEndpointUrl(
+      this.baseUrl,
+      `/koko/elfinder/sftp/?token=${this.view.connectToken.id}&asset=${this.asset.id}`
+    );
   }
 
   async reconnect() {

src/app/elements/nav/nav.component.ts

@@ -12,6 +12,7 @@ import {
   SettingService,
   ViewService
 } from '@app/services';
+import { withSitePrefix, withUIBase } from '@app/utils/path';
 
 @Component({
   standalone: false,
@@ -59,7 +60,7 @@ export class ElementNavComponent implements OnInit {
           {
             id: 'Connect',
             click: () => {
-              window.open('/koko/elfinder/sftp/');
+              window.open(withSitePrefix('/koko/elfinder/sftp/'));
             },
             name: 'Connect'
           }
@@ -171,7 +172,7 @@ export class ElementNavComponent implements OnInit {
           {
             id: 'Download',
             click: () => {
-              window.open('/core/download/', '_blank');
+              window.open(withSitePrefix('/core/download/'), '_blank');
             },
             name: 'Download'
           }
@@ -217,6 +218,6 @@ export class ElementNavComponent implements OnInit {
   }
 
   onJumpUi() {
-    window.open('/ui/', '_blank');
+    window.open(withUIBase(), '_blank');
   }
 }

src/app/elements/nav/profile/profile.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {HttpService} from '@app/services';
 import {User} from '@app/globals';
 import {User as ModelUser} from '@app/model';
+import {withSitePrefix} from '@app/utils/path';
 
 interface MenuItem {
   id: string;
@@ -33,7 +34,7 @@ export class ElementUserFileComponent implements OnInit {
         id: 'logout',
         name: 'Log out',
         click: () => {
-          window.location.href = document.location.origin + '/core/auth/logout/';
+          window.location.href = withSitePrefix('/core/auth/logout/');
         },
       }
     ];