Inject system environment variables into angular app for dockerization
MODIFY
Dockerfile
Dockerfile
@@ -19,5 +19,17 @@ COPY --from=node /usr/src/app/dist/apiman-dev-portal /usr/share/nginx/html
COPY docker/tls.crt /etc/ssl/certs/tls.crt
COPY docker/tls.key /etc/ssl/private/tls.key
+#copy nginx configuration
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
+#replace all occurences of placeholders with environment variables
+#(see https://blog.codecentric.de/en/2019/03/docker-angular-dockerize-app-easily/)
+
+RUN echo "for mainFileName in /usr/share/nginx/html/main*.js ;\
+ do \
+ envsubst '\$APIMAN_UI_REST_URL \$KEYCLOAK_AUTH_URL ' < \$mainFileName > main.tmp ;\
+ mv main.tmp \${mainFileName} ;\
+ done \
+ && nginx -g 'daemon off;'" > run.sh
+
+ENTRYPOINT ["sh", "run.sh"]

MODIFY
src/app/api-data.service.ts
src/app/api-data.service.ts
-import { Injectable } from '@angular/core';
+import {Inject, Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';
-import { environment } from '../environments/environment';
export interface ApiSearchData {
beans: Array<ApiDetails>;
@@ -145,64 +144,61 @@ export interface GatewayEndpoint {
* A service which executes the REST calls to Apiman UI REST Interface
*/
export class ApiDataService {
-
- constructor(private http: HttpClient) { }
-
- private gatewayEndpoint = environment.apimanUiEndpoint;
+ constructor(private http: HttpClient, @Inject('APIMAN_UI_REST_URL') private apimanUiRestUrl: string) { }
public getAllApis(): Observable<ApiSearchData> {
- const url = this.gatewayEndpoint + '/search/apis/';
+ const url = this.apimanUiRestUrl + '/search/apis/';
const body = { filters: [{name: 'name', value: '***', operator: 'like'}], page: 1, pageSize: 10000};
return this.http.post(url, body) as Observable<ApiSearchData>;
}
public getApiEndpoint(organizationId, apiId, apiVersion) {
- const url = this.gatewayEndpoint + '/organizations/' + organizationId + '/apis/' + apiId + '/versions/' + apiVersion + '/endpoint/';
+ const url = this.apimanUiRestUrl + '/organizations/' + organizationId + '/apis/' + apiId + '/versions/' + apiVersion + '/endpoint/';
return this.http.get(url) as Observable<ApiEndpointDetails>;
}
public getApiKey(organizationId, clientId, clientVersion) {
- const url = this.gatewayEndpoint + '/organizations/' + organizationId + '/clients/' + clientId + '/versions/' + clientVersion + '/apikey/';
+ const url = this.apimanUiRestUrl + '/organizations/' + organizationId + '/clients/' + clientId + '/versions/' + clientVersion + '/apikey/';
return this.http.get(url) as Observable<ApiKeyDetails>;
}
public getUserClients() {
- const url = this.gatewayEndpoint + '/currentuser/clients/';
+ const url = this.apimanUiRestUrl + '/currentuser/clients/';
return this.http.get(url) as Observable<Array<ClientDetails>>;
}
public getUserApis() {
- const url = this.gatewayEndpoint + '/currentuser/apis/';
+ const url = this.apimanUiRestUrl + '/currentuser/apis/';
return this.http.get(url) as Observable<Array<ApiDetails>>;
}
public getApiVersions(organizationId, apiId) {
- const url = this.gatewayEndpoint + '/organizations/' + organizationId + '/apis/' + apiId + '/versions/';
+ const url = this.apimanUiRestUrl + '/organizations/' + organizationId + '/apis/' + apiId + '/versions/';
return this.http.get(url) as Observable<Array<ApiVersionsDetails>>;
}
public getApiVersionDetails(organizationId, apiId, apiVersion) {
- const url = this.gatewayEndpoint + '/organizations/' + organizationId + '/apis/' + apiId + '/versions/' + apiVersion;
+ const url = this.apimanUiRestUrl + '/organizations/' + organizationId + '/apis/' + apiId + '/versions/' + apiVersion;
return this.http.get(url) as Observable<ApiVersionDetails>;
}
public getClientVersions(organizationId, clientId) {
- const url = this.gatewayEndpoint + '/organizations/' + organizationId + '/clients/' + clientId + '/versions/';
+ const url = this.apimanUiRestUrl + '/organizations/' + organizationId + '/clients/' + clientId + '/versions/';
return this.http.get(url) as Observable<Array<ClientVersionDetails>>;
}
public getContracts(organizationId, clientId, clientVersion) {
- const url = this.gatewayEndpoint + '/organizations/' + organizationId + '/clients/' + clientId + '/versions/' + clientVersion + '/contracts';
+ const url = this.apimanUiRestUrl + '/organizations/' + organizationId + '/clients/' + clientId + '/versions/' + clientVersion + '/contracts';
return this.http.get(url) as Observable<Array<ContractDetails>>;
}
public getGateways() {
- const url = this.gatewayEndpoint + '/gateways';
+ const url = this.apimanUiRestUrl + '/gateways';
return this.http.get(url) as Observable<Array<GatewayDetails>>;
}
public getGatewayEndpoint(gatewayId) {
- const url = this.gatewayEndpoint + '/gateways/' + gatewayId + '/endpoint';
+ const url = this.apimanUiRestUrl + '/gateways/' + gatewayId + '/endpoint';
return this.http.get(url) as Observable<GatewayEndpoint>;
}

MODIFY
src/app/app-init.ts
src/app/app-init.ts
-import { environment } from '../environments/environment';
import { KeycloakService } from 'keycloak-angular';
+import {Inject} from '@angular/core';
+import {environment} from '../environments/environment';
export function initializer(keycloak: KeycloakService): () => Promise<any> {
return (): Promise<any> => keycloak.init({
config: {
- url: environment.keycloakAuthEndpoint,
+ url: environment.keycloakAuthUrl,
realm: 'Apiman',
clientId: 'apimandevportal'
},

MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -15,6 +15,7 @@ import { HttpClientModule } from '@angular/common/http';
import { KeycloakService, KeycloakAngularModule } from 'keycloak-angular';
import { initializer } from './app-init';
+import {environment} from '../environments/environment';
@NgModule({
@@ -38,6 +39,14 @@ import { initializer } from './app-init';
useFactory: initializer,
multi: true,
deps: [KeycloakService]
+ },
+ {
+ provide: 'APIMAN_UI_REST_URL',
+ useValue: environment.apimanUiRestUrl
+ },
+ {
+ provide: 'KEYCLOAK_AUTH_URL',
+ useValue: environment.keycloakAuthUrl
}
],
bootstrap: [AppComponent]

MODIFY
src/environments/environment.prod.ts
src/environments/environment.prod.ts
export const environment = {
production: true,
- apimanUiEndpoint: 'https://pc0854.scheer.systems:8443/apiman',
- keycloakAuthEndpoint: 'https://pc0854.scheer.systems:8445/auth'
+ apimanUiRestUrl: '${APIMAN_UI_REST_URL}',
+ keycloakAuthUrl: '${KEYCLOAK_AUTH_URL}'
};

MODIFY
src/environments/environment.ts
src/environments/environment.ts
export const environment = {
production: false,
- apimanUiEndpoint: 'https://pc0854.scheer.systems:8443/apiman',
- keycloakAuthEndpoint: 'https://pc0854.scheer.systems:8445/auth'
+ apimanUiRestUrl: 'https://[apimanUiRestEndpoint]:[port]/apiman',
+ keycloakAuthUrl: 'https://[keycloakEndpoint]:[port]/auth'
};
/*

Inject system environment variables into angular app for dockerization