I've been all over this so finally asking.
I basically have a flask API and a react front end running on my dev machine.
They are running via docker-compose on the same virtual network.
The flask api runs perfectly when I postman to it via the 5000 port and the react front end works perfectly in the browser on port 3000.
I edited the react package.json file and added "proxy": "http://localhost:5000",
Then when running the route I want from react over on localhost:3000/movies it tries to proxy on over to localhost:5000/movies but I get this error:
Proxy error: Could not proxy request /movies from localhost:3000 to http://localhost:5000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED)
I've tried changing that line to various things including my docker image name. So proxy": "http://image-name:5000", and I've also tried the internal docker network name like proxy": "http://127.0.0.1:5000", and they all give the same kind of error.
Does anyone have any suggestions as to what I can try beyond that? Any advice would be greatly appreciated. Thank you.
Here it is for anyone in the future.
The container name needed to be used. So I updated my docker-compose.yml to have:
services:
flask-api:
container_name: flask-api
In my API (flask app) my config.py was like so:
SERVER_NAME = 'localhost:5000'
I changed it to:
SERVER_NAME = 'flask-api:5000'
The react package.json was updated to:
"proxy": "http://flask-api:5000",
Then on reload docker-compose build --up it worked.
The proxy from react forwards to the flask api. So in my case localhost:3000/movies proxies to locahost:5000/movies to get my api data.
I trust that helps someone in the future.
Related
Trying to setup a staging environment on Amazon LINUX EC2 instance and migrate from Heroku.
My repository has two folders:
Web
API
Our frontend and backend are running on the same port in deployment
In dev, these are run on separate ports and all requests from WEB and proxied to API
(for ex. WEB runs on PORT 3000 and API runs on PORT 3001. Have a proxy set up in the package.json file in WEB/)
Currently the application deployment works like this:
Build Web/ for distribution
Copy build/ to API folder
Deploy to Heroku with web npm start
In prod, we only deploy API folder with the WEB build/
Current nginx.conf looks like this
Commented out all other attempts
Also using PM2 to run the thread like so
$ sudo pm2 bin/www
Current thread running like so:
pm2 log
This is running on PORT 3000 on the EC2 instance
Going to the public IPv4 DNS for instance brings me to the login, which it's getting from the /build folder but none of the login methods (or any API calls) are working.
502 response example
I have tried a lot of different configurations. Set up the proxy_pass to port 3000 since thats where the Node process is running.
The only response codes I get are 405 Not Allowed and 502 Bad Gateway
Please let me know if there is any other information I can provide to find the solution.
It looks like you don't have an upstream block in your configuration. Looks like you're trying to use proxy-pass to send to a named server and port instead of a defined upstream. There's is an example on this page that shows how you define the upstream and then send traffic to it. https://nginx.org/en/docs/http/ngx_http_upstream_module.html
server backend1.example.com weight=5;
server backend2.example.com:8080;
server unix:/tmp/backend3;
server backup1.example.com:8080 backup;
server backup2.example.com:8080 backup;
}
server {
location / {
proxy_pass http://backend;
}
}````
Turns out there was an issue with express-sessions being stored in Postgres.
This led me to retest the connection strings and I found out that I kept receiving the following error:
connect ECONNREFUSED 127.0.0.1:5432
I did have a .env file holding the env variables and they were not being read by pm2.
So I added this line to app.js:
const path = require("path");
require('dotenv').config({ path: path.join(__dirname, '.env') });
then restarted the app with pm2 with the following command:
$ pm2 restart /bin/www --update-env
I am currently developing a simple portfolio app and my app structure is like this.
Nextjs/client,
Nodejs/server,
Mongodb/db
Nextjs is hosted locally on port 3001, Nodejs app on 5000. Whenever nextjs needs to fetch any api it calls nodejs application. All the things are configured inside docker. I am very new to deploying nextjs application and have recently used caddy server which has automatic https.
I am able to deploy the nextjs application statically using commands
next build
next export
The statically exported file called index.html inside out directory of nextjs application is pointed to caddy server on port 80 and 443. Statically exported app doesn't support api routes which I recently came to know. I tried next build and next start command to generate a dynamic production build inside .next directory. The main problem is How do I point my dynamically generated nextjs application in caddy configuration inside docker container. My present caddy configuration looks like
www.example.com:443 {
tls xyz#email.com
root * /srv
route {
reverse_proxy /api* api-server:5000
try_files {path} {path}/ /index.html
file_server
}
}
I am looking for hints especially related to proxy server.
Thank you in advance
I'm assuming the api url in your frontend looks like this http://localhost:5000 (based on your youtube comment here) which won't work if you're accessing your dockerized app from a remote computer (in this case your computer, since I'm assuming your app is hosted). Try changing it to https://www.example.com:5000 and rebuild your image.
I'm working on a react application and for testing some services I wrote a node server in my notebook. It seems that from the app and from the browser I cannot point to https://localhost:3000 due to ERR_SSL_PROTOCOL_ERROR.
I just tried doing some actions like reset all SSL certificates, trying different browser but the only result I found it's that I can reach my server from the browser but not via react.
Can someone help me?
Try http://localhost:3000
Just validated with one of my projects to make sure
The dev server doesn't support https
The localhost:3000 should be hit by: "http://localhost:3000"
If that is not working then the port number can be changed.
In REACT, the port number can be changed with:
"start": "set PORT=3006 && react-scripts start"
How are you running the app? Maybe with
set HTTPS=false&&npm start
I'm trying to understand what needs to be done to put my react app online.
Until now, I launched it on my mac using npm start, and accessing localhost:3000 or http://127.0.0.1:3000.
So I currently have bought a small server, installed everything (last version of node and npm, git and other necessary things), cloned my repo, and installed all dependencies.
When I do npm start on the server, it says it's available on port 3000. But when I go in my server's ip with the following :3000, it times out.
I don't really understand what need to be done to do this, I found some things about configuring apache on the server, others about using pm2 so have a node script running even after leaving the terminal, but that would be my next step I guess.. And other about configuring things with express (but do I need node+ express here ? As it's a simple front end react page ?).
if you are using webpack devserver, use it for development only
The tools in this guide are only meant for development, please avoid using them in production!
back to your question, there is a difference between binding to 127.0.0.1 or binding to 0.0.0.0
try changing the devserver to listen to 0.0.0.0
webpack.config.js
module.exports = {
//...
devServer: {
host: '0.0.0.0'
}
};
Usage via the CLI
webpack-dev-server --host 0.0.0.0
also note, that you will need to allow ingress rules (incoming connections). that is, allow a request from the internet to reach your server
There are a lot of configurations you will have to do when you deploy your application on a server. Building the app, Nginx, pm2 and even ssl certification. This video is 20min and has all you need. https://www.youtube.com/watch?v=oykl1Ih9pMg&t=1s
I have a React frontend that uses jwt to authenticate with the laravel backend. The backend works and is connecting just fine using laravel views, but when I try to proxy a request from React, it gives me a Connection Refused error.
Proxy error: Could not proxy request /api/register from localhost:3000
to http://localhost:8000/ (ECONNREFUSED).
Connecting to http://localhost:8000/api/register works normally. And sending a POST request with Axios also works normally and returns the token json. But when I proxy it with node, it doesn't work.
in my package.json code is
"proxy": "http://localhost:8000",
Please anyone help me. how to fixed it?
I think you should add "/" after the port number in package.json file
"proxy": "http://localhost:8000/"
Please check these points and solve your problem:
Please check your ip of backend server.(https://127.0.0.1:3000 or http://127.0.0.1:3000)
Please check your backend server is running or stop if stopped then start ypur server.
Please check protocol http or https used in your backend server.(https or http)
I hope with the help of these points you can solved your problem which is facing by you.
You need to run both of the local host (3000 and 8000) in different terminal. For example, run the backend server in os(windows's) command prompt cmd and frontend server in vscode terminal.