Creating an API proxy for an Azure Static Web App - reactjs

I have a static website (React SPA) hosted as an Azure Static Web Application, I also have a flask backend that is hosted online, is there a way for me to add the URL of the backend so that all requests will go there? (Similar to adding a proxy to package.json in React)


According to your problem description, my understanding is that your backend program has been hosted online.
Now you want to allow Azure Static Web App to access this service. Suppose this service has an interface /MyTestController/TestConnection. You want the webapp program to pass, similar to http(s)://yourdomain.com/MyTestController/TestConnection or 167.2**.255.*2:8080/ MyTestController/TestConnection to access this interface, right?
Please use the following methods to troubleshoot and test.
Step 1.
Check the public network address on your backend server, because you are not sure where you are deployed, whether it is a LAN host or a third-party network service provider. You can check whether the host address where your service is located is on the public network or on the internal network.
If you are deploying on your own PC or LAN host, and get the intranet address, then this service cannot be accessed.
If you are deploying on a third-party cloud server or web service, you can open the specified port or service by setting relevant settings in the third-party server.
The specific details need to tell me how you deploy your backend program to better help you.
Step 2.
The simplest way to deal with it is to create a python webapp program in the Azure service and deploy your back-end service.
Of course, it is recommended that you troubleshoot the problem first. At present, your backend service public network should not be accessible, so you want to use proxy to handle it. Specific problems are analyzed in detail.
If you have not deployed the service to a third party, just deploy it on your own PC and other LAN hosts. As a test, you can use tools such as oray to try.

Related

Is there a way to limit only allow incoming requests from other App Engine services?

I have four services running within the same app on App Engine. I have a frontend SvelteKit application, and three backend services. If possible, I'd like to set up security in such a way that the backend services will only accept HTTP requests from the frontend application (which sends all API requests via its Node server).
Is there a way of doing this without spending a load of money on a Serverless VPC Access connector?
Ideally I want to keep these all within the same GCP project as well. So far the only solution I can come up with is to ship the services with a secret that they check against when receiving a request, but there must be a better way to do it.

Take a look at Identity Aware Proxy
Pay attention to the part of the above documentation that says
In order to make a resource publicly-accessible (while sibling resources are restricted), grant the IAP-secured Web App User role to allUsers or allAuthenticatedUsers.
Per your use case, your front-end application will be available to the public while your 3 backend services will only be available to the front-end application
Since your backend services are now secured (via IAP), you have to programmatically invoke them in your front end. See documentation on how to do that.

Get IP address of the server that is hosting a client-side js application

There is a back-end server using asp.net core web-api, and the Nginx as reverse-proxy, all hosted on docker on the ubuntu server.
Also, a client-side web application (reactjs) which makes REST API calls to the back-end using JS 'Fetch' (or Axios, etc...)
The client-side app is not centralized and it could be hosted on any number of servers.
(Let's say hosted on 5 servers.
So now we have 1 back-end server, and 5 servers hosting that reactjs app.)
objective
Every time one of the client apps makes an HTTP request to the back-end, I want to get the IP address of the server that's hosting that specific reactjs app.
But what I'm getting is the end-user IP address, not the server that's hosting the react app
Is it possible to do that? without asking the users to put their server's IP into their REST requests manually?
I've tried some Nginx configurations with no luck.
Thanks in advance.

Is Single Page Application needs a Application Server?

I'm new to SPA development, so this may be a stupid question. please understand.
My question is "Is SPA(Single Page Application) needs a Application Server?"
As I understand it, the SPA gets the response after calling REST API. It use that response to re-render.
If so, is the server that handles REST API "Application Server"?
So many posts say Application Server are tomcat, oracle, etc... and they are also say Application Server handle the request to access the database. Then what is "Application Server" in SPA? or there are no Application Server in SPA?
(Are there any architectures or systems I'm not aware of?)
If I'm misunderstanding the architecture, please let me know.
I want to understand web server and Application Server in SPA. So I have read many posts but I'm still confused.
Thanks.

A SPA needs one server to serve the SPA bundle to the users browser.
If the SPA interacts with an API or APIs, the API(s) could be hosted on the same server that served the SPA bundle, or they could be hosted on other servers.

A Single Page App requires a server to serve the .css, index.html, and .js files it requires. It is not a requirement that that an SPA must communicate with an application server via any means at all.
Your content can be static or self generated by the app itself. Should you require communication with a backend server, you can consume that via some sort of api over
protocols such as http, https, websockets or Server Side Events.
To summarize. An SPA can be completely self contained OR access an api to provide functionality. A standalone app requires a server only to serve the component files (.css, .js, .html) of the app itself.

With SPA as well you will have html file and images, js, css files that will be loaded when you launch your single html webpage. So you need to host this static content on some server. So it can be separate web server or same APIs
server(Application Server) which can host these static content and serve request for those files. It can be also hosted on cloud static server and distributed via CDN

Short answer:
Yes. SPA apps do need to live somewhere (as you need to host the assets (js, css, initial html, other)
Long Answer:
You need to setup somewhere to host the entry files as per the short answer. In the past I've used anything from:
NodeJS code base services running on a Docker container (app & assets being served via express), to
dotnetcore on a similar stack (With kestrel server serving the assets running on docker on ec2).
Docker container running Apache webserver hosting the statically compiled assets
More recently I've dabbled with compiling the SPA app to a bunch of static assets (such as the ability NextJS / Gatsby provides with their tooling, but there are tons of others or alternatives in other SPA worlds)... but even then you'll need to host those assets somewhere.
S3 on Amazon has the ability to host SPA apps directly via a bucket setting & providing an entry point
Vercel (...or any other SaaS alternatives, Vercel is just where I host my personal stuff and has been easy to get going)
Again it's all up to you, but yes, you still need to make the JavaScript available somehow, you just need to pick your mechanic. SaaS with a baked in WebServer such as Vercel, a CDN like S3 that AWS provides, or go totally custom and spin up your own WebServer as application entry.

How can I give my Flask App in GCP access to an external Network?

I have a Flask app that is hosted in the Google App Engine. It wants to establish a TCP connection to a server on my local network to send data to the app. Unfortunately, my app can't connect to the server just like that because the IP address of the server is not public.
Unfortunately, I can't find a solution here. Can anyone give me a hint what I need to be able to connect to my network?
On the one hand it would be easier to make the IP address publicly available, but I really want to avoid that.
I would be glad about any help.

You need to create a VPN between your Google Cloud VPC and your private server. Then add a serverless VPC connector to App Engine to route private traffic through it.

Use Google App Engine as a reverse proxy to my local server

Background
Before dotCloud decides to shut down its free sandbox service, I used it as sort of a reverse proxy to reroute all requests to a particular domain, to a local server of mine in which I'm hosting a Mono based application (.NET 3.5 web app running on a Cent-OS Linux). Essentially, the domain forwarded the requests to my dotCloud app and the app, through SSH, to my local server.
Question
I wonder if similar setup is possible with Google App Engine. Any help is appreciated.
More Information
I got the idea from here. My dotCloud app is nothing but a Nginx configuration file that forwards all http(s) requests to a SSH port that was bound to a local port (which I configured for my web server to use).
As for my motive, well, I bought a host service with PHP stack and later on decided not to use PHP. So in order to avoid another purchase I used dotCloud.

Resources