dotnet core + Angular Universal + docker =>由于错误,预渲染失败:错误:找不到模块

时间:2018-05-09 16:04:26

标签: angular docker asp.net-core .net-core angular-universal

我们有一个使用Dotnet核心Angular Universal开发的项目。我们使用Asp.net Core SPA服务的prerender功能。在本地环境中,该应用程序适用于Windows,Linux。使用Visual Studio自己的docker多阶段构建模板时会出现一些问题。在我们在microsoft / aspnetcore-build映像中构建它之后,我们将文件传输到microsoft / aspnetcore映像。由于Asp.net SPA对nodejs的依赖,我们还将nodejs安装到microsoft / aspnetcore映像。

但是当我们运行应用程序时,我们收到错误" Prerendering因错误而失败:错误:无法找到模块' angular2-universal-polyfills'"在main.bundle.js(服务器端)的预呈现阶段。我们相信这个问题与“角度2 - 通用 - 聚合物”无关。因为我们也尝试过其他的polyfill并遇到类似的错误。

但是,当我们将.net核心和nodejs安装到单个容器而不是多阶段构建中并在同一容器内构建和发布操作时,我们的应用程序可以工作。但是容器的大小为2 GB。

理论上,我们构建的容器和我们运行的容器之间没有区别。两者都安装了.net核心和nodejs。唯一的区别是我们将发布输出复制到我们运行的容器中。

发布输出

root
    wwwroot (angular client-side dist)
        assets
        inline.bundle.js
        main.bundle.js
        polyfill.bundle.js
        vendor.bundle.js
    CodefictionApp/dist-server (angular server-side dist)
        assets
        main.bundle.js
    dlls

工作Dockerfile

FROM microsoft/aspnetcore:2.0 AS base
WORKDIR /app
EXPOSE 80

FROM buildpack-deps:jessie-scm

RUN apt-get update \
    && apt-get install -y --no-install-recommends \
        libc6 \
        libcurl3 \
        libgcc1 \
        libgssapi-krb5-2 \
        libicu52 \
        liblttng-ust0 \
        libssl1.0.0 \
        libstdc++6 \
        libunwind8 \
        libuuid1 \
        zlib1g \
    && rm -rf /var/lib/apt/lists/*

ENV DOTNET_SDK_VERSION 2.1.200
ENV DOTNET_SDK_DOWNLOAD_URL https://dotnetcli.blob.core.windows.net/dotnet/Sdk/$DOTNET_SDK_VERSION/dotnet-sdk-$DOTNET_SDK_VERSION-linux-x64.tar.gz
ENV DOTNET_SDK_DOWNLOAD_SHA c1b07ce8849619ca505aafd2983bcdd7141536ccae243d4249b0c9665daf107e03a696ad5f1d95560142cd841a0888bbf5f1a8ff77d3bdc3696b5873481f0998

RUN curl -SL $DOTNET_SDK_DOWNLOAD_URL --output dotnet.tar.gz \
    && echo "$DOTNET_SDK_DOWNLOAD_SHA dotnet.tar.gz" | sha512sum -c - \
    && mkdir -p /usr/share/dotnet \
    && tar -zxf dotnet.tar.gz -C /usr/share/dotnet \
    && rm dotnet.tar.gz \
    && ln -s /usr/share/dotnet/dotnet /usr/bin/dotnet

ENV DOTNET_RUNNING_IN_CONTAINER=true \
    DOTNET_USE_POLLING_FILE_WATCHER=true \
    NUGET_XMLDOC_MODE=skip

RUN mkdir warmup \
    && cd warmup \
    && dotnet new \
    && cd .. \
    && rm -rf warmup \
    && rm -rf /tmp/NuGetScratch

ENV RestoreUseSkipNonexistentTargets false

ENV NODE_VERSION="8.11.0"

RUN apt-get install wget -y

RUN set -ex \
    && for key in \
      94AE36675C464D64BAFA68DD7434390BDBE9B9C5 \
      0034A06D9D9B0064CE8ADF6BF1747F4AD2306D93 \
      FD3A5288F042B6850C66B31F09FE44734EB7990E \
      71DCFD284A79C3B38668286BC97EC7A07EDE3FC1 \
      DD8F2338BAE7501E3DD5AC78C273792F7D83545D \
      B9AE9905FFD7803F25714661B63B535A4C206CA9 \
      C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
      77984A986EBC2AA786BC0F66B01FBB92821C587A \
      56730D5401028683275BD23C23EFEFE93C4CFFFE \
    ; do \
      gpg --keyserver ha.pool.sks-keyservers.net --recv-keys "$key"; \
    done

RUN set -ex \
    && wget "https://nodejs.org/download/release/v$NODE_VERSION/node-v$NODE_VERSION-linux-x64.tar.gz" -O node-v$NODE_VERSION-linux-x64.tar.gz \
    && wget "https://nodejs.org/download/release/v$NODE_VERSION/SHASUMS256.txt.asc" -O SHASUMS256.txt.asc \
    && gpg --batch --decrypt --output SHASUMS256.txt SHASUMS256.txt.asc \
    && grep " node-v$NODE_VERSION-linux-x64.tar.gz\$" SHASUMS256.txt | sha256sum -c - \
        && tar -xzf "node-v$NODE_VERSION-linux-x64.tar.gz" -C /usr/local --strip-components=1 \
        && rm "node-v$NODE_VERSION-linux-x64.tar.gz" SHASUMS256.txt.asc SHASUMS256.txt \
        && ln -s /usr/local/bin/node /usr/local/bin/nodejs \
        && rm -fr /var/lib/apt/lists/* /tmp/* /var/tmp/*

RUN npm config set user 0
RUN npm config set unsafe-perm true

RUN npm install -g @angular/cli@1.7.4
RUN node -v && npm -v && ng -v

RUN apt-get update && apt-get install bzip2 -y

ENV ASPNETCORE_URLS http://+:80

WORKDIR /app
EXPOSE 80
COPY . .
RUN dotnet restore ./CodefictionApi
RUN dotnet publish ./CodefictionApi -c Release

WORKDIR /app/CodefictionApi/bin/Release/netcoreapp2.0/publish

ENTRYPOINT ["dotnet", "CodefictionApi.dll"]

多阶段泊坞窗文件(运行时会出现预渲染错误)

FROM microsoft/aspnetcore:2.0 AS base
WORKDIR /app
EXPOSE 80

FROM buildpack-deps:jessie-scm AS publisher

RUN apt-get update \
    && apt-get install -y --no-install-recommends \
        libc6 \
        libcurl3 \
        libgcc1 \
        libgssapi-krb5-2 \
        libicu52 \
        liblttng-ust0 \
        libssl1.0.0 \
        libstdc++6 \
        libunwind8 \
        libuuid1 \
        zlib1g \
    && rm -rf /var/lib/apt/lists/*

ENV DOTNET_SDK_VERSION 2.1.200
ENV DOTNET_SDK_DOWNLOAD_URL https://dotnetcli.blob.core.windows.net/dotnet/Sdk/$DOTNET_SDK_VERSION/dotnet-sdk-$DOTNET_SDK_VERSION-linux-x64.tar.gz
ENV DOTNET_SDK_DOWNLOAD_SHA c1b07ce8849619ca505aafd2983bcdd7141536ccae243d4249b0c9665daf107e03a696ad5f1d95560142cd841a0888bbf5f1a8ff77d3bdc3696b5873481f0998

RUN curl -SL $DOTNET_SDK_DOWNLOAD_URL --output dotnet.tar.gz \
    && echo "$DOTNET_SDK_DOWNLOAD_SHA dotnet.tar.gz" | sha512sum -c - \
    && mkdir -p /usr/share/dotnet \
    && tar -zxf dotnet.tar.gz -C /usr/share/dotnet \
    && rm dotnet.tar.gz \
    && ln -s /usr/share/dotnet/dotnet /usr/bin/dotnet

ENV DOTNET_RUNNING_IN_CONTAINER=true \
    DOTNET_USE_POLLING_FILE_WATCHER=true \
    NUGET_XMLDOC_MODE=skip

RUN mkdir warmup \
    && cd warmup \
    && dotnet new \
    && cd .. \
    && rm -rf warmup \
    && rm -rf /tmp/NuGetScratch

ENV RestoreUseSkipNonexistentTargets false

ENV NODE_VERSION="8.11.0"

RUN apt-get install wget -y

RUN set -ex \
    && for key in \
      94AE36675C464D64BAFA68DD7434390BDBE9B9C5 \
      0034A06D9D9B0064CE8ADF6BF1747F4AD2306D93 \
      FD3A5288F042B6850C66B31F09FE44734EB7990E \
      71DCFD284A79C3B38668286BC97EC7A07EDE3FC1 \
      DD8F2338BAE7501E3DD5AC78C273792F7D83545D \
      B9AE9905FFD7803F25714661B63B535A4C206CA9 \
      C4F0DFFF4E8C1A8236409D08E73BC641CC11F4C8 \
      77984A986EBC2AA786BC0F66B01FBB92821C587A \
      56730D5401028683275BD23C23EFEFE93C4CFFFE \
    ; do \
      gpg --keyserver ha.pool.sks-keyservers.net --recv-keys "$key"; \
    done

RUN set -ex \
    && wget "https://nodejs.org/download/release/v$NODE_VERSION/node-v$NODE_VERSION-linux-x64.tar.gz" -O node-v$NODE_VERSION-linux-x64.tar.gz \
    && wget "https://nodejs.org/download/release/v$NODE_VERSION/SHASUMS256.txt.asc" -O SHASUMS256.txt.asc \
    && gpg --batch --decrypt --output SHASUMS256.txt SHASUMS256.txt.asc \
    && grep " node-v$NODE_VERSION-linux-x64.tar.gz\$" SHASUMS256.txt | sha256sum -c - \
        && tar -xzf "node-v$NODE_VERSION-linux-x64.tar.gz" -C /usr/local --strip-components=1 \
        && rm "node-v$NODE_VERSION-linux-x64.tar.gz" SHASUMS256.txt.asc SHASUMS256.txt \
        && ln -s /usr/local/bin/node /usr/local/bin/nodejs \
        && rm -fr /var/lib/apt/lists/* /tmp/* /var/tmp/*

RUN npm config set user 0
RUN npm config set unsafe-perm true

RUN npm install -g @angular/cli@1.7.4
RUN node -v && npm -v && ng -v

RUN apt-get update && apt-get install bzip2 -y

ENV ASPNETCORE_URLS http://+:80

WORKDIR /app
COPY . .
RUN dotnet restore ./CodefictionApi
RUN dotnet publish ./CodefictionApi -c Release

FROM base AS final
ARG source
EXPOSE 5102
ENV ASPNETCORE_URLS http://*:80
RUN apt-get -qq update && apt-get -qqy --no-install-recommends install wget gnupg \
    git \
    unzip
RUN curl -sL https://deb.nodesource.com/setup_8.x |  bash -
RUN apt-get install -y nodejs
RUN npm config set user 0
RUN npm config set unsafe-perm true
RUN npm install -g npm

RUN npm install -g @angular/cli@1.7.4 --unsafe
RUN npm install -g @angular/compiler-cli@5.2.1
RUN node -v && npm -v && ng -v

ENV ASPNETCORE_ENVIRONMENT=Development

WORKDIR /app/CodefictionApi/bin/Release/netcoreapp2.0/publish
COPY --from=publisher /app/CodefictionApi/bin/Release/netcoreapp2.0/publish .
ENTRYPOINT ["dotnet", "CodefictionApi.dll"]

的package.json

{
  "name": "codefiction-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "~1.7.4",
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.2.1",
    "@nguniversal/aspnetcore-engine": "^5.0.0",
    "@nguniversal/common": "^5.0.0",
    "@types/node": "^7.0.12",
    "angular2-router-loader": "^0.3.5",
    "angular2-template-loader": "^0.6.2",
    "angular2-universal-polyfills": "2.0.11",
    "aspnet-prerendering": "3.0.1",
    "awesome-typescript-loader": "^3.0.0",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "core-js": "^2.5.1",
    "css": "^2.2.1",
    "css-loader": "^0.28.7",
    "event-source-polyfill": "^0.0.9",
    "file-loader": "^0.11.2",
    "html-loader": "^0.5.1",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^2.2.1",
    "json-loader": "^0.5.4",
    "moment": "2.18.1",
    "node-sass": "^4.5.2",
    "preboot": "6.0.0-beta.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.2",
    "rxjs": "^5.5.6",
    "style-loader": "^0.18.2",
    "to-string-loader": "^1.1.5",
    "typescript": "~2.5.0",
    "url-loader": "^0.5.7",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^5.2.1",
    "@types/chai": "^3.4.34",
    "@types/jasmine": "^2.5.37",
    "chalk": "^2.4.1",
    "chai": "^3.5.0",
    "codelyzer": "4.0.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.7.1",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.4",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-remap-coverage": "^0.1.4",
    "karma-sourcemap-loader": "^0.3.7",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1"
  }
}

csproj发布命令

  <Target Name="PublishProject" BeforeTargets="ComputeFilesToPublish">
    <Exec Command="npm install" />
    <Exec Command="./node_modules/.bin/ng -v" />
    <Exec Command="./node_modules/.bin/ng build --env=dev --app 0" />
    <Exec Command="./node_modules/.bin/ng build --env=dev --app 1" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="wwwroot/**; CodefictionApp/dist-server/**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

可以从这里检查完整的来源

https://github.com/Blind-Striker/codefiction-tech-new

可以从此分支检查不工作的版本

https://github.com/Blind-Striker/codefiction-tech-new/tree/docker-not-working-version

感谢。

1 个答案:

答案 0 :(得分:0)

angular2-universal-polyfills模块不再存在。这可能是在您从本地缓存运行本地安装软件包时发生的,而当您  在容器中运行它,它在npm注册表中查找,但失败了。 要升级您的项目,您可以按照github上的link文档进行操作。他们对如何迁移有很好的解释。