hosting a react web app and a docker laravel app with nginx - laravel

Question

I have 2 apps I'm trying to host on one machine (Ubuntu 22). The first app is a client side react app that makes api calls to my backend which is a docker compose laravel/nginx/sql. I went into sudo vim /etc/nginx/sites-available/MY.DOMAIN.COM and added the following:
server {
listen 80;
root /var/www/html;
index index.php index.html index.htm; #index.nginx-debian.html;
server_name MY.IP.ADDRESS.HERE;
location / {
try_files $uri $uri/ =404;
}
}
server {
listen 81;
listen [::]:81;
root /var/www/html/public;
index index.php index.html index.htm index.nginx-debian.html;
server_name MY_DOMAIN_NAME.COM www.MY_DOMAIN_NAME.com;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
}
location ~ /\.ht {
deny all;
}
}
On port 80 is where my react app lives. When someone visits MY.DOMAIN.COM I'm able to serve it without any issues. I'm not sure why putting server_name MY.IP.ADDRESS.HERE; works there vs the domain name like I did for port 81 server_name MY_DOMAIN_NAME.COM www.MY_DOMAIN_NAME.com;. Anyway on port 81 is where my laravel app should live. It's using a docker-compose.yml with this configuration:
version: "3.7"
services:
app:
build:
args:
user: admin
uid: 1000
context: ./
dockerfile: Dockerfile
image: my-laravel
container_name: my-laravel-app
restart: unless-stopped
working_dir: /var/www/
# command: bash -c "php artisan migrate:fresh --seed"
# depends_on:
# - db
# links:
# - db
volumes:
- ./:/var/www
networks:
- my-laravel
db:
image: mysql:8.0.30
container_name: my-laravel-db
restart: unless-stopped
environment:
MYSQL_DATABASE: ${DB_DATABASE}
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
MYSQL_PASSWORD: ${DB_PASSWORD}
MYSQL_USER: ${DB_USERNAME}
SERVICE_TAGS: dev
SERVICE_NAME: mysql
volumes:
- ./docker-compose/mysql:/docker-entrypoint-initdb.d
networks:
- my-laravel
nginx:
image: nginx:alpine
container_name: my-laravel-nginx
restart: unless-stopped
ports:
- '8081:81'
volumes:
- ./:/var/www
- ./docker-compose/nginx:/etc/nginx/conf.d/
networks:
- my-laravel
networks:
my-laravel:
driver: bridge
The react app is trying to make api calls to const domain = "http://MY.IP.ADDRESS.HERE:8081"; and fails with the message net::ERR_CONNECTION_REFUSED This is where I'm not sure what I did wrong.
I have nginx installed, but I'm also using it in the docker image. Is there any conflict there? Do I even need to configure my installed nginx instance to serve the docker image?
Anyway, the funny thing is I had this all setup and working last week, but I decided to add an ssl cert with cert bot which messed everything up and now I'm starting from scratch. The problem is I don't remember how I got it working to being with lol.
Any help here would be greatly appreciated, thank you in advance.