CODEWITHSUNDEEP
angulardockernginxdevopsdocker-container
Daniel Díaz Astudillo
Daniel Díaz Astudillo

Reputation: 1642

Connect Angular (nginx) with backend on Docker RUN

In fact, everything it's already connected. I need to make it dynamic (maybe this is not the concept). I'm working on a system that consists of two separate and independent containers: NET Core Backend & Angular Frontend (nginx).

The Angular app create connection URLs using environment variables, that means that de baseURL variable contains the URL for the server-backend connection. For local purposes this is http://localhost:5000. Everything works great: CORS is accepting calls, JWTs are issued correctly and the WebAPI it's returning values.

This product it's meant to work on a single VM server for every client. Every client will have it's own server IP to access the app. The baseURL for the frontend Angular app is hardcoded in environment.prod, but using this approach I'd have to change the baseURL in environment.prod for every implementation (client) and this, i think, it's not the right approach.

I've tried to make this work using a host alias and passing that alias with --link flag in Docker run, but didn't work. Something like:

environment.prod.ts (Angular)

export const environment = {
  production: true,
  baseUrl: 'http://backendalias:5000'
};

Running with the command:

docker run --rm -d -p 5500:80 --link=backend_container:backendalias frontendimage

But this can't reach the backend and no connection is established.

I need to make this implementation more dynamic so I don't have to change the codebase for every client.

Is this approach right? Do i need to change Docker network configuration via --network flag? What do you suggest for this kind of products/systems?

I want to control this (ideally) with Docker running commands.

Upvotes: 0

Views: 1689

Answers (1)

Dupinder Singh
Dupinder Singh

Reputation: 7769

I tried to create one generic example to solve your problem

https://github.com/dupinder/NgnixDockerizedDevEnv

Follow this GitHub repo, have a look at the readme.md I tried to describe each and every step which will help you to communicate Angular UI app with backend service. and I added one more addition feature "The remote debugging".

Have a look, if any about, please ask

Upvotes: 2

Related Questions