请教下前端 docker 部署问题

部署简单的架构

用户请求域名->服务器 nginx->前端 docker 服务

前端 docker 配置如下

docekrfile

FROM node:lts-alpine AS builder

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build

# build the nginx image
FROM nginx:1.17
COPY --from=builder /app/dist /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/
EOF

2.docker nginx 配置 nginx.conf

server {
  listen 80;
  server_name localhost;
  root /usr/share/nginx/html;
  index index.html;
  location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt){
    root /usr/share/nginx/html;
  }
  location / {
    try_files $uri $uri/ @router;
    index index.html;
  }

  location @router {
    rewrite ^.*$ /index.html last;
  }
}

服务器的 nginx 配置

现在是这样的配置

 location /api/ {
        rewrite  ^.+api/?(.*)$ /$1 break; # 去除本地接口 /api 前缀, 否则会出现 404
        proxy_pass http://xxx.xxxx:8081;  # 前端代理的后端服务接口
         proxy_set_header X-Real-IP       $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Server $host;
        #add_header 'Access-Control-Allow-Origin' '*'; 
        #add_header 'Access-Control-Allow-Credentials' 'true'; 
    }
  
    location / {
        proxy_pass http://127.0.0.1:8080; #前端 docker 访问的路径

       # try_files $uri $uri/ /index.html; 
				
    }

上面这种配置后，访问刷新路由会 404 ，如果加上 try_files $uri $uri/ /index.html; 就会报错

iled to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

注：两边 nginx 都有配置

include       /etc/nginx/mime.types;
default_type  application/octet-stream;

求大佬解答