I am working on Angular 1 based web application.
I've deployed a web app with nginx , but couldn't deploy production server in my local env.
So, I want call API from the production server. For example,
I am using RestAngular to call API.
Restangular.all('api/user/profile').post(mUser)
This calls
localhost:8080/api/user/profile
because I've deployed a web app in localhost:8080.
I want to redirect requests which starts with "/API" to the production server, by config nginx properly.
So, in this case, it should call API server
http://devprod2api/api/user/profile
Other requests that don't start with "API" should go to:
http://localhost:8080/...
Is it something possible by config nginx properly? If possible, how can I do that?
I am not sure what you have tried, but this just needs a simple proxy_pass as far as I see. Add below to your nginx config and it should point all API to the other server. It assumes that a host entry is present for devprod2api
location /api/ {
proxy_pass http://devprod2api/api/;
}
Related
I've deployed an server-side rendering React app (bundled without CRA):
it has an express server for server-side rendering (listens to port 3000 or process.env.PORT)
it has an express server for the API that serves the frontend (listens to port 8080 or process.env.PORT)
On localhost, the frontend makes a request to http://localhost:8080/api to get the data, which works perfectly.
From my understanding, when the app is in production, the base API URL should be the app's URL (eg. https://myapp.herokuapp.com) instead of http://localhost:8080, so I added this change in my code:
if the app is in dev, the frontend calls http://localhost:8080/api
if the app is in prod, the frontend calls https://myapp.herokuapp.com/api(I added https://myapp.herokuapp.com/as a config var in Heroku)
However, it doesn't work. My app is deployed successfully to Heroku and the SSR renders correctly, but the API call fails. (I also tried https://myapp.herokuapp.com/api:3000 which fails)
What should be the API URL to call a local server when the app is in production?
thanks a lot!
Well, as far as I know Heroku doesn't allow multiple ports and you will not be able to open 3000 for web and 8080 for api.
You can serve both on the same port and route /api to the api.
I have worked on a project that uses similar approach and below is the code:
app.use('/api', router); // every api route is in the router
app.use(express.static(staticDir));
It is also deployed to heroku.
full repo if you wish to take a look - https://github.com/berkeli/breteau-dashboard/blob/main/server/utils/createServer.js
server{
listen 80 ;
listen [::]:80;
server_name test.demo.io;
root /home/ubuntu/SuperApp/build;
location / {
try_files $uri /index.html;
}
}
this is my nginx config file for frontend that is developed in react js.
I have also developed backed in express js.
Now how shall I deploy my express js backend code.?
Shall I keep these two projects separate and run the backend on port 3000 ? In that case, will I have to do additional things to connect my front end with this express js through apis? As both app are not running on same port?
Or shall I keep my front end in the express js static files and run the whole app from port 3000? but in that case how would I attach my current domain to the website as currently I haven't attach any port no like 3000 used.
Please help. I am new to this.
Front-end and back-end are two separate projects
you build the front-end adding api url as env var during the build process. you just deploy the static build result on Nginx server.
you run the api separately e.g on http://localhost:3000 using a command like npm start or node server.js depends on your back-end code
Current state: Depending on the npm start script, my web app is accessible by at the http:// address, or the https:// address, but not both.
Goal: I'd like the app to run on https://, and for any http:// requests to be redirected to https://.
App info: The web app is created with Sails for the server, and create-react-app for the UI. To run locally, I use two terminals to start each up (server on :1337, UI on :3000). To run in prod, I build the UI and copy the build into the server folder, then start the server on :84 (:80 already taken).
What I've tried:
I've tried adding redirection on the Sails server by adding middleware and policies.
I've tried adding redirection on the UI by adding a script in the HTML header, checking for window.location.protocol in index.js, adding to the http-proxy-middleware, and using react-https-redirect.
In all cases, I'm able to access the app if I go to the https:// address, but get err_empty_response from the http:// one. None of my http:// requests seem to even reach the app or server.
I've heard that using NGINX as a load-balancer may solve this, but I'm hoping for a solution that doesn't require as much set up. Any suggestions?
I have a React app deployed to production as a bundle.js and index.html pair, served up by IIS under a url like:
https://my-app.com
This talks to a .Net WebAPI backend, served up by IIS as a virtual application at
https://my-app.com/api
This allows the React app to make requests to the relative url /api/XXX and successfully hit the API.
My problem is when developing with these 2 projects running locally.
The API is run in Visual Studio 2015 in debug mode and IIS Express makes it available at http://localhost:56585/api/ (easily configurable).
While developing the React app I use JS development tools such as yarn, which provides a webserver hosting the app at http://localhost:3000.
The different webservers and different ports precludes the use of a relative url to contact the API when running locally. This means I have to hardcode the url my api hits, and change it before I build based on the target environment. Eg:
//const base_url = '/api/'; // production
const base_url = 'http://localhost:56585/api/'; // development
Is there any way to configure some kind of rewrite rule such that requests my client makes to /api/XXX get remapped to http://localhost:56585/XXX, without rewriting requests to the root url (eg http://localhost:3000/index.html)?
I have a yeoman web-application with AngularJS which works great! Now I want to do some Ajax request to the backend.
The yeoman application runs on localhost:9000 (I run it with grunt serve which gives me fast live reloads)
The backend spring application runs on localhost:8080 (I run this with mvn spring-boot:run)
What is the workflow for testing the frontend with the backend?
I can always copy the frontends build code to the backends public folder but its time consuming. Or I could do some cross domain Ajax attempts but not sure this is the right way to go either.
What is the fastest and easiest way to integrate the frontend with the backends API for testing?
it could be done with CORS managment like here:
Spring Cors doc
or
use grunt proxy, in your gruntfile.js add this after connect: markup (suppose backend runing on localhost:9292)
// The actual grunt server settings
connect: {
server: {
proxies: [
{
context: '/',
host: 'localhost:9292',
changeOrigin: true
}
]
},
...
see here http://fettblog.eu/blog/2013/09/20/using-grunt-connect-proxy/
I solved the Ajax cross-domain issue with proxy_pass.
Just set a virtualhost for your frontend, and add a proxy_pass to your backend.
In case you are using Nginx (Apache also support proxy_pass):
http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_pass
In your virtualhost file it should be something like this:
location /api/ {
proxy_pass http://localhost:9000;
}