In this post, we will explore how to create a Docker image for an Angular application and run it in multiple environments. We will use Docker, Angular, and Nginx.
Step 1:
Modifying Environment Files
Navigate to the src/assets/ directory in your Angular application. Create a folder named environments. Inside this folder, create three JSON files: env.json, env.prod.json, and env.test.json.
In the env.json file, write your configurations. For example:
{
"production": false,
"isLogConsole": false,
"apiUrl": "http://localhost:4200",
"tokenRefreshInterval": 3600
}
In the env.prod.json file, write your production configurations. For example:
{
"production": true,
"isLogConsole": true,
"apiUrl": "https://merterr.com",
"tokenRefreshInterval": 3600
}
Similarly, write your test configurations in the env.test.json file.
{
"production": false,
"isLogConsole": false,
"apiUrl": "https://test.merterr.com",
"tokenRefreshInterval": 3600
}
Using the Configuration File (env.json)
Create a file named config-model.ts to facilitate reading data from the env.json file.
export type ConfigModel = {
production: boolean;
isLogConsole: boolean;
apiUrl: string;
tokenRefreshInterval: number;
};
Create another file named configuration-loader.ts. The contents of this file should be as follows. The following code reads the env.json file and retrieves the relevant configurations.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ConfigModel } from '../model/config-model';
@Injectable({
providedIn: 'root',
})
export class ConfigurationLoader {
private readonly CONFIG_FILE_URL = './assets/environments/env.json';
private config: ConfigModel;
constructor(private http: HttpClient) {}
public loadConfiguration(): Promise<ConfigModel> {
return this.http
.get(this.CONFIG_FILE_URL)
.toPromise()
.then((config: any) => {
this.config = config;
return config;
})
.catch((error: any) => {
console.error(error);
});
}
getConfiguration(): ConfigModel {
return this.config;
}
}
Next, locate the app.module.ts file. Add the following code to this file. The env.json file will be read and the configurations will be ready when the module is initialized.
import { ConfigurationLoader } from './service/configuration-loader';
import { ConfigModel } from './model/config-model';
...
export function loadConfiguration(configService: ConfigurationLoader): () => Promise<ConfigModel> {
return () => configService.loadConfiguration();
}
...
@NgModule({
...
providers: [
...
{
provide: APP_INITIALIZER,
useFactory: loadConfiguration,
deps: [ConfigurationLoader],
multi: true
}
]
...
})
...
Let’s say we have a service named base-service.ts. Add the following code to this service to read the configurations.
@Injectable()
export class BaseService {
environment: ConfigModel;
constructor(private configLoader: ConfigurationLoader) {
this.environment = configLoader.getConfiguration();
}
getList(apiControllerName: string, action: string) {
return this.http.get(this.environment.apiUrl + '/' + apiControllerName + '/' + action, ...);
}
}
Step 2
Updating angular.json
Open the angular.json file. Update the configurations under the build section as shown below.
...
"build": {
...
"configurations": {
"prod": {
"fileReplacements": [
{
"replace": "src/assets/environments/env.json",
"with": "src/assets/environments/env.prod.json"
}
],
...
},
"test": {
"fileReplacements": [
{
"replace": "src/assets/environments/env.json",
"with": "src/assets/environments/env.test.json"
}
],
...
}
}
...
}
...
Step 3
Updating package.json
Open the package.json file and define a config for the build. We can take a build for production even if we use the environment as testor prod. We will already change the config file when the application is started. The purpose here is to apply other configurations specified for production in angular.json to our application. We could also write a common config for both test and production in the angular.json file and then pass that config as a parameter when building.
...
"scripts": {
...
"build_prod": "ng build --configuration prod --outputPath=dist/angular --namedChunks=false --aot --output-hashing=all --sourceMap=false",
...
}
...
Step 4
Updating main.ts
Open the main.ts file and update it as follows. Depending on the testor prodenvironment we will pass with docker run when the application is started, the contents of one of these files will be copied to env.json and this file content will be read.
fetch('./assets/environments/env.json').then(response => {
return response.json();
}).then(data => {
if (data.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
});
We are done on the Angular side.
Step 5
Creating entrypoint.sh for Docker
Create a file named entrypoint.sh in the root directory of the Angular application (where the Dockerfile is located). Add the following commands to this file.
cp /usr/share/nginx/html/assets/environments/env.${ENVIRONMENT}.json /usr/share/nginx/html/assets/environments/env.json
/usr/sbin/nginx -g "daemon off;"
Then open the Dockerfile and add the following code to your file.
FROM node:10-alpine as build-step
RUN mkdir -p /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build_prod
FROM nginx:stable
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-step /app/dist/angular /usr/share/nginx/html
COPY ["entrypoint.sh", "/entrypoint.sh"]
RUN chmod +x /entrypoint.sh
RUN chmod -R 755 /usr/share/nginx/html/
RUN chown -R nginx:nginx /usr/share/nginx/html/
CMD ["sh", "/entrypoint.sh"]
Step 6
6.1 Building and Running Angular Application Docker Image
6.1.1 Building The Image
$ docker image build -t deneme-image:latest .
6.1.2 Running Containers
Test Container
$ docker run -dit -e ENVIRONMENT=test -e TZ=Europe/Istanbul -p 80:80 --name=cont_test --restart=always deneme-image:latest
Production Container
$ docker run -dit -e ENVIRONMENT=prod -e TZ=Europe/Istanbul -p 80:80 --name=cont_prod --restart=always deneme-image:latest
And that’s it! We have completed our process. Good luck!
SOCIAL SHARE CARD GENERATOR