Angular 6 + Nginx + Docker + Kubernetes: Configuring Environment Variables for Different Environments

Angular 6 + Nginx + Docker + Kubernetes: Configuring Environment Variables for Different Environments

In the world of data science, setting up a robust and scalable environment is crucial. Today, we’ll delve into the configuration of environment variables for different environments using Angular 6, Nginx, Docker, and Kubernetes.

Introduction

Angular 6, Nginx, Docker, and Kubernetes are powerful tools that can help you build, deploy, and scale applications. However, managing environment variables across different environments can be a challenge. This guide will walk you through the process step-by-step.

Setting Up Angular 6 Environment Variables

Angular 6 provides an easy way to manage environment variables. You can define different variables for different environments in the environment.ts and environment.prod.ts files.

// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'http://api.example.com'
};

You can then import these variables into your Angular components:

import { environment } from '../environments/environment';
console.log(environment.apiUrl);

Dockerizing the Angular 6 Application

Next, we’ll containerize our Angular 6 application using Docker. Create a Dockerfile in the root directory of your project:

# Dockerfile
FROM node:10-alpine as builder
WORKDIR /app
COPY . .
RUN npm install && npm run build --prod

FROM nginx:1.15.8-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

This Dockerfile first builds the Angular application and then serves it using Nginx.

Configuring Nginx

We’ll use Nginx to serve our Angular application and to proxy API requests to avoid CORS issues. Create a nginx.conf file:

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
  location /api {
    proxy_pass http://api.example.com;
  }
}

Docker Compose for Local Development

For local development, we can use Docker Compose to manage our services. Create a docker-compose.yml file:

version: '3'
services:
  web:
    build: .
    ports:
      - "80:80"

You can then start your application with docker-compose up.

Kubernetes for Production

For production, we’ll use Kubernetes. First, create a deployment.yaml file:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: angular-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: angular-app
  template:
    metadata:
      labels:
        app: angular-app
    spec:
      containers:
      - name: angular-app
        image: your-docker-hub-username/angular-app:latest
        ports:
        - containerPort: 80

Next, create a service.yaml file:

apiVersion: v1
kind: Service
metadata:
  name: angular-app
spec:
  type: LoadBalancer
  ports:
  - port: 80
  selector:
    app: angular-app

You can then deploy your application with kubectl apply -f deployment.yaml -f service.yaml.

Conclusion

In this guide, we’ve walked through the process of setting up environment variables for different environments using Angular 6, Nginx, Docker, and Kubernetes. This setup allows you to build, deploy, and scale your applications with ease. Remember, the key to managing environment variables is to keep them separate for each environment and to use the right tools to manage them.

Keywords

• Angular 6
• Nginx
• Docker
• Kubernetes
• Environment Variables
• Configuration
• Deployment
• Scalability
• Data Science
• API
• CORS
• Docker Compose
• Kubernetes Deployment
• Kubernetes Service
• LoadBalancer
• Environment.ts
• Environment.prod.ts
• Dockerfile
• Nginx.conf
• Docker-compose.yml
• Deployment.yaml
• Service.yaml

Tags

• #Angular6
• #Nginx
• #Docker
• #Kubernetes
• #EnvironmentVariables
• #DataScience

About Saturn Cloud

Saturn Cloud is your all-in-one solution for data science & ML development, deployment, and data pipelines in the cloud. Spin up a notebook with 4TB of RAM, add a GPU, connect to a distributed cluster of workers, and more. Join today and get 150 hours of free compute per month.