I encountered an issue with page reload in my Angular application while using Docker with Nginx. I managed to resolve it by incorporating an Nginx configuration file into my Docker setup, but it currently specifies a fixed port number. However, when I run Docker Compose with a different port, the page redirects to port 4201. I’m looking for a solution to handle this issue so that any redirection goes to the correct port.

server {
  listen 4201;
  sendfile on;
  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6].";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

FROM node:20.10.0-alpine3.17 as builder
WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .
RUN npm run build

# Stage 2: Serve Angular application using Nginx
FROM nginx:alpine

COPY /nginx.conf /etc/nginx/conf.d/default.conf

# Copy built Angular artifacts to Nginx directory
COPY --from=builder /app/dist/movie-app/browser /usr/share/nginx/html

# Expose port 4201 to allow external access
EXPOSE 4201

# Start Nginx server
CMD ["nginx", "-g", "daemon off;"]

movie-app:
    image: ${docker-name}/movie-app-angular:latest
    container_name: movie-app-angular
    ports:
      - "4201:4201"

If I change the port to in docker file I am redirecting to 4201 how can I handle it.