Angular and Docker

Using Docker with Angular allows you to containerize your application, making it easier to manage dependencies, deploy consistently across different environments, and scale efficiently. This guide covers the basics of setting up and using Docker with Angular.

Setting Up Docker

First, install Docker on your system. Follow the instructions on the Docker website to download and install Docker.

Creating a Dockerfile

Create a Dockerfile in the root of your Angular project to define the Docker image:

# Dockerfile
# Stage 1: Build the Angular application
FROM node:14 as build

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .
RUN npm run build --prod

# Stage 2: Serve the Angular application with NGINX
FROM nginx:alpine

COPY --from=build /app/dist/your-angular-app /usr/share/nginx/html

# Copy custom NGINX configuration file
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Creating an NGINX Configuration File

Create an nginx.conf file to configure NGINX to serve your Angular application:

# nginx.conf
server {
  listen 80;

  server_name localhost;

  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api {
    proxy_pass http://backend:3000;
  }
}

Building the Docker Image

Build the Docker image for your Angular application:

docker build -t your-angular-app .

Running the Docker Container

Run the Docker container to serve your Angular application:

docker run -d -p 80:80 your-angular-app

Docker Compose

Use Docker Compose to manage multi-container applications. Create a docker-compose.yml file:

# docker-compose.yml
version: '3'
services:
  frontend:
    build: .
    ports:
      - "80:80"
  backend:
    image: node:14
    working_dir: /app
    volumes:
      - ./backend:/app
    command: npm start
    ports:
      - "3000:3000"

Using Docker Compose

Use Docker Compose to build and run your application:

docker-compose up --build

Managing Environment Variables

Use environment variables in Docker to manage configuration. Update your Dockerfile to include environment variables:

# Dockerfile
...
ENV API_URL=http://backend:3000
...

Accessing Environment Variables in Angular

Access environment variables in your Angular application:

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: process.env.API_URL || 'http://localhost:3000'
};

// Use the environment variable in your services
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = environment.apiUrl;

  constructor(private http: HttpClient) {}

  getData() {
    return this.http.get(`${this.apiUrl}/data`);
  }
}

Key Points

Conclusion

Using Docker with Angular allows you to containerize your application, ensuring consistent deployment across different environments. By setting up Docker, creating a Dockerfile, configuring NGINX, using Docker Compose, and managing environment variables, you can efficiently deploy and manage your Angular applications. Happy coding!