Hello I newbies deploy app use docker and buy a domain, host. I have some issue when deploy my web app.
I using ngrok to test my API on local computer and React fronted in docker.

The problem:
In React I use ‘http-proxy-middleware’ to proxy to my API
all is fine when React app run on my local, but **deploy **to server the URL looks not rewrite.

I can use host IP show Web but can’t use axios to API, If use domain(godady) is always return me godady default page.
I already setup hostname to my hostname and host ip on godady config
I not sure my nginx.conf is correct but looks fine…? If I can use IP to get my web.
Or my setupProxy.js error ? but run on local machine looks fine…?
I don’t know where setup error. I already search some article but have no idea yet.
may ‘http-proxy-middleware’ just support development ? If yes what way is best to change proxy.

ERROR as:

xhr.js:187 
        
        
GET http://host.id/testapi/data/url?params 404 (Not Found)
(匿名) @ xhr.js:187
e.exports @ xhr.js:13
e.exports @ dispatchRequest.js:51
c.request @ Axios.js:108
r.forEach.c.<computed> @ Axios.js:129
(匿名) @ bind.js:9
componentDidMount @ index.jsx:59
wl @ react-dom.production.min.js:260
bl @ react-dom.production.min.js:259
yl @ react-dom.production.min.js:258
(匿名) @ react-dom.production.min.js:282
_u @ react-dom.production.min.js:280
au @ react-dom.production.min.js:269
k @ scheduler.production.min.js:13
P @ scheduler.production.min.js:14
index.jsx:67  Error: Request failed with status code 404
    at e.exports (createError.js:16:15)
    at e.exports (settle.js:17:12)
    at XMLHttpRequest.y (xhr.js:54:7)

I’ve setup ‘setupProxy.js’ as:

const { createProxyMiddleware } = require('http-proxy-middleware');
// const cors = require('cors');
// app.use(cors())
module.exports = function(app) {
  app.use(
    createProxyMiddleware('/testapi', {
      target: 'https://some_id.ngrok-free.app', // API endpoint 1
      changeOrigin: true,
      pathRewrite: {
        "^/testapi":"",
      },
      agent:false,
      //secure:"constants.SSL_OP_NO_TLSv1_2",
      headers: {
        Connection: "keep-alive",
        "ngrok-skip-browser-warning":true,
      }
    })
  );
};

My axios action all like this

const url = "/testapi/data/url
axios.get(url, {
  params:{

 }
}).then(
   response=>{
     do..
   }
)
}

And DockerfIle as:

FROM node:22-alpine as build

WORKDIR /app

COPY . /app/

#BUILD CONTAINER
RUN npm install
RUN npm install react-scripts -g

RUN npm run build

#nginx

FROM nginx:latest
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d

#start nginx
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf as

server {
    listen 80;
    server_name domain.com domain.com;
    root /var/www/domain.com;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_page 500 502 503 504 /50x.html;

    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

docker-compose as

version: '3.9'

services:
  bdoteams_web:
    image: registry.gitlab.com/user/app:latest
    ports:
      - 80:80
    restart: always
    command: ["nginx", "-g", "daemon off;"]

My tried:
add hostname on godady config.
add proxy to nginx.conf:

location /testapi {
    proxy_pass https://some_id.ngrok-free.app;
}

Some ref article:
“http-proxy-middleware” does not work in production mode. (react)

but looks no answer