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
Related
I have 2 running docker containers. N1 with react app, N2 with nginx for reverse proxy.
Docker command
docker run -d --name app3 -p 3000:3000 testApp
started react container, and now it is accessible on 192.168.1.103:3000
(host is linux server on local network)
react app is test app and it opens fine on port 3000.
Now I want to open it using
192.168.1.103/app3
For that in Nginx container I prepared config
location /app3/ {
proxy_pass http://192.168.1.103:3000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
Then I've restarted nginx and now when I open 192.168.1.103/app3 I see white page and if I inspect it I see in body You need to enable JavaScript to run this app.
But my browser is OK because second ago I opened the same app on port 3000 and it opened perfectly.
How can I fix this problem ?
Maybe you can docker-compose in same docker network or when you running both of your app you can running in same docker network.
Than after that in your nginx config you can make this:
location /app3/ {
rewrite /app3/(.*) /$1 break;
proxy_pass http://app3:3000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
And don't forget to expose port 80 and 443 when you running nginx container.
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;
}
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 been working on JSON API written in Elixir using the phoenix framework, and I successfully deployed yesterday. However, the API is not that useful with out a web frontend, which I wrote one as well using React.js.
I'm deploying the phoenix API using a combination of distillery and gatling, and everything appears to be working when I test it using Postman.
Then I edited the nginx configuration file to loook like the following,
/etc/nginx/sites-available/kegcopr_api
server {
listen 80;
server_name kegcopr.chrisrjones.com;
root /opt/Code/react/kegcopr-frontend/build;
index index.html index.htm;
access_log /home/deploy/deployments/kegcopr_api/nginx.access.log;
error_log /home/deploy/deployments/kegcopr_api/nginx.error.log;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://localhost:33725;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
I then created a .env file in the root of React.js project with the following line,
REACT_APP_API_URL=http://localhost:33725/api
Any help on how to get this configured would greatly be appreciated.
UPDATE
I changed the .env file to,
REACT_APP_API_URL=http://kegcopr.chrisrjones.com/api
and ran the below command,
npm run build
but I am still not seeing the React.js frontend display in the browser.
You have set the root directory, but you're sending all requests unconditionally to localhost:33725. If you want to serve static files from the root directory and pass all other requests to the proxy_pass, you can use try_files like this:
location / {
try_files $uri #proxy;
}
location #proxy {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://localhost:33725;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
try_files will try to locate the file within root with the same name as the URL, and if it fails to find a file, it'll pass the request to #proxy, which will pass it to the Phoenix app running on localhost:33725.
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.