CODEWITHSUNDEEP
angulardockerdocker-compose
Vasanth S
Vasanth S

Reputation: 94

Angular docker application- Unable to access url in remote server

I am trying to dockerize my angular app. The changes worked fine for me in local, but when I deploy this to a remote server and try to access the URL, it doesn't seem to work. I know that the problem is with the line ng serve --host 0.0.0.0, but how to fix it?

URL when I try to access in local - localhost:4200 <- This is working

URL when I try to access in remote - <remote_host_name>:4200 <- This is not working

Please find below the details of my docker setup

Dockerfile

FROM node:14.17-alpine AS builder
USER root
RUN mkdir /home/node/app
COPY ./package.json /home/node/app/package.json
COPY ./package-lock.json /home/node/app/package-lock.json
RUN chmod 777 /home/node/app
WORKDIR /home/node/app
EXPOSE 4200
RUN npm ci --quiet
RUN npm rebuild node-sass

Docker compose file

version : '3.8'

services:
  frontend:
    build: .
    working_dir: /home/node/app
    command: sh -c "npm start"
    ports:
      - 4200:4200
    volumes:
      - ./:/home/node/app
      - node_modules:/home/node/app/node_modules
    container_name: realm-frontend
volumes:
  node_modules:

package.json scripts(this gets invoked on "npm start")

  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --proxy-config  src/app/proxy.conf.json",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

Upvotes: 0

Views: 644

Answers (1)

matic1123
matic1123

Reputation: 1119

It might not be directly the answer you are looking for, but in production deployments, you should use multi-stage builds. With them, you then build your angular application and create dist output (HTML, CSS, js bundles) which you then use in actual application server deployments as static resources (Traefik, Nginx, Apache, Caddy, ...). I will give you an example for Nginx.

The multi-stage Dockerfile I am using is:

### STAGE 1: Build ###

# We label our stage as ‘builder’
FROM node:lts-alpine as builder

COPY package.json package-lock.json .npmrc ./
## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
RUN npm ci --loglevel verbose && mkdir /ng-app && mv ./node_modules ./ng-app
WORKDIR /ng-app
COPY . .
## Build the angular app in production mode and store the artifacts in dist folder
RUN npm run build-hram-prod # this in package.json is: ng build --configuration production

### STAGE 2: Setup ###

FROM nginxinc/nginx-unprivileged:1.22-alpine
## Copy our default nginx config
COPY --chown=nginx:nginx nginx/default.conf /etc/nginx/conf.d/
## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
COPY --chown=nginx:nginx --from=builder /ng-app/dist/ /usr/share/nginx/html

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

So it consists of two parts "builder" phase and the actual runtime image, which is the Nginx server which will then host our application on / location.

The Nginx configuration to go along the way (in Dockerfile referenced to nginx/default.conf copy):

server {
  listen 8080;
  root /usr/share/nginx/html;
  access_log off;

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

Hope it helps.

Upvotes: 1

Related Questions