# MY SETUP
I am deploying a webpage using Angular v17 for the frontend and Django v4 for the backend. The application is divided into separate Docker containers:
- example-client-1:4200 for the frontend
- example-api-1:8000 for the backend
Nginx Proxy Manager is configured to handle requests for example.com, directing them to http | example-client-1 | 4200, and requests for api.example.com to http | example-api-1 | 8000.
# MY PROBLEM
While the Django backend functions correctly, the Angular frontend encounters issues. When I pause the backend in Nginx, the frontend operates as expected, excluding API requests, which fail due to the inactive backend. However, when both frontend and backend are running, the frontend results in a 504 Gateway Timeout error. Notably, there are no relevant entries in the Nginx logs or the frontend container logs.
To address this, I attempted initially to deploy both components under the main domain (example.com and example.com/api), but this yielded the same problematic outcome. Subsequently, I decided to segregate the API into a subdomain (api.example.com). This approach initially worked when I tested it with subdomains (dev.example.com and api.dev.example.com). However, upon deploying it to the main domain (example.com), the same error resurfaced.
The domains are hosted on a Plesk server, which utilizes an A DNS record to point to my Linux machine where Portainer is located.
# YESTERDAY IT WORKED
I successfully tested the setup yesterday using two subdomains:
- dev.example.com for the frontend
- api.dev.example.com for the API
This configuration worked seamlessly. However, as this is a client project, I must deploy it to the main domain (example.com). Unfortunately, attempting to use the subdomain approach (api.example.com) resulted in the same error encountered when using paths on the main domain (example.com and example.com/api).
# WHAT I HAVE TRIED (not an exhaustive list)
- Implemented custom Nginx configurations to address the issue.
- Increasing the timeout duration did not resolve the problem, as the page would load instantly, but no content would be displayed.
- Curling the webpage returned a '301 Permanently Redirect' message.
# JUST FOUND OUT NOW (26.01 - 17:10H)
I found out that actually my page is loading when I enter example.com/menu, which is basically a route on my angular application, but why is the main page itself not loading anything? example.com
I keep this up dated.
Please note that this is a condensed summary, and there may be additional details not covered here. If you have specific questions or require more information, feel free to ask.
So my issue was a routing mistake I did in my Angular Application that resulted in a circle of redirecting non stop.