Azure Application Gateway - single parent domain for multiple web applications - azure

I am trying to setup one parent domain (app.mydomain.com) for front for 2 web apps in the backend.
mail.mydomain.com and module.mydomain.com. I have implement path based routing. I need to routing to work so
app.mydomain.com/* points module1.mydomain.com
app.mydomain.com/module2/* points module2.mydomain.com/
Routing seems to work, however when browsing module2, it css and js are not loaded and the site doesnt work. accessing module2 directly works normally.

Have you routing rules to change your URL?
Since you are using App Gateway, the URL that your backend is seeing is (app.mydomain.com) instead of module2.mydomain.com.
So, maybe when you’re using the AppGateway, your backend is looking for a CSS into the wrong path…

Related

Azure Application Gateway CSS/JS header issue

Update
I have found, that the configuration is "correct", in that the application gateway properly routes to the correct backend when using the "/payment" path. On the app in question however, the path is still "/payment" which obviously does not work. I know I can circumvent this by using Override Backend Path to "/", but then, as said, the app does not load any CSS / JS files because it looks on the root of the host (I think)
I have a setup going with Azure Application Gateway for a project I am working on currently.
Setup
The basic setup goes like this:
Public IP --> Appliction Gateway --> Private Endpoints --> WebApps.
I have enabled multi-site hosting, have given an Azure domain (.cloudapp.azure.com) and have enabled path based routing.
So for example mydomain.germanywestcentral.cloudapp.azure.com/payment will route to a certain backend.
Issue
The issue is, while the HTML is loading just fine, all the CSS/JS is not looking at
"mydomain.germanywestcentral.cloudapp.azure.com/payment/site/style.css"
but at
"mydomain.germanywestcentral.cloudapp.azure.com/site/style.css"
I already googled for hours how to solve this issue but to no avail. I realize Azuer is one of the lesser used clouds as of now, but hopefully someone here can, at least in concept, explain what is happening and what needs to be done. Any pointers are helpful here :)
Disclaimer
I am rather new to the whole networking topic and Azure, so I am not sure how to solve this issue. How do I tell the app to not look at the root, but at the /payment. If I go to "mydomain.germanywestcentral.cloudapp.azure.com/site/style.css" it loads the file just fine.
Note
One thing: In order for any of this to work, I had to set "Override Backend Path" to "/", which is probably what is causing the issue.
However, if I turn this off, it does not load anything, and instead fails loading the site altogether.
Images of the settings
HTTP Setting for Payment Backend
Listener Configuration
Rule Configuration

Routing subdomains to certain applications in Azure Application Gateway?

I've been trying out Application Gateway, and have managed to get to the point where hosting 2 applications in different pools, albeit with same port is possible using the "host" header to choose where i intended to be directed.
However, what i actually intended to do was route subdomains to certain applications.
For example, my application gateway is "app-gw.example.com", and i have 2 Azure Functions sat behind that, for simplicity, func1.example.com and func2.example.com. (They actually have distinct domains themselves, not subdomains).
I would like to route "func1.app-gw.example.com"'s traffic to func1.example.com, and "func2.app-gw.example.com" to "func2.example.com".
However, i can't seem to figure this out. Can someone explain how this can be done?
I've had also some success hosting on different ports and using the listener + routes to direct to each individual site, but they should rather be on the same port, which rules this out.
I've also tried messing with URL Rewrites, but wasn't able to get something useful from that either.
EDIT: I think maybe i'm missing something here. Perhaps i need something that points the domain names to the application gateway, and then route on that? For example:
Site 1, reachable at func1.example.com may have an entry called "func1-gw.example.com", which actually just points to the application gateway, however, the application gateway now knows that it's really supposed to be going to "func1"?
Sounds like a DNS record pointing to the gateway may work, but then i wonder how to do the routing, hmm.
Thanks.
As you are already aware of Application Gateway multiple site hosting, you can enhance the Application Gateway to route the traffic based on the URLs.
Below references might help you configure the URL based routing.
URL Path Based Routing
Application Gateway redirection
Configure URL redirection on an application gateway

Use existing ExpressJS app as Firebase app

I have existing app that runs on Heroku. It's a simple web app with no background jobs or database.
Basically it has three endpoints. One of them serves the HTML, the other is POST endpoint for communicating with backend and third is GET endpoint that renders error HTML content as well.
Now the frontend is not single page application and the goal is not to be one. It's just HTML page with a form and some links. The front end can be used without Javascript.
My questions are:
Can I re-use existing ExpressJS code? I was thinking about importing route callbacks and use them inside the "functions".
I know there is Firebase hosting that can serve static content. However, as I mentioned the server can respond with HTML content so I'd need traditional routing (such as /error url for rendering HTML error). In my ExpressJS app I use .ejs templating so I'd like to load the template and render it.
Can Firebase be set up so the "backend" (functions) can be placed on my own domain? I'd like to call relative URLs from my index file (like that POST endpoint) instead of using Google Firebase URL.
I'm really just trying to find out if my use case can fit the Firebase infrastructure. I think it's a good candidate since I need the web app to respond infrequently and it's not really demanding, not many people would use it. This is also my hobby project so I'm trying to minimize costs.
To answer your questions:
Yes you can, but keep in mind some things are limited. In my case, I had tried to use multer library for multipart forms but didn't work and had to resort to using busboy instead. To use an Express app for a function endpoint, you simply just pass your app as the onRequest function parameter like so: functions.https.onRequest(app).
Docs:
https://firebase.google.com/docs/functions/http-events#using_existing_express_apps
The hosting is for static files only. You can't use that with .ejs. Unless, you're thinking to use that as a proxy to your Express app..
Yes, you can set custom domains so you can use your domain(s) instead of default ones. Reference: https://firebase.google.com/docs/hosting/custom-domain
From your project's Hosting page, enter the wizard for connecting a custom domain:
If you have only one Hosting site, click Connect domain.
If you have more than one Hosting site, click View for the desired site, then click Connect domain.
Enter the custom domain name that you'd like to connect to your Hosting site.
(Optional) Check the box to redirect all requests on the custom domain
to a second specified domain (such that yourdomain.com and
www.yourdomain.com redirect to the same content).
Click Continue to initiate the validation process.

Creating custom domain names for api

I have a web server using cpanel and I would like to use a custom domain on one folder for an api. So if I created a folder called api in the public_html folder then the path to that folder would be www.example.co.uk/api/(some php file). How could I change it so the folder would become a custom domain of api.example.co.uk/api/(some php file).
I have looked at a few options but don't really know the best way. I have tried to add a htaccsess file to the api folder and then create a rewrite rule to rewrite the www to api.
I also then looked at creating sub domains with the path to the api folder.
I have read that creating a A record on the server could work but I'm not quite sure how to do this. I know it can be done as most apis use some custom domain like facebooks graph api. (i.e https://graph.facebook.com/youtube/)
This will depend on if you have access to make DNS records for your root domain, example.co.uk. For example right now www. is a CNAME or A record (depends on how your web server is set up), that resolves to the address of your web server. If you made an identical record but named it api. (api. IN A ip-of-webserver), then api.example.co.uk would do the same thing that www.example.co.uk does. This is kind of pointless if they go to the same web server though, the /api/ part of the route makes it clear enough that the routes are for the api. What subdomains like facebook's are doing are pointing to a completely different application, and different web servers. For example, a company may have domains like mail.company.com, portal.company.com, sso.company.com, that all resolve to the address of different web servers for the different apps they have, but in this case it sounds like you are running one web server which is fine, you can have one web server be the api as well as serve the website.

REST-API calls from Angular ngResource-Service not forwarded by Reverse-Proxy

I'm trying to configure two Node-based Angular.js applications behind a reverse proxy (tried mod-proxy for Apache and also Nginx). Let me explain:
Application A runs on localhost:3000
Application B runs on localhost:3001
Application A should be visible from outside on http://myServer/appA
Application B should be visible from outside on http://myServer/appB
The problem is, that regular resources (index.html, images, js-files) are loaded, but calls to the REST-API using the Angular ngResource-Service don't work.
Some investigations using Fiddler pointed out, that for loading the regular resources, the proper URL is used (e.g. http://myServer/appA/image.png) but for the REST-calls the URL is missing the /appA path (e.g. http://myServer/data is called instead of http://myServer/appA/data).
Dos anybody know, how I can fix this? Is it possible to make a configuration on the Angular ngResurce-Service. Or is it a server-side issue which must be fixed by doing the appropriate settings for proxy-html or mod-proxy.
Your help is very appreciated.
We resolved the problem: it was our own error in using the Angular resource service. We included a leading / in the paths for the REST-calls, e.g. /machines. With this leading / all URLs are interpreted absolut, e.g. http://myServer/machines is called instead of http://myServer/appA/machines .

Resources