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?
Related
I've my react app deployed at subpath "/dashboard". I achieved this by using "homepage":"/dashboard" in package.json. And then created a docker image for the same.
Now when I try to run it on my system using that docker image, it shows me this error http://localhost:3030/dashboard/favicon.ico
Port 3030 is where my docker container currently running at.
I tried using nginx reverse proxy. But it doesn't seems to be working
My nginx.conf file for reverse proxy
server {
listen 80;
listen [::]:80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location /dashboard/ {
proxy_pass http://127.0.0.1:3030/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
My docker-compose file
version: '3.6'
services:
explorer:
image: my-image
ports:
- 3030:80
web:
image: nginx
ports:
- 80:80
volumes:
- ../nginx.conf:/etc/nginx/conf.d/default.conf
Here's the error it gives when I try to access it
enter image description here
Config Error
Change
proxy_pass http://127.0.0.1/3030;
to
proxy_pass http://127.0.0.1:3030/;
I am working on large project.
frontend: react + typescript
backend: spring boot java
Recently the codebase starts growing larger in frontend (due to large number of forms).
project
|--> app1
`--> app2
I decided to separate the apps into own different projects.
And Create two different static builds for frontend.
I think I can use nginx to do routing for app1 and app2 in single domain (I think its called reverse proxy).
But I have no idea where to begin.
So far I could do proxy_pass but it doesn't do import the static assets (like js and css)
I want to know how can I serve two static builds on same domain using domain.com/app1 for app1 build and domain.com/app2 for app2.
Any help will be appreciated.
I tried this nginx config:
server {
listen 80;
server_name app1.localhost;
location / {
proxy_pass http://localhost:8080; # serving app1
}
}
server {
listen 80;
server_name app2.localhost;
location / {
proxy_pass http://localhost:4200; # serving app2
}
}
What I wanted to try:
server {
listen 80;
server_name localhost;
location /app1/ {
proxy_pass http://localhost:8080; # serving app1
}
}
server {
listen 80;
server_name localhost;
location /app2/ {
proxy_pass http://localhost:4200; # serving app2
}
}
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've been trying to set up a React frontend and a Flask backend using Nginx as a reverse proxy to differentiate the two. I have the flask backend running a Gunicorn server on localhost:5000, but I can't seem to get the Nginx location block to register it. My config file looks like this:
server {
listen 80;
root /var/www/[react-app-domain-name]/html;
index index.html index.htm;
access_log /var/log/nginx/reverse-access.log;
error_log /var/log/nginx/reverse-error.log;
location / {
try_files $uri $uri/ = 404;
}
location /api {
include proxy_params;
proxy_pass http://localhost:5000;
}
}
My understanding is that this should route all traffic through my react app at root, except for requests that have "/api", which should then be routed through my backend Flask api. However, when I try to access a /api route, all I get back is a 404 response. This also happens if I true to access it through curl on the command line.
Here's the 404 error log that I have:
2020/09/09 21:03:05 [crit] 36926#36926: *114 connect() to unix:/home/[name]/backend/backend.sock failed (2: No such file or directory) while connecting to upstream, client: 127.0.0.1, server: , request: "GET /api/ HTTP/1.0", upstream: "http://unix:/home/[name]/backend/backend.sock:/api/", host: "[hostname]"
Any help would be very much appreciated. I'm tearing my hair out here. Thanks.