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
}
}
Related
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;
}
}
So as the title says I am deploying a react app with the express backend on an ec2 instance.
What I am attempting to do to do:
(just listing this here to provide crucial context just in case I'm messing up elsewhere)
have my express production mode run on port 80 with the react build html as root.
run the build on an ec2 instance
use nginx to reverse proxy to my domain on https and port 443
run server.js on production mode via PM2
Things I am currently having trouble with:
My Nginx configuration was originally configured to try to proxy the react app running with the express app through a reverse proxy between the two. That's changed so I am trying to now have the server configured to reverse proxy everything into my app.
I was following this article as my reference but the major difference is they want me to use the nginx conf file and not the sites_enabled file which I had made my initial nginx setup. From what i can see in the article it looks like the configuration files changed layout as well so that may be outdated practice.
Here is what I currently have for Nginx sites_enabled:
listen 443 default_server;
listen [::]:443 default_server;
server_name example.com www.example.com;
root /home/ubuntu/client/build;
location / {
try_files $uri /index.html;
}
location /complete {
proxy_pass https://www.example.com;
}
# managed by Certbot
ssl on;
ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
# managed by Certbot
}
server {
if ($host = www.example.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
if ($host = example.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 0.0.0.0:80;
server_name example.com www.example.com;
rewrite ^ https://$host$request_uri? permanent;
}
At the time of writing this I am not able to run things like this so I can only use express setting it to port 443 and placing the certification files there.
I'm trying to set up a microservices architecture for a personal blog.
The idea is to have an NGINX container serving up a static gatsby site, and to redirect to other services. For example, I'd like to have a react app at /todos, and an api for that todo app at /todos_api.
My current folder structure is like this:
docker-compose.yml
gatsby_blog
(contains a build folder)
nginx
default.conf (this is my main nginx entry)
portfolio
todos
todo_client
nginx
default.conf (this is just for serving the react app)
todo_api
My docker-compose file looks like this:
version: "3"
services:
gatsby:
restart: always
build:
dockerfile: Dockerfile
context: ./gatsby_blog
ports:
- "80:80"
todoclient:
build:
dockerfile: Dockerfile
context: ./portfolio/todos/todo_client
My main Gatsby nginx file looks like this:
upstream todoclient {
server todoclient:3000;
}
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location /todos {
rewrite /todos/(.*) /$1 break;
proxy_pass http://todoclient;
}
}
and my React nginx config is like this:
server {
listen 3000;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
}
The issue I'm pretty certain is with my nginx configs. When I go to localhost I'm met with the gatsby app, but if I go to /todos I get an nginx error. I can see that the request is passed on to the todoclient container correctly, but the error returned is:
open() "/usr/share/nginx/html/todos" failed (2: No such file or directory
If anyone can see where I'm going wrong with the nginx configs I'd really appreciate it. I can post my Dockerfiles too if needed.
Thanks
EDIT
I've managed to get the proxy working now, but the issue is that the todos app cant find its static files. They're in the correct place in the container, and the container works in isolation, so the issue is to do with docker-compose and the nginx proxying.
Done it for angular. The nginx file should replace the file in /etc/nginx/nginx.conf. And place the todos folder - assuming that has the static pages - in /usr/share/nginx/html. You can try one service at a time
http {
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
location /todos {
alias /usr/share/nginx/html/todos/;
absolute_redirect off;
rewrite ^(.+)/todos/+$ $1 permanent;
rewrite ^(.+)/todos/index.html$ $1 permanent;
try_files $uri$args $uri$args/ $uri/ /todos/index.html;
}
}
}
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?