Angular-CLI proxy not working inside docker

Issue

I have a docker-compose file with everything I need for my project.

This docker-compose has a nginx server, mysql, phpmyadmin and php. At the top of it, I added recently an angular container. Everything is working fine if I go to localhost:4200, I'm on the angular app, and if I go to localhost:80, I'm on the Laravel backend.

Now I need to make a simple classical request to my backend API. I set up a proxy for angular looking like this :

{
   "/api/*": {
      "target":"http://localhost:80",
      "secure":false,
      "changeOrigin":true,
      "pathRewrite": {"^/api" : ""},
      "logLevel":"debug"
   }
}

This is the config I copied based on this topic. But when I try to make the call, Chrome is saying that http://localhost:4200/api/test isn't existing (error 404) which is normal. On the other hand, the angular server says
HPM] Error occurred while trying to proxy request /test from localhost:4200 to http://localhost:80 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

I'm guessing it comes from docker but I can't figure out how to resolve this.

[EDIT]

version: '2'

services:
  web_server:
    restart: always
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - /projects/laravel/:/var/www/                                               
      - /docker/sites-enabled-nginx:/etc/nginx/sites-enabled/     
      - /docker/nginx.conf:/etc/nginx/nginx.conf
    links:
      - php:php

  php:
    restart: always
    build: /docker/php/
    container_name: "php"
    volumes:
      - /projects/laravel/:/var/www/       
      - db:db

  db:
    restart: always
    image: mysql
    volumes:
      - /Users/Irindul/mysql:/var/lib/mysql     
    ports:
      - "3306:3306"                                   
    container_name: "mysql"
    environment:
      - MYSQL_DATABASE=homestead
      - MYSQL_USER=homestead
      - MYSQL_PASSWORD=secret
      - MYSQL_ROOT_PASSWORD=root

  myadmin:
    restart: always
    image: phpmyadmin/phpmyadmin
    links:
      - db:db
    ports:
      - "8080:80"                                     



  angular:
    restart: always
    build: /docker/angular
    container_name: angular
    volumes:
      - /projects/angular/package.json:/usr/src/app/package.json
      - /projects/angular:/usr/src/app/
    ports:
      - "4200:4200"

And here are the Dockerfiles for PHP and Angular :

PHP :

FROM php:7-fpm
RUN docker-php-ext-install pdo pdo_mysql
WORKDIR /var/www

Angular :

#Latest Node
FROM node

#Creating working folder
RUN mkdir -p /usr/src/app

#Update pwd
WORKDIR /usr/src/app

#Run npm
RUN npm install
EXPOSE 4200
CMD ["npm", "start"]

package.json :

{
  "name": "client",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -H 0.0.0.0 --proxy-config proxy.config.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Solution

I fixed the problem by removing Angular from the docker and running it manually with a simple npm start.

Answered By - Irindul

Read More

Angular CLI Proxy + Django Backend not working with Docker

Issue

I have an Angular + Django project where I am providing an api to angular with django. When I run the angular service without docker everything works as expected. When I run the angular service using docker compose, angular is suddenly unable to connect to the backend api service. I have seen a similar post on stack but the difference is I am using a single compose file to include two different compose files so I'm not sure how to "link" the backend services to the frontend service like the answers suggest in this post. So what can I do to make this work within docker?

Error: [webpack-dev-server] [HPM] Error occurred while proxying request localhost:4200/api/project_types/ to http://api:8000/ [ENOTFOUND] (https://nodejs.org/api/errors.html#errors_common_system_errors)

Project Layout:

Note: I've dockerized the two services and am using one compose file in the root folder to include both the backend and frontend compose files.

- root
  - backend 
    - backend-compose.yml
  - frontend
    - frontend-compose.yml
  - docker-compose.yml

Root Compose:

version: '3.7'

include:
  - ./frontend/compose.yml
  - ./backend/local.yml

Frontend Compose:

services:
  web:
    build:
      context: .
      target: builder
    ports:
      - 4200:4200
    volumes:
      - ./angular:/app
      - /project/node_modules

Backend Compose: (Note: built with cookiecutter django)

version: '3'

volumes:
  backend_local_postgres_data: {}
  backend_local_postgres_data_backups: {}

services:
  django:
    build:
      context: .
      dockerfile: ./compose/local/django/Dockerfile
    image: backend_local_django
    container_name: backend_local_django
    depends_on:
      - postgres
    volumes:
      - .:/app:z
    env_file:
      - ./.envs/.local/.django
      - ./.envs/.local/.postgres
    ports:
      - '8000:8000'
    command: /start

  postgres:
    build:
      context: .
      dockerfile: ./compose/production/postgres/Dockerfile
    image: backend_production_postgres
    container_name: backend_local_postgres
    volumes:
      - backend_local_postgres_data:/var/lib/postgresql/data
      - backend_local_postgres_data_backups:/backups
    env_file:
      - ./.envs/.local/.postgres

  docs:
    image: backend_local_docs
    container_name: backend_local_docs
    build:
      context: .
      dockerfile: ./compose/local/docs/Dockerfile
    env_file:
      - ./.envs/.local/.django
    volumes:
      - ./docs:/docs:z
      - ./config:/app/config:z
      - ./backend:/app/backend:z
    ports:
      - '9000:9000'
    command: /start-docs

EDIT

proxy.conf.json

{
    "/api/*": {
      "target": "http://django:8000/",
      "secure": false,
      "changeOrigin": true
    }
  }

Frontend Dockerfile

# syntax=docker/dockerfile:1.4

FROM --platform=$BUILDPLATFORM node:17.0.1-bullseye-slim as builder

RUN mkdir /project
WORKDIR /project

RUN npm install -g @angular/cli@13

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

COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]

FROM builder as dev-envs

RUN <<EOF
apt-get update
apt-get install -y --no-install-recommends git
EOF

RUN <<EOF
useradd -s /bin/bash -m vscode
groupadd docker
usermod -aG docker vscode
EOF
# install Docker tools (cli, buildx, compose)
COPY --from=gloursdocker/docker / /

CMD ["ng", "serve", "--host", "0.0.0.0"]

Solution

Have you tried Docker networks, as suggested in this answer?

I think you could add something like this to both compose files for all necessary services to connect to:

networks:
  backend-net:
    driver: bridge

Then add something like this under each of your services that need it:

networks:
  - backend-net

And make sure your proxy.config.json is updated as suggested in that answer as well.

More info on setting up networking between containers can be found here in the Docker docs.

Answered By - Kyle Beechly

Read More

Right way to configure docker-compose for Angular apps

Issue

I am trying to configure Docker to develop Angular apps locally, and as I have a database and a Node.js app, I am configuring it with docker compose. I am looking for a configuration where I can make changes locally using my editor, and Angular should detect the changes automatically reload from within Docker (like how it would have happened without Docker).

I am relatively new to Docker, so my understanding is that using the COPY statement inside Dockerfile means that a copy of my local files are made into the image, and therefore local changes don't trigger a recompile. My understanding is that I need to mount the local application as a volume and make it available inside at, say /app and then things should work. However, I am using a Mac, and the base image is Linux based (I am using FROM node:12-slim), so the npm packages have to be fetched and built inside the image. I removed node_modules from my local folder structure.

To meet these goals, this is how I configured the Angular Dockerfile

FROM node:12-slim

COPY package.json /app/package.json

WORKDIR /app
RUN npm install
RUN npm install -g @angular/cli@8.1.2

ENV PATH /app/node_modules/.bin:$PATH

RUN apt-get update
RUN apt-get install -y vim
RUN apt-get install -y curl

and this is how I configured the docker-compose.yml file

version: '3'

services:
  
  ... other services ...

  blackmirrorhq:
    image: <angular app image>
    expose:
      - 4200
    ports:
      - 4200:4200
    restart: on-failure
    volumes:
      - <path to angular app>:/app
    working_dir: /app
    command: "npm install && npm install -g @angular/cli@8.1.2 && ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check"
    # command: "ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check"

volumes:
  postgres-volume:

I think the node_modules folder gets overwritten when the docker compose starts because of the volume binding. The server fails citing missing packages. So, I am using the docker-compose file and using the command as:

npm install && npm install -g @angular/cli@8.1.2 && ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check

However, while this is fetching all the packages, it is not starting the server. The node_modules folder gets created though.

After this, I comment out the line and uncomment out the next line that simply starts the server:

ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check

With this, I am able to get it to work. However, I don't think this is the right way to approach it and wanted to understand what changes I need to make to configure it correctly.

Solution

just to rest your mind at ease, the method you used at last is the correct one. If you want to learn why read below:

There are some IDE-centric implementations that make the whole process a bit clueless and simpler but since we're not IDE specific I'll use the general idea.

the most popular approach is to completely develop on the docker container meaning you don't have (or at least don't use) any local environment.

the basic gist of it (as you pointed out) is making a base container with our dependencies and CLI installed (in this case angular CLI) then run this image and while the container is up and running make changes and letting angular automatically recompile as we develop. Now the way we connect our code to the container is using bind mounts which allow us to see the same files from our local machine editor and the container running it.

here's a simple docker-compose and basic container Dockerfile for this use case:

Dockerfile

FROM node:lts
RUN mkdir /home/node/app && chown node:node /home/node/app
RUN mkdir /home/node/app/node_modules && chown node:node /home/node/app/node_modules
WORKDIR  /home/node/app
USER node
COPY --chown=node:node package.json package-lock.json ./
RUN npm ci --quiet
COPY --chown=node:node . .

Since we don't care about the node_modules we can keep them as a docker volume in the container

docker-compose.yml

version: '3.7'
services:
  app:
    build: .
    command: sh -c "npm start"
    ports:
      - 4200:4200
    working_dir: /home/node/app
    volumes:
      - ./:/home/node/app
      - node_modules:/home/node/app/node_modules
volumes:
  node_modules:

credits to markfknight.dev for the working example

if you want to see a working example this might help you grasp the concept

Answered By - Noam Yizraeli

Read More

Docker entrypoint script for image build not correct

Issue

I am building an Docker-Image for a Angluar Web-App and in the image creation I build the angular boundle using a node-image as base and then copy the dist folder to an nginx webserver. As an entrypoint I use a shellscript that replaces some placeholders in the dist files with environment variables (API-Hostname etc.). The Image builds with no error but when I try to run a container with that image, I get the following error:

run.sh: 1: Syntax error: word unexpected (expecting "do")

My Dockerfile:

FROM node:16 AS build

WORKDIR /app

COPY package*.json ./
COPY src ./src
COPY angular.json ./
COPY tsconfig.app.json ./
COPY tsconfig.json ./

RUN npm install
RUN npm run build-docker


FROM nginx
COPY ./docker/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/dist/[PROJECT NAME] /usr/share/nginx/html

COPY ./docker/run.sh ./run.sh

ENTRYPOINT ["sh", "run.sh"]

The run.sh script:

for mainfile in $(ls /usr/share/nginx/html/main*.js);
do
  envsubst '$HOST_NAME' < $mainfile > main.tmp;
  mv main.tmp $mainfile;
done

nginx -g 'daemon off;'

I can not find any error in this configuration, any ideas?

Solution

Just posting the answer here for others to find if needed.

The Problem was, that I had a semicolon in the run.sh file. At the end of the for loop. So the correct script is:

for mainfile in $(ls /usr/share/nginx/html/main*.js)
do
  envsubst '$HOST_NAME' < $mainfile > main.tmp;
  mv main.tmp $mainfile;
done

nginx -g 'daemon off;'

Thanks to @DavidMaze for the help!

Answered By - Tim Gabrikowski

Read More

404 Error on page refresh with Angular 7, NGINX and Docker

Issue

I have an application written in Angular 7 that I am deploying to a Docker container with NGINX. When I run the container, everything works perfectly except that if i Refresh the page in the browser (F5) I get an NGINX 404 error page.

Here is my nginx.conf file from which you can see ive tried "try_files"

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    gzip  on;

    include /etc/nginx/conf.d/*.conf;

    server {
        listen 80; 

        location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri /index.html;
        }
    }
}

My Dockerfile:

FROM node:alpine as builder
RUN apk update && apk add --no-cache make git

WORKDIR /app

COPY package.json package-lock.json /app/
RUN cd /app && npm install

COPY .  /app
RUN cd /app && npm run build

FROM nginx:alpine

RUN rm -rf /usr/share/nginx/html/* && rm -rf /etc/nginx/nginx.conf
COPY ./nginx.conf /etc/nginx/nginx.conf
COPY --from=builder /app/dist/hyper-client-admin /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Directory on the deployed container is:

/usr/share/nginx/html # ls -la
total 23564
drwxr-xr-x    1 root     root          4096 May 20 00:18 .
drwxr-xr-x    1 root     root          4096 Mar  8 03:05 ..
drwxr-xr-x    2 root     root          4096 May 20 00:18 assets
-rw-r--r--    1 root     root        290728 May 20 00:18 es2015-polyfills.js
-rw-r--r--    1 root     root        211178 May 20 00:18 es2015-polyfills.js.map
-rw-r--r--    1 root     root           997 May 20 00:18 favicon.png
-rw-r--r--    1 root     root           770 May 20 00:18 index.html
-rw-r--r--    1 root     root        114749 May 20 00:18 main.js
-rw-r--r--    1 root     root        115163 May 20 00:18 main.js.map
-rw-r--r--    1 root     root        241546 May 20 00:18 polyfills.js
-rw-r--r--    1 root     root        240220 May 20 00:18 polyfills.js.map
-rw-r--r--    1 root     root          6224 May 20 00:18 runtime.js
-rw-r--r--    1 root     root          6214 May 20 00:18 runtime.js.map
-rw-r--r--    1 root     root       1117457 May 20 00:18 styles.js
-rw-r--r--    1 root     root       1191427 May 20 00:18 styles.js.map
-rw-r--r--    1 root     root      10048515 May 20 00:18 vendor.js
-rw-r--r--    1 root     root      10505601 May 20 00:18 vendor.js.map

And here is the console output:

172.17.0.1 - - [20/May/2019:00:18:30 +0000] "GET / HTTP/1.1" 200 371 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"lopment\hyper-client-admin>
172.17.0.1 - - [20/May/2019:00:18:30 +0000] "GET /runtime.js HTTP/1.1" 200 6224 "http://localhost:81/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:30 +0000] "GET /polyfills.js HTTP/1.1" 200 241546 "http://localhost:81/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:30 +0000] "GET /main.js HTTP/1.1" 200 114749 "http://localhost:81/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:30 +0000] "GET /styles.js HTTP/1.1" 200 1117457 "http://localhost:81/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:30 +0000] "GET /vendor.js HTTP/1.1" 200 10048515 "http://localhost:81/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:31 +0000] "GET /assets/logo-white.svg HTTP/1.1" 200 4519 "http://localhost:81/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:31 +0000] "GET /favicon.png HTTP/1.1" 200 997 "http://localhost:81/login" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
172.17.0.1 - - [20/May/2019:00:18:35 +0000] "GET /login HTTP/1.1" 404 188 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36" "-"
2019/05/20 00:18:35 [error] 6#6: *4 open() "/usr/share/nginx/html/login" failed (2: No such file or directory), client: 172.17.0.1, server: localhost, request: "GET /login HTTP/1.1", host: "localhost:81"

Any ideas whats going on here?

UPDATE: The actual answer to this lies in the comments of @Rajesh's Answer. The issue is that I was working on /etc/nginx/nginx.conf and I needed to be working on /etc/nginx/conf.d/default.conf

Solution

With a refresh on Angular app, we need to tell nginx web server to first look at the index.html file if the requested route exists or not before showing the error page. This is working fine for me:

nginx.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

Dockerfile

FROM node:16-alpine as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod

FROM nginx:alpine
COPY ./nginx.conf /etc/nginx/conf.d/default.conf # Not /etc/nginx/nginx.conf
COPY --from=node /app/dist/myapp /usr/share/nginx/html

Answered By - rajesh-nitc

Read More

How to create a Docker container of an AngularJS app?

Issue

I have an AngularJS app that has this structure:

app/
----- controllers/
---------- mainController.js
---------- otherController.js
----- directives/
---------- mainDirective.js
---------- otherDirective.js
----- services/
---------- userService.js
---------- itemService.js
----- js/
---------- bootstrap.js
---------- jquery.js
----- app.js
views/
----- mainView.html
----- otherView.html
----- index.html

How do I go about creating my own image out of this and running it on a container? I've tried running it with no success with a Dockerfile and I'm relatively new to Docker so apologies if this is simple. I just want to run it on a http server (using nginx perhaps?)

I've tried these for help, to no success:

• https://www.quora.com/Can-I-have-an-Angular-app-on-Docker-container
• AngularJS and NodeJS app in Docker
• Dockerize your Angular NodeJS application

Solution

First of all, follow this best practice guide to build your angular app structure. The index.html should be placed in the root folder. I am not sure if the following steps will work, if it's not there.

To use a nginx, you can follow this small tutorial: Dockerized Angular app with nginx

1.Create a Dockerfile in the root folder of your app (next to your index.html)

FROM nginx
COPY ./ /usr/share/nginx/html
EXPOSE 80

2.Run docker build -t my-angular-app . in the folder of your Dockerfile.

3.docker run -p 80:80 -d my-angular-app and then you can access your app http://localhost

Answered By - adebasi

Read More

Failed to load resource: net::ERR_NAME_NOT_RESOLVED error

Issue

I am writing an application. I write .net for the backend and Angular for the frontend. When dockering, I put my frontend application inside nginx. Dockerfile is like this

FROM node:20.10-alpine AS build
WORKDIR /app
COPY package*.json .
RUN npm install
RUN npx ngcc --properties es2023 browser module main --first-only --create-ivy-entry-points
COPY . .
RUN npm run build --prod

FROM nginx:stable
COPY --from=build /app/dist/librari-fy/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

nginx.conf is as follows:

worker_processes 1;


events {
    worker_connections 1024;
}


http {
    server {
        listen 80;
        server_name http://backend:80;

        root /usr/share/nginx/html/browser;
        index index.html index.htm;
        include /etc/nginx/mime.types;


        gzip on;
        gzip_http_version 1.1;
        gzip_disable      "MSIE [1-6]\.";
        gzip_min_length   256;
        gzip_vary         on;
        gzip_proxied      expired no-cache no-store private auth;
        gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_comp_level   9;

        location / {
            try_files $uri $uri/ /index.html;
            add_header Access-Control-Allow-Origin *;
            add_header 'Access-Control-Allow-Origin' 'http://localhost:4200' always;
        }
    }
}

Docker-compose file :

version: '3.8'

services:
  postgres:
    image: postgres:16-alpine
    container_name: postgredatabase
    restart: always
    environment:
      POSTGRES_PASSWORD: UArA0CGd5y1g5sE7U0OH
      POSTGRES_USER: libraryadmin
      POSTGRES_DB: Library
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - app_internal_network
    healthcheck:
      test: pg_isready
      interval: 10s
      timeout: 60s
      retries: 5
      start_period: 80s 
    
  backend:
    image: sahinyakici/librarybackend:latest
    restart: always
    container_name: backend
    depends_on:
      postgres:
        condition: service_healthy
    networks:
      - app_internal_network
    ports:
      - "8080:80"

  frontend:
    container_name: librarify
    image: sahinyakici/librarify:latest
    restart: always
    depends_on:
      - backend
    networks:
      - app_internal_network
    ports:
      - 80:80
    expose:
      - 80

volumes:
  postgres_data:

networks:
  app_internal_network:
    driver: bridge

The applications run successfully, but I get the following error in the console in the website: "Failed to load resource: net::ERR_NAME_NOT_RESOLVED". If I go into the UI container and try with curl, I can fetch data from the backend. What do you think is the problem?

Error screenshot Error2 Error3

I tried using Curl from within the container.

Solution

Frontend code is executed client side, meaning the browser processes the code and not the NGINX web server. When you request your Frontend container, the NGINX server returns the HTML, CSS and Javascript files of your website, which are interpreted by browser.

Therefore you're browser, and by extend your computer, will be the one making requesting the backend API. So the backend URL configured within the frontend should be http://localhost:8080 rather than http://backend

Your NGINX server should only be serving the Frontend files. Fix the server_name to localhost and fix the Backend URL within your Frontend code to http://localhost:8080

Answered By - ABWassim

Read More

The Angular application I serve with NGINX does not display images

Issue

I'm writing a full stack application. I wrote Angular for the front end and serve it with nginx docker. I can receive data by communicating with the backend. Imagepath is among this data. In this way, I can show the images locally, but I think it is due to Docker and Nginx that the image path is not displayed even if it is correct. I leave an image as an example, the image src part is correct. If I go to this path in the container, I can see the picture, but I cannot see the picture on the screen. Didn't show image

My nginx.conf file:

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    server {
        listen 80;
        server_name localhost;

        root /usr/share/nginx/html/browser;
        index index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_http_version 1.1;
        gzip_disable "MSIE [1-6]\.";
        gzip_min_length 256;
        gzip_vary on;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_comp_level 9;

        location / {
            try_files $uri $uri/ /index.html;
            add_header Access-Control-Allow-Origin *;
        }

        location /users_books_pictures/ {
            alias /usr/share/nginx/html/data/;
        }
    }
}

Dockerfile for frontend:

FROM node:20.10-alpine AS build
WORKDIR /app
COPY package*.json .
RUN npm install
RUN npx ngcc --properties es2023 browser module main --first-only --create-ivy-entry-points
COPY . .
RUN npm run build --prod

FROM nginx:stable
COPY --from=build /app/dist/librari-fy/ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

Docker-compose file:

version: '3.8'

services:
  postgres:
    image: postgres:16-alpine
    container_name: postgredatabase
    restart: always
    environment:
      POSTGRES_PASSWORD: password
      POSTGRES_USER: admin
      POSTGRES_DB: Library
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data
    networks:
      - app_internal_network
    healthcheck:
      test: pg_isready
      interval: 10s
      timeout: 60s
      retries: 5
      start_period: 80s 
    
  backend:
    image: sahinyakici/librarybackend:latest
    restart: always
    container_name: backend
    depends_on:
      postgres:
        condition: service_healthy
    networks:
      - app_internal_network
    ports:
      - "8080:80"
    volumes:
      - postgres_data:/app/users_books_pictures

  frontend:
    container_name: librarify
    image: sahinyakici/librarify:latest
    restart: always
    depends_on:
      - backend
    networks:
      - app_internal_network
    ports:
      - 80:80
    expose:
      - 80
    volumes:
      - postgres_data:/usr/share/nginx/html/data

volumes:
  postgres_data:

networks:
  app_internal_network:
    driver: bridge

I changed the Nginx configurations and searched for an answer in the forum but could not find it.

Incoming data

Solution

The root URL of your NGINX server is already set to /usr/share/nginx/html/browser, so you don't need to add this prefix to your imagePath data. NGINX will look in the root folder by default and try to get a ressource at the path specified by your URL, from the root folder.

Therefore you need to remove /usr/share/nginx/html/browser prefix of your imagePath datas and it should do the trick :)

Answered By - ABWassim

Read More

run npm ci hangs on docker build ubuntu

Issue

I'm trying to build a docker file for an ionic project, on ubuntu virtualbox. Here's the dockerfile:

# Build
FROM beevelop/ionic AS ionic
# Create the application directory
WORKDIR /usr/src/app
# Install the application dependencies
# We can use wildcard to ensure both package.json AND package-lock.json are considered
# where available (npm@5+)
COPY package*.json ./
RUN npm --verbose ci
# Bundle app source
COPY . .
RUN ionic build

## Run 
FROM nginx:alpine
#COPY www /usr/share/nginx/html
COPY --from=ionic /usr/src/app/www /usr/share/nginx/html

My problem is that the build gets stuck on step 4 (RUN npm --verbose ci) It starts downloading some packages, but then it hangs at some point. I tried different solution:

npm clean cache
npm config set registry http://registry.npmjs.org/

removing package-lock.json

But nothing works, any help will be greatly apprecited. Thanks in advance

Solution

To whoever experienced this problem, it was to due to internet connection. Keep trying until it downloads all the packages.

Answered By - Fahima Mokhtari

Read More

"Error: Cannot find module - ng" when trying to build Ionic/Angular app in Docker

Issue

Steps to reproduce the error:

versions:

Angular CLI: 15.2.7
Node: 16.18.0
Package Manager: pnpm 8.4.0
Ionic: 7.1.1
Docker version 23.0.5, build bc4487a

configure ionic to use pnpm:

ionic config set -g npmClient pnpm

create app:

ionic start myApp tabs --capacitor

add the following Dockerfile:

FROM node:latest as build
WORKDIR /usr/local/app
COPY ./ /usr/local/app/
SHELL ["/bin/bash", "-c"]
RUN npm install --global pnpm \
    && SHELL=bash pnpm setup \
    && source /root/.bashrc
ENV PNPM_HOME="/root/.local/share/pnpm"
ENV PATH="${PATH}:${PNPM_HOME}"
RUN pnpm install -g @angular/cli
RUN pnpm install -g @ionic/cli
RUN ionic config set -g npmClient pnpm
RUN pnpm install
RUN pnpm run build

FROM nginx:latest
COPY --from=build /usr/local/app/www usr/share/nginx/html
EXPOSE 80

run:

docker build --pull --rm -f "Dockerfile" -t myapp:latest "."

this is my error:

 > [build 9/9] RUN pnpm run build:
#0 0.807
#0 0.807 > MyApp@0.0.1 build /usr/local/app
#0 0.807 > ng build
#0 0.807
#0 0.828 node:internal/modules/cjs/loader:1085
#0 0.828   throw err;
#0 0.828   ^
#0 0.828
#0 0.828 Error: Cannot find module '/usr/local/app/node_modules/@angular/cli/bin/ng.js'
#0 0.828     at Module._resolveFilename (node:internal/modules/cjs/loader:1082:15)
#0 0.828     at Module._load (node:internal/modules/cjs/loader:928:27)
#0 0.828     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
#0 0.828     at node:internal/main/run_main_module:23:47 {
#0 0.828   code: 'MODULE_NOT_FOUND',
#0 0.828   requireStack: []
#0 0.828 }
#0 0.828
#0 0.828 Node.js v20.0.0
#0 0.833  ELIFECYCLE  Command failed with exit code 1.
------
Dockerfile:25
--------------------
  23 |     RUN pnpm install
  24 |     # Generate the build of the app
  25 | >>> RUN pnpm run build
  26 |
  27 |     # 2. Serve app
--------------------
ERROR: failed to solve: process "/bin/bash -c pnpm run build" did not complete successfully: exit code: 1

Funnily enough, the whole app built just fine yesterday. Might it be a docker/angular bug?

Solution

The issue seems to have been because of a buggy pnpm version. Downgrading to pnpm@latest-7 (instead of 8.4.0) fixed the problem

Answered By - Lorand

Read More

How can I run an npm command in a docker container?

Issue

I am trying to run an angular application in development mode inside a docker container, but when i run it with docker-compose build it works correctly but when i try to put up the container i obtain the below error:

ERROR: for sypgod  Cannot start service sypgod: OCI runtime create failed: container_linux.go:346: starting container process caused "exec: \"npm\": executable file not found in $PATH

The real problem is that it doesn't recognize the command npm serve, but why??

The setup would be below:

Docker container (Nginx Reverse proxy -> Angular running in port 4000)

I know that there are better ways of deploying this but at this moment I need this setup for some personals reasons

Dockerfile:

FROM node:10.9 


COPY package.json package-lock.json ./

RUN npm ci && mkdir /angular && mv ./node_modules ./angular

WORKDIR /angular

RUN npm install -g @angular/cli 

COPY . . 


FROM nginx:alpine
COPY toborFront.conf /etc/nginx/conf.d/
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]
CMD ["npm", "serve", "--port 4000"]

NginxServerSite

server{
    listen 80;
    server_name sypgod;


    location / {
            proxy_read_timeout 5m;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_pass http://localhost:4000/;


    }

}

Docker Compose file(the important part where I have the problem)

 sypgod: # The name of the service
        container_name: sypgod  # Container name
        build: 
            context: ../angular
            dockerfile: Dockerfile # Location of our Dockerfile

Solution

The image that's finally getting run is this:

FROM nginx:alpine
COPY toborFront.conf /etc/nginx/conf.d/
EXPOSE 8080
CMD ["npm", "serve", "--port 4000"]

The first stage doesn't have any effect (you could COPY --from=... files out of it), and if there are multiple CMDs, only the last one has an effect. Since you're running this in a plain nginx image, there's no npm command, leading to the error you see.

I'd recommend using Node on the host for a live development environment. When you've built and tested your application and are looking to deploy it, then use Docker if that's appropriate. In your Dockerfile, run ng build in the first stage to compile the application to static files, add a COPY --from=... in the second stage to get the built application into the Nginx image, and delete all the CMD lines (nginx has an appropriate default CMD). @VikramJakhar's answer has a more complete Dockerfile showing this.

It looks like you might be trying to run both Nginx and the Angular development server in Docker. If that's your goal, you need to run these in two separate containers. To do this:

• Split this Dockerfile into two. Put the CMD ["npm", "serve"] line at the end of the first (Angular-only) Dockerfile.
• Add a second block in the docker-compose.yml file to run the second container. The backend npm serve container doesn't need to publish ports:.
• Change the host name of the backend server in the Nginx config from localhost to the Docker Compose name of the other container.

Answered By - David Maze

Read More

Crashin Angular project docker container

Issue

I have docker container for angular project, using node 18; Dockerfile:

FROM node:18

WORKDIR /app

COPY package*.json ./
RUN npm update

RUN npm install

COPY . .

EXPOSE 4200

CMD ["ng", "serve", "--host", "0.0.0.0", "--port", "4200"]

problem is when I run sudo docker-copmose build, its good but then i try sudo docker-compose up it has an errors :

auralab-angular | Node packages may not be installed. Try installing with 'npm install'. auralab-angular | Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package. auralab-angular exited with code 1

I am using google-cloud unbutu machine, but i dont know error reason. docker-compose.yaml:

angular:
    image: auralab-angular:latest
    container_name: auralab-angular
    build:
      context: ./client
      dockerfile: Dockerfile
    volumes:
      - ./client:/app
    ports:
      - "4200:4200"
    command: ["ng", "serve", "--host", "0.0.0.0", "--port", "4200"]
    depends_on:
      - django

structure is :

project:
|___client:
|_______Dockerfile
|_______other files;
|___docker-compose.yaml

Solution

You'll need to install the Angular CLI inside your Docker container.

FROM node:18

WORKDIR /app

COPY package*.json ./

# Install Angular CLI globally
RUN npm install -g @angular/cli

RUN npm install

COPY . .

EXPOSE 4200

CMD ["ng", "serve", "--host", "0.0.0.0", "--port", "4200"]

Answered By - Ale_Bianco

Read More

Problem during building Docker container with Angular

Issue

My Dockerfile for frontend in Angular:

FROM node:18.10.0 as builder
WORKDIR /app/binder-web-frontend
# WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci
RUN npm install -g @angular/cli@15

COPY . .

EXPOSE 4200

ENV PORT 4200

CMD ["ng", "serve"]

docker-compose:

  angular-app:
    build:
      context: .
      dockerfile: binder-web-frontend/Dockerfile
    ports: 
      - '4200:4200'
    command: "ng serve --open --host 0.0.0.0 --port 4200 --disable-host-check"
    #
    # volumes: 
      # - ./:/app/binder-web-backend
      # - /binder-web-frontend/node_modules:/app/binder-web-frontend/node_modules
      # - /app/node_modules

As you can see in the screenshots, Docker itself is being built in the frontend folder ** /binder-web-frontend **. When I run **docker-compose ** it doesn't want to copy package.json. The file structure is as follows: Solution/web-frontend/package.json +node_modules are also located here.

This is my first experience with Docker and I'm a bit confused. Thanks in advance for your help/advice.

Solution

change docker-compose file to:

build:
    context: binder-web-frontend/.

it's becuase your docker-copose file and your Dockerfile are not in the same directory.

Answered By - Mojtaba Nejad Poor Esmaeili

Read More

Unable to Dockerize Vite React-Typescript Project

Issue

I am trying to dockerize a Vite React-Typescript boilerplate setup, but I unable to connect to the container.

Installed vite-react-typescript boilerplate:

npm init vite@latest vite-docker-demo -- --template react-ts

Dockerfile

# Declare the base image
FROM node:lts-alpine3.14
# Build step
# 1. copy package.json and package-lock.json to /app dir
RUN mkdir /app
COPY package*.json /app
# 2. Change working directory to newly created app dir
WORKDIR /app
# 3 . Install dependencies
RUN npm ci
# 4. Copy the source code to /app dir
COPY . .
# 5. Expose port 3000 on the container
EXPOSE 3000
# 6. Run the app
CMD ["npm", "run", "dev"]

Command to run docker container in detached mode and open local dev port 3000 on host: docker run -d -p 3000:3000 vite

The vite instance seems to be running just fine within the container (docker logs output):

> vite-docker@0.0.0 dev /app
> vite

Pre-bundling dependencies:
  react
  react-dom
(this will be run only when your dependencies or config have changed)

  vite v2.4.4 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 244ms.

However, when I navigate to http://localhost:3000/ within Chrome. I see an error indicating The connection was reset.

Any help resolving this issue would be greatly appreciated!

Solution

It turns out that I needed to configure host to something other than localhost.

Within vite.config.ts:

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
  },
  plugins: [reactRefresh()],
})

Resolves the issue.

Answered By - Cesar Napoleon Mejia Leiva

Read More

How to run Renovate inside a Ubuntu 20.04 Docker container?

Issue

I want to run Renovate inside a a Ubuntu 20.04 docker container, but renovate does not seem to work. Here are the step to repdocue my setting:

docker run -it ubuntu:20.04 /bin/bash
apt update
apt upgrade
printf 'y\n1\n\1n' | apt install nodejs
apt install -y npm
npm install -g renovate
renovate --version

renovate --version gives me:

/usr/local/lib/node_modules/renovate/dist/logger/index.js:13
let logContext = process.env.LOG_CONTEXT ?? (0, nanoid_1.nanoid)();
                                          ^

SyntaxError: Unexpected token ?
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/renovate/dist/renovate.js:5:18)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
root@3b484953056f:/# renovate --version
/usr/local/lib/node_modules/renovate/dist/logger/index.js:13
let logContext = process.env.LOG_CONTEXT ?? (0, nanoid_1.nanoid)();
                                          ^

SyntaxError: Unexpected token ?
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/renovate/dist/renovate.js:5:18)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)

Any ideas what I am doing wrong here? Do I need to setup RENOVATE_LOG_CONTEXT? If so, how can this be done?

Solution

Check the node and git versions. Must be updated or will get that error.

Answered By - eredar

Read More

Read substitution var from Google Cloud Build into Dockerfile

Issue

I have an angular app that I have deployed on Google Cloud with the following cloudbuild.yaml file:

steps:
  - name: "gcr.io/cloud-builders/docker"
    env:
      - "_ANGULAR_ENV=$_ANGULAR_ENV"
    args: ["build", "-t", "gcr.io/$PROJECT_ID/${_SERVICE_NAME}:${SHORT_SHA}", "--build-arg", "ENV=${_ANGULAR_ENV}", "-f", "Dockerfile", "."]

  - name: "gcr.io/cloud-builders/docker"
    args: ["push", "gcr.io/$PROJECT_ID/${_SERVICE_NAME}:${SHORT_SHA}"]

  - name: "gcr.io/cloud-builders/gcloud"
    args:
      [
        "run",
        "deploy", 
        "${_SERVICE_NAME}",
        "--image",
        "gcr.io/$PROJECT_ID/${_SERVICE_NAME}:${SHORT_SHA}",
        "--region",
        "europe-north1",
        "--platform",
        "managed",
        "--allow-unauthenticated"
      ]

I want to read the value of _ANGULAR_ENV which I provide in the cloud build trigger inside substitution variables section:

and pass this value to the Dockerfile as following:

#Arguments
ARG ENV

.
.
.
## Install dependencies
RUN npm install
## Build the angular app in production mode and store the artifacts in dist folder

RUN echo 'ENVIRONMENT:' $ENV
RUN ng build --configuration=$ENV --output-path=dist
.
.
. 

I am trying to specify if its a development deploy or production one via this variable but when I print the value as above its blank and doesnt get the value from google build. I am not sure as to what am I missing here.

Solution

So after spending days on this the issue turned out to be simpler. The place of ARG ENV turned out to be the wrong one. Instead of being at the top, it has to be just a line above its usage as you can see from the working solution:

.
.
.
## Install dependencies
RUN npm install
## Build the angular app in production mode and store the artifacts in dist folder
#Arguments
ARG ENV
RUN echo 'ENVIRONMENT:' $ENV
RUN ng build --configuration=$ENV --output-path=dist
.
.
. 

Answered By - Muhamed Krasniqi

Read More

How to have and read an environment file after an angular application has been built

Issue

I'm building an angular application. This angular application will be delivered to multiple clients with different needs and infrastructure. It will need several values (for example backend server, title, ...) that should be configurable by the customer when doing the installation of this.

In debug, I can totally imagine those values coming from the environnments/environments.ts file, but once built, the environment.prod.ts cannot be changed anymore and therefore might not be built.

How can I provide values(I guess either by some file or environment variables) to the angular application(and how can I read them)?

It has not been decided yet, but most probably the built files will be wrapped in an nginx docker image.

Solution

Considering you want to first build your app, and then select a specific environment to deploy it, this tutorial may be of use to you. In summary you just have to follow 4 steps:

1. Add a JSON configuration file in the src folder
2. Update our angular/webpack configuration to include the file in our dist folder
3. Add a simple configuration service with a call to get our config data from our config file
4. Use APP_INITIALIZER to invoke the method retrieving our config data during the bootstrap process

If you follow those 4 steps, your configuration will be a JSON inside your dist folder (or whatever other outputPath you have in your angular.json file).

As for the docker part, you could add the config file directly inside the nginx container. Although I am guessing you would prefer to create a docker volume. So you not have to worry about copying the right config file for each client and instead just keep their specific config file in their servers.

Answered By - David Alberici

Read More

Gitlab CI Angular Artifacts not accessible

Issue

I'm trying to build and deploy my angular project with gitlab pipelines. There are two jobs. One for building the angular app and one for the deployment. My gitlab-ci.yml looks like this.

image: node:latest

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
  - node_modules/

before_script:
  - npm install > /dev/null

stages:
  - build
  - deploy

build:
    stage: build
    artifacts: 
        paths:
            - dist/
        expire_in: 1 week
    script:
        - npm run build --prod

deploy:
  stage: deploy
  dependencies:
    - build
  environment: production
  image: mjsarfatti/gitlab-ci-pipeline-php-aws:latest
  before_script:
    - mkdir ~/.aws/
    - touch ~/.aws/credentials
    - printf "[eb-cli]\naws_access_key_id = %s\naws_secret_access_key = %s\n" "$AWS_ACCESS_KEY_ID" "$AWS_SECRET_ACCESS_KEY" >> ~/.aws/credentials
  script:
    - git checkout master
    - eb deploy my_project
  only:
    - master

The aws cli used in the deploy job builds the dockerfile located in my project root. My problem is that every time when I run the deploy job I get this error:

Step 3/7 : COPY dist/src /usr/share/nginx/html
44 COPY failed: stat /var/lib/docker/tmp/docker-builder648218383/dist/src: no such file or directory.

It seems like that the artifact from the previous build job is missing. What is wrong with my gitlab-ci.yaml file?

Solution

When artifacts are extracted into other pipeline steps, it's extracted in a different location that your code that's pulled down via git. For me, I've seen the artifact(s) put in the parent directory from where my code is. So for example if I have this directory structure:

--- gitlab_ci_root
   --- my_code

The extracted artifacts will be put under gitlab_ci_root, not my_code.

You can test this by putting a couple of ls's into your deploy step.

deploy:
  stage: deploy
  dependencies:
    - build
  environment: production
  image: mjsarfatti/gitlab-ci-pipeline-php-aws:latest
  before_script:
    - ls # directory list of current directory, likely your code
    - ls ../ # directory list of the parent directory.
    - mkdir ~/.aws/
    - touch ~/.aws/credentials
    - printf "[eb-cli]\naws_access_key_id = %s\naws_secret_access_key = %s\n" "$AWS_ACCESS_KEY_ID" "$AWS_SECRET_ACCESS_KEY" >> ~/.aws/credentials
  script:
    - git checkout master
    - eb deploy my_project
  only:
    - master

Once you find where the dist/ directory is being extracted, then in your script you can mv the dist to wherever you need it to be.

Answered By - Adam Marshall

Read More

configuring communication between docker apps

Issue

my app is composed of dotnet backend, and angular frontend. During creation I ran them both separately (dotnet run, ng serve) in separate terminals. they were both running on localhost.

Now in order to deploy them I have containerized each one of them as a docker image on docker hub. I can get each one of them to run separately with docker run - but I can't get them to communicate.

I don't completely understand how localhost works in conjunction with containers and virtual machines, and am not sure how I need to configure them in order to make them work together. I have read up a lot, but haven't been able to find anything that touches exactly on this. any help would be amazing.

thanks!

I'm not sure which files deal with this so I am adding all the things that seem relevant:

the dockerfile for the angular:

FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod

FROM nginx:alpine
COPY --from=node /app/dist/web-pet-shop /usr/share/nginx/html

angular- environment.ts:

export const environment = {
  production: false,
  apiUrl: 'https://localhost:5001/api/'
};

environment.prod.ts:

export const environment = {
  production: true,
  apiUrl: 'api/'
};

proxy.conf.json:

{
    "/api": {
      "target": "https://localhost:5001",
      "secure": false
    }
  }

from the backend-

the dockerfile:

FROM mcr.microsoft.com/dotnet/aspnet:5.0 AS runtime
WORKDIR /app
COPY published/ ./
ENTRYPOINT ["dotnet", "API.dll"]

from startup->configure

            app.UseCors(policy => policy
            .AllowAnyHeader()
            .AllowAnyMethod()
            .WithOrigins("https://localhost:4200"));

launchsettings.json:

{
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:29610",
      "sslPort": 44320
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "launchUrl": "swagger",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "API": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "launchUrl": "swagger",
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

Solution

You need to see the 2 containers as 2 different machines (computers/laptops). So when one of them says localhost then it is that host alone. It doesn't know about the other one.

For these 2 containers to see each other they need to be on the same network and then they can call each other by name.

# create a network
docker network create my_network

# start frontend container
docker run \
  -d --name frontend \
  --network my_network \
  -p <your_exposed_port> \
  <frontend_image>

# start backend container
docker run \
  -d --name backend \
  --network my_network \
  <backend_image>

With this setup, the frontend can talk to the backend on http://backend:<port>.

You can also use docker-compose then to make things easier.

Answered By - Mihai

Read More

Mixed Content error after migrating from Angular 7 to 12

Issue

The stack: Angular 12 with .NET, running in a Docker container. Bundles are being built by @angular-devkit/build-angular:browser.

Last working setup: The application ran previously on Angular 7, all the assets were indeed served over HTTPS.

The problem: While running over HTTPS, Angular 12 bundle is serving assets incl. main.js, polyfills, stylesheet or favicon over HTTP. This is causing the following error for bundles, polyfills, styles.css and favicons:

Mixed Content: The page was loaded over HTTPS, but requested an insecure X. This request has been blocked; the content must be served over HTTPS.

My #1 suspect is the ng build process, although I'm not aware of a way to determine the way, the assets are served(?) Therefore I mentioned the rest of the stack to check there if needed.

UPDATE: I marked one answer but it's a workaround that I decided to go with as good enough, although there should be a more in-depth solution that I'm still hoping to find.

Solution

If you are upgrading Angular 7 to Angular 12 directly then you will get below error:

"Updating multiple major versions at once is not recommended."

Assuming that you have Angular 7 installed on the project, now you need to first upgrading your application to Angular 8, then Angular 8 to Angular 9, then Angular 9 to Angular 10, then Angular 10 to Angular 11:

ng update @angular/core@6 @angular/cli@6 --force
ng update @angular/core@7 @angular/cli@7 --force
ng update @angular/core@8 @angular/cli@8 --force
ng update @angular/core@9 @angular/cli@9 --force
ng update @angular/core@10 @angular/cli@10 --force
ng update @angular/core@11 @angular/cli@11 --force

Now, you have upgraded your Angular 7 application to Angular 11, so you will run the below command to upgrade to latest Angular 12 version:

ng update @angular/core@12 @angular/cli@12 --force

--force to the ng update command has been appended incase if it gives "Incompatible peer dependencies found" error.

EDIT

Add the following meta tag to your <head> element in your HTML:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

Answered By - Salahuddin Ahmed

Read More