在 nginx 上部署 Angular 15 项目,服务器响应 MIME 类型为“text/html”?

问题描述 投票:0回答:1

我正在通过带有 docker 文件的 nginx 服务器将角度应用程序部署到域,我的部署角度路径是 /domain/ui/ 但问题是部署后我遇到了上述错误。

**> Failed 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**

在 DEV 上部署后的index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ISA</title>
  <base href="/ui/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="styles.css"></head>
<body>
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>

我有以下解决方案,但没有一个有效:

  1. tsconfig.json 的目标是 es2015
  2. 将 dist/ui 更改为仅 dist
  3. 在 nginx.conf 文件中添加以下内容
  types {
      module js;
    }
    include /etc/nginx/mime.types;

我正在分享我的 nginx.conf,dockerfile 文件:

  1. docker 文件:

FROM artifactorycloud.ual.com/v-docker/node:16 AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install --max-old-space-size=4096
COPY . .
RUN npm run build -- --base-href /ui/ --configuration=development

FROM artifactorycloud.ual.com/v-docker/nginx:alpine
COPY --from=builder /app/dist/ /usr/share/nginx/html
# Copy the nginx conf that we created to the container
COPY ./nginx.conf  /etc/nginx/conf.d/default.conf

EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

  1. nginx.conf:

server {
    listen 0.0.0.0:8080;
    listen [::]:8080;
    default_type application/octet-stream;

    ssl_session_cache    shared:SSL:10m;
    add_header Access-Control-Allow-Origin *;

    
    gzip                    on;
    gzip_comp_level         6;
    gzip_vary               on;
    gzip_min_length         1000;
    gzip_proxied            any;
    gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers            16 8k;
    client_max_body_size    256M;
     types {
      module js;
    }
    include       /etc/nginx/mime.types;

    root /usr/share/nginx/html;

    location / {
       try_files $uri $uri/ /index.html;
    }
    location /ui/health {
        try_files $uri $uri/ /index.html;
    }
}

angular docker nginx mime-types mime
1个回答
0
投票

最终解决了我的应用程序部署在 /ui/health/ 内的问题,我忘记了位置标签内的路径:

location /ui/health/ {
   try_files $uri $uri/ /ui/health/index.html;
}
© www.soinside.com 2019 - 2024. All rights reserved.