I'm trying to add a react app that will be displaying at mydomain.com/react-app. I'm pretty new to nginx and this is my first go at hosting a site on a Linux server. The site mydomain.com has existed on this server for some time and I built another part of the site using react and would like to host it at /react-app. This is my /etc/nginx/sites-available/react-app:
server {
listen 80;
server_name 0.0.0.0;
location /react-app {
alias /var/www/react-app/build/;
index index.html;
try_files $uri $uri/ /build/index.html;
}
}
I'm able to serve and visit the site at the IP location 0.0.0.0/react-app but not mydomain.com/react-app. I just get a 404 nginx error when I visit that address.
If your server app running for example on port 3500:
server {
listen 80;
listen [::]:80;
server_name mydomain.com/ www.mydomain.com/;
location / {
proxy_pass http://localhost:3500;
}
}
Related
I have simple configuration of nginx for React application:
limit_req_zone $binary_remote_addr zone=mylimit:10m rate=10r/s;
server_tokens off;
server {
listen 80;
location / {
limit_req zone=mylimit burst=10;
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html =404;
}
}
Let's say that our backend load balancer address is 10.0.0.0:443. We can check it's health with going to /health endpoint. How nginx configuration should look like to have logic: if backend health returns 200 - use React app, if not - open simple error.html page. Thank you
I have load balancer with really simple config for domain.com:
server {
listen 80;
server_name domain.com;
location / {
proxy_pass http://dev-admin;
}
}
upstream dev-admin {
server ip1:8001;
server ip2:8001;
server ip3:8001;
}
IMPORTANT:
Ip1, Ip2 and Ip3 are docker containers that are made by making docker swarm service.
Now when you open ip1:8001 or any other ip2 or ip3 you got website and all is good. Website is from react build.
On each node ip1, ip2 and ip3 i have nginx with this config:
server {
listen 80;
listen [::]:80;
root /usr/share/nginx/html;
index index.html index.htm index.nginx-debian.html;
server_name localhost;
location / {
try_files $uri /index.html;
}
}
So when you try website on domain.com instead serving css or js files it is serving index.html response. So domain.com/static/some.js -> this shows in the response index.html content.
I have no idea what else to debug.
Help. Please.
It turned, out I was missing $uri/ on nodes config.
So it is:
location / {
try_files $uri $uri/ /index.html;
}
I have a react build that I am serving on an nginx server on a vps with contabo and a domain name hosted on godaddy.
I altered the A record in godaddy to point to my vps ip I switched the name servers from godaddys to my vps it loads the app like it should but the domain name is replaced with th ip address of the server. Please tell me how to fix this
the sites-enabled for nginx is
server {
listen 443 ssl;
listen [::]:443 ssl;
include snippets/self-signed.conf;
include snippets/ssl-params.conf;
server_name blockface.fun;
root /var/www/blockface.fun/html;
index index.html;
access_log /var/log/nginx/blockface.fun.access.log;
error_log /var/log/nginx/blockface.fun.error.log;
location / {
#...
try_files $uri $uri/ /index.html$is_args$args;
#...
}
}
server {
listen 80;
listen [::]:80;
server_name example.com www.example.com;
return 302 https://$server_name$request_uri;
}
When I run sudo ufw app list
Available applications:
Nginx Full
Nginx HTTP
Nginx HTTPS
OpenSSH
go to DNS Zone Management in contabo:
there will be 3 naming servers listed, make sure to add all against your godaddy domain(supposedly you already did that).
then make sure your domain's FQDN is blockface.fun(in the section below you should see it listed if you have added the domain-add it if you haven't), if thats what you want.
another recommendation(though not asked):
replace
example.com www.example.com;
with
blockface.fun www.blockface.fun
in your sites-enabled file
I am using a React app as frontend and a Laravel app for backend. These two are connected with each other through Laravel Sanctum APIs. The whole environment is deployed on the server using Docker, frontend & backend being separate containers, but connected with network: someNetwork
The API call is done from the frontend using the URL HTTP://myserverip:8000 - this is working, but I would like to close the 8000 port (externally) and just keep open the 3000 port where the frontend is working. Now when I'm closing the 8000 port (with firewall), and trying to make API request from frontend I get a network error.
The question is, how to make the API request internally so I can keep only 3000 open, do I need some kind of redirection inside the .conf file of the nginx? This is my .conf file:
server {
listen 80;
index index.php index.html;
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
root /var/www/public;
location ~ \.php$ {
try_files $uri =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass app:9000;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
location / {
try_files $uri $uri/ /index.php?$query_string;
gzip_static on;
}
}
Thanks, any hint would be appreciated.
What you are trying to do will never work.
ReactJS (I guess thats what you mean by ReactApp) should be "build" before used in production. The result will be a build folder with a bunch of static files.
These files can be deployed / serverd using NGINX. The API-Calls from ReactJS (your Frontend App) will always come from outside of your network as the client / customer will not be part of your Docker NAT network (I guess).
I would use NGINX as a Webserver for your ReactApp (ReactJS Build) as well as a reverse Proxy / Proxy for your Laravel Backend.
Something like:
server {
listen 443 ssl;
server_name example.com
.....
root /path/to/your/reactapp/static/files;
location / {
try_files $uri /index.html;
}
}
server {
listen 443 ssl;
server_name api.example.com;
...all the laravel PHP config here
}
if you can not or want not create a subdomain for your API use a location
server {
listen 443 ssl;
server_name example.com
.....
root /path/to/your/reactapp/static/files;
location / {
try_files $uri /index.html;
}
location /api/ {
Do your Laravel config here (use nested locations for handling the php files)
Or do a `proxy_pass` and configure an internal server (listen `8000`) and do not expose it.
}
}
I am trying to deploy a react app onto nginx. Here is my server object in the nginx.confg.
Keep getting 403, any help
server {
listen 8080;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /Users/pinky/Documents/workspace/nebula_fe;
index index.html index.htm;
}
Using proxy pass command resolved this issue..