Running Angular Apps with Nginx in Docker Anywhere: A Simple Guide

(DOCKER +ANGULAR +NGINX)

Introduction

Creating a Docker image for an Angular application with Nginx involves leveraging Docker’s capabilities to package the Angular application’s static files and configure Nginx to serve them. This approach ensures that the Angular application can be easily deployed and run in various environments, with the flexibility and scalability provided by Docker containerization.

The process of creating a Docker image for an Angular application using Nginx can also be applied to deploying the application on OpenShift Container Platform (OCP).

Creating Docker Image In Angular Application using Nginx :

To get started with creating Docker Image in your Angular app, follow these below steps:

Step-1

Create Your Angular Application: Make sure your Angular application is built and ready to be served. You typically build your Angular app using the Angular CLI (ng new command)

ng new my-app

Step-2

Write a Dockerfile: Create a Dockerfile in the root directory of your Angular project. The Dockerfile contains instructions for building your Docker image.

Folder Structure for Angular Application.

docker file Example:

### STAGE 1: Build ###
FROM node:lts-alpine AS build

#### make the 'app' folder the current working directory
WORKDIR /usr/src/app

#### copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

#### install angular cli
RUN npm install -g @angular/cli

#### install project dependencies
RUN npm install

#### copy things
COPY . .

#### generate build --prod
RUN npm run build --prod

### STAGE 2: Run ###
FROM nginxinc/nginx-unprivileged

#### copy nginx conf
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

#### copy artifact build from the 'build environment'
COPY --from=build /usr/src/app/dist/bookproject /usr/share/nginx/html

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

Step-3

Create nginx.conf file :

To create nginx.conf file in the root folder follow these below example. If without nginx the docker image will be create but, when you run the application that time you will face the routing issues. So, to avoid those issues use nginx.conf file,.

server {
    listen 0.0.0.0:8080;
    listen [::]:8080;
    default_type application/octet-stream;

    gzip                    on;
    gzip_comp_level         6;
    gzip_vary               on;
    gzip_min_length         1000;
    gzip_proxied            any;
    gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers            16 8k;
    gunzip on;
    client_max_body_size    256M;

    root /usr/share/nginx/html;

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

Step-4

Build a Docker Image

Run the following command to build a docker image

docker build -t <ImageName> <path dir>

Ex: docker build -t angularapp .

Step 5

Create a container:

Once the image is ready, run the below command to containerize the application. Be careful, the expose port should be 80 or if you want to change the port then go to nginx.conf file change the port.

docker run --name <container name> -p <localport>:<expose port> -d <image name>
Ex: docker run --name angular -p 80:3000 -d angularapp

By doing this, we’ll be able to create a docker image of our angular application using nginx.

For reference, check my sample code in GitHub:

GitHub - bidyut90/angulardocker

THANK YOU…

Hope, This medium will helpful for your reference…