I've got a locally perfectly working react app on port 3000.
Finally bought a droplet, installed and configured nginx + ssl.
Everything 'normal' is working just fine.
When i'm deploying my react app, npm server starts, looks normal but...
mydomain.net, mydomain.net:3000 etc. is just not working (i see only my html file, no react rendering).
What i'm missing?
Maybe to configure NGINX as a reverse proxy?
https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/
eg adding in NGINX configuration file:
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
Related
I was trying to host react as a frontend and rails as backend.
I host rails at http://localhost:3000.
You can see that it is working.
But when I call http://localhost:3000 from react, instead of going to server's localhost, it go to user's localhost.
How can I fix this? I am using Nginx as web server.
I just solved by doing reverse proxy in Nginx.
location / {
try_files $uri /index.html;
}
location /api {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
first location / will find static frontend files and /api will go to localhost:3000.
For example, in my case
this.url='https://yourdomain.com/api/' to access the backend.
Also don't forget all of your backend route to start with 'api/'.
I am trying to proxy_pass in Nginx to my React dev server at localhost:3000. It currently works but I am seeing an error in my console which I am unsure will cause any issues down the road:
WebSocketClient.js:16 WebSocket connection to 'ws://localhost/ws' failed:
Nginx.conf:
upstream backend {
server backend:8000;
}
upstream frontend {
server frontend:3000;
}
server {
listen 80;
location / {
proxy_pass http://frontend$request_uri;
proxy_set_header Host $http_host;
}
location /api/ {
proxy_pass http://backend;
proxy_set_header Host $http_host;
}
location /admin/ {
proxy_pass http://backend;
proxy_set_header Host $http_host;
}
}
I have tried adding WDS_SOCKET_PORT=0 to the frontend .env file also tried adding:
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
...as suggested in other SO posts. Neither worked.
What is this error? How can I fix it?
I solved this by adding more in the variables
environment:
- WDS_SOCKET_PORT=443
Maybe it can help you, but if you haven't proxy between, use WDS_SOCKET_PORT=0 in docker-compose.yml
Try this:
environment:
- WDS_SOCKET_PORT=443
It works for me
I'm having two React applications running on the same machine. I'm using an nginx reverse proxy to handle routing requests.
The first application is running on root: '/', here is the nginx rule for it:
location / {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-Proto https; # for ssl
}
The other app is running on port 4000, using the following reverse proxy:
location /staging/ {
proxy_pass http://127.0.0.1:4000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-Proto https; # for ssl
}
I followed the [documentation][1] for deployment and I added the following to my package.js:
"homepage": "https:/xyz.com/staging/"
The application works using npm start. However using:
npm run build && serve -s build -l 4000
fails to load.
The request to index.html is fine however, every time the app tries to request the static content, it always responds with the index.html contents:
[![enter image description here][2]][2]
I tried setting PUBLIC_URL as well, but also failed.
Why is react failing to respond with any thing in the static directory?
Any help appreciated.
[1]: https://create-react-app.dev/docs/deployment/
[2]: https://i.stack.imgur.com/ijqx9.png
I want to run the following projects using NGINX under a single subdomain: http://localhost:3000 (Loopback API) and http://localhost:3006 (React Application)
Both applications are running under PM2. React App is running in production (using its generated build) with the command: 'pm2 serve build 3006'.
/etc/nginx/sites-available/default
server {
listen 80;
server_name subdomain.domain.com;
location / {
proxy_pass http://localhost:3006;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
try_files $uri /index.html;
}
location /api {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
Loopback project under location /api es working perfectly. The issue is with my React project under my / route. When I enter to subdomain.domain.com I just get a blank page. In the developer console I'm getting the following errors:
Using http://localhost:3006 to access my React App works perfectly fine with no console issues so I'm totally sure it is something related with nginx.
I have been investigating a lot about the incorrect MIME type being loaded, but my /etc/nginx/nginx.conf is already running with the following configuration:
http {
include /etc/nginx/mime.types;
}
I would really appreciate your help, thanks.
Are you using Create React App? By default, its build script assumes the app is going to be served in the root directory. To correctly serve React under a subdirectory, you need to specify homepage in your package.json file.
"homepage" : "http://example.com/your-subdirectory"
Additionally, you'll want to modify server/app.js to reflect this change.
app.use('/your-subdirectory/api', require('./api'));
Lastly, and most importantly, you'll want to set a basename for React Router as well.
const Routes = () => {
return (
<Router basename={'/your-subdirectory'}>
<div>
<Route exact path={`/`}component={App} />
</div>
</Router>
)
};
There is no need to use pm2 since they are static files and nginx is able to serve it by itself.
You just have to let nginx know where the files are.
server {
listen 80;
root /home/user/app/buld <--- LOCATION_OF_YOUR_BUILD
index index.html
server_name subdomain.domain.com;
location / {
try_files $uri /index.html
}
location /api {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
I have two web apps bootstrapped from https://github.com/Swiip/generator-gulp-angular.
I want to deploy one app at http://myvps.com/app1 and other at http://myvps.com/app2.
Here is the nginx configuration that I am using for this purpose
location /app1 {
proxy_pass http://myvps.com:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
rewrite ^/app1/(.*)$ /$1 break;
}
location /app2 {
proxy_pass http://myvps.com:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
rewrite ^/app2/(.*)$ /$1 break;
}
I don't want to serve static content from nginx, everything should be served from nodejs server.
I have also added
<base href="/app1/">
and
<base href="/app2/">
but nothing seems to work, all the static resources give 404.
Sorry to answer my own question, I found the answer after spending a day to get it work, and since no one has answered this yet I thought I'd post my solution.
I had to serve from dist not from src, so for this purpose I had to do gulp serve:dist.
I did not had to change anything else like nginx configuration, or anything else. Hope it helps anyone else.