AWS S3 Angular app calling ECS task by Route 53 address-CodePudding

I am trying to deploy Angular client and Spring Boot server applications to AWS. I successfully started server app as ECS task, using service discovery in order to prevent changing server ip address inside Angular app code on each task restart. So I set Router 53 DNS, reffering to mentioned task, instead of public IP of task as server app URL in Angular app but that approach doesn't work. When I put actual public IP of task as server URL, it all works fine. Angular app is deployed to AWS S3.

Example of problem:

find() {
    return this.http.get<>(http://127.0.0.1:8080   '/all);
}

Example of solution:

find() {
    return this.http.get<>(http://test-service.test:8080   '/all);
}

where test-service.test is a Route 53 record.

Is this approach even possible? If not, can you suggest me other solution?

I hope the question is clear enough. If you need more details, please tell me.

Thanks!

CodePudding user response：

Yes, this approach is possible, but in order to work you have to have a Public Hosted Zone in Route 53, which consequently means that you have buy a public domain.

I'm assuming that you have created a Private Hosted Zone. Private Hosted Zones can be used for DNS resolution inside a VPC, but not through the public internet.

CodePudding user response：

I think you have two separate things you need to solve.

how do you expose the app server? The way you are doing it won't work because that FQDN is private. So you either put the app server behind an ALB (which provides a static public FQDN) or you buy a domain an create a public zone to expose your task (this may work but tasks are ephemeral and you'd need to continue to chase them to register/de-register in the domain).
how do you point to the app server end-point (ALB or R53 domain or whatever you picked to expose it?). You either bake the endpoint into your Angular environment (but then the endpoint will be statically linked into the JS compiled code) or you use a facility that Angular provides to parametrize the endpoint. You can create a file called env.js along with your index.html file that contains the endpoint of your app server. This means that, when serving the JS off of S3 you can configure the env.js file to include your app server endpoint and your browser will point dynamically to it (without having to recompile your Angular app. Full how-to story is here.