在 Kestrel 中托管 Angular 应用程序不适用于 Docker

Question

我有一个 angular 6 应用程序托管在 .NET Core Server.The 应用程序中，我可以访问 pages/routes 等
但是当我将此 .NET 应用程序放入 docker 和运行中，但出现以下错误：

GET http://localhost:8400/styles.3bb2a9d4949b7dc120a9.css net::ERR_ABORTED 404 (Not Found)
GET http://localhost:8400/runtime.ec2944dd8b20ec099bf3.js net::ERR_ABORTED 404 (Not Found)

在我的 docker 图像中，我将 .NET App 的 Release 文件夹放入，并在此文件夹中添加：

-DockerImage
   -Release folder
     - Dockerfile
     - Config `json` file (i am using `Microsoft.Extensions.Configuration`)
     - `dist` folder (angular compiled application)

Docker文件

FROM microsoft/dotnet:2.1-aspnetcore-runtime
WORKDIR /app
ADD . /app
ENTRYPOINT [ "dotnet","Deploy.dll"]

本例中的 . 根路径是 Release 文件夹，其中包含我在上一节中提到的项目。

有趣的是 NET Core 依赖于 dist 文件夹中的某些文件，否则它会 crash.And 它不会，它工作得很好。

Startup.cs

  public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
                if (env.IsDevelopment()) {
                    app.UseDeveloperExceptionPage();
                } else
                    app.UseHsts();
                Config config = this.Configuration.GetSection("Config").Get<Config>();
                Config.Frontend frontend = this.Configuration.GetSection("Config:Frontend").Get<Config.Frontend>();

                string jsroot = Path.Combine(Directory.GetCurrentDirectory(), frontend.PhysicalRoot);
                PhysicalFileProvider provider = new PhysicalFileProvider(jsroot);

                DefaultFilesOptions options = new DefaultFilesOptions() {
                    DefaultFileNames = new List<string> { frontend.DefaultFileName },
                    FileProvider = provider,
                    RequestPath = frontend.RequestPath
                };
                app.UseDefaultFiles(options);

                app.UseStaticFiles();
                app.UseStaticFiles(new StaticFileOptions() {
                    RequestPath = frontend.RequestPath,
                    FileProvider = provider
                });
            }

Index.html（来自 dist 文件夹）

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Frontend</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="treeview/styles.3bb2a9d4949b7dc120a9.css"></head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="treeview/runtime.ec2944dd8b20ec099bf3.js"></script>
    <script type="text/javascript" src="treeview/polyfills.c6871e56cb80756a5498.js"></script>
    <script type="text/javascript" src="treeview/main.a4ddb95d782e95e34c4a.js"></script>
</body>
</html>

配置文件

{
  "Config": {
    "Frontend": {
      "PhysicalRoot": "./js",
      "RequestPath": "/treeview",
      "DefaultFileName": "index.html"
    },
    "Environment": {
      "ProdEnv": {
        "OwnAddress": {
          "Hostname": "0.0.0.0",
          "Port": 8400
        }
      },
      "DevEnv": {
        "OwnAddress": {
          "Hostname": "0.0.0.0",
          "Port": 8401
        }
      }
    }
  }
}

P.S .NET Core App 中的 Config 类型只是 Config 部分的 POCO配置文件。

容器使用 bash 脚本启动，该脚本启动 docker-compose

Docker合成

version: '3.3'
services:

    front:
      image: ft
      container_name: front0
      build: ./front/publish
      networks:
        - redis-net
      ports:
        - 8400:8400

Script.sh

    dotnet build -c Release ../${hostServerSrc} >>out.txt  //building the release for the `.NET Server that hosts the angular app`
    dotnet publish -c Release ../${hostServerSrc} --output $(pwd)/${hostServerDest} >>out.txt  //publshing it to the folder that will be injected in the image
    cp  ./Configs/hostConfig.json ./front/publish  //copying the config file for the `.NET App`
    cp  -r ../${ngSrc}  ./front/publish/js //copying the angular compiled app

    docker-compose up --build  -d >>out.txt

P.S 2 似乎在 js folder.The Request URL 中找不到任何文件是： http://localhost:8400/runtime.js.

在 docker 容器中，我拥有 js 文件夹中的所有文件。可能是因为在 docker 中没有更多的 localhost ?

Answer 1

一切看起来都很好，除了我的一分。

您希望您的容器加入 redis-net 网络：

  networks:
    - redis-net

但我没有在您的 docker-compose 文件中看到此网络定义。

尝试以下方法之一：

将网络定义添加到 docker-compose:

version: '3.3'
services:
    front:
      image: ft
      container_name: front0
      build: ./front/publish
      networks:
        - redis-net
      ports:
        - 8400:8400
networks:
  redis-net:

或删除此行 - docker-compose 将为您创建一个默认的闪亮桥接网络，效果很好。如果您不打算执行手动网络操作，这是一个不错的选择。

version: '3.3'
services:
    front:
      image: ft
      container_name: front0
      build: ./front/publish
      ports:
        - 8400:8400

在 Kestrel 中托管 Angular 应用程序不适用于 Docker

Hosting Angular application in Kestrel does not work with Docker

configuration-files

docker

angular

asp.net-core-2.1