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..
Related
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 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'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;
}
}
I'm using react and nginx to deploy my website. Problem is that I deploy everything under url myurl.com/path but when server tries to get js files, it tries to get from root which is myurl.com and I see error.
GET https://myurl.com/static/js/main.c6e1854c.chunk.js net::ERR_ABORTED 404 (Not Found)
If I go to https://myurl.com/path/static/js/main.c6e1854c.chunk.js - I can access that file.
I can't find where I should add the path for server to know correct path.
Any ideas?
My nginx
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
location / {
try_files $uri /index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
I suspect problem is not nginx as I can see parts of the web loaded (some other scripts). However what's in main js - that's no loaded, because it's missing subdirectory path.
Solved issue. All I needed was:
Add PUBLIC_URL=https://myurl.com/path to .env file;
Modify all of the asset paths by adding prefix path/.
Thanks everyone for help and right guidance!
I have a dockerized React app frontend that is served through NGINX:
FROM nginx:alpine
COPY default.conf /etc/nginx/conf.d
COPY ./build /usr/share/nginx/html/
.build is my React web app. default.conf contains this:
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location /api/ {
proxy_pass http://api:8080;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
My webapp makes requests against another linked container named api, so all /api calls are proxy passed to the api container.
So far, so good.
Problem comes when I try to open a websocket. Websocket server is listening also in api container, but in port 8081.
In my code, I have this:
const socket = openSocket('http://api:8081'); //openSocket is from socket.io library
But, in my Chrome console, I'm getting ERR_NAME_NOT_RESOVED.
How can I configure NGINX in order to proxy pass this request to api container?