ASP.NET Core 3.1 Angular Web App可在Windows上构建和运行,但在Mac OSX和Docker上无法运行

埃罗塔夫拉斯

我从Windows 10计算机上的Visual Studio 2019中的Angular模板创建了一个基本的ASP.NET Core 3.1 Web应用程序。整个项目源代码位于此处

git clone https://[email protected]/dev-issues/webclient.git

当我在Windows计算机上构建并运行它时,它可以正常工作,并且可以在Microsoft Edge浏览器中正确启动。

但是,当我将项目复制到Macbook(OS Catalina)并打算将其构建到docker映像中时,它无法这样做。这些是构建结束时的消息

  > [email protected] build /src/WebClient/ClientApp
  > ng build "--prod"

  Browserslist: caniuse-lite is outdated. Please run next command `npm update`
  Killed
  npm ERR! code ELIFECYCLE
  npm ERR! errno 137
  npm ERR! [email protected] build: `ng build "--prod"`
  npm ERR! Exit status 137
  npm ERR! 
  npm ERR! Failed at the [email protected] build script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

  npm ERR! A complete log of this run can be found in:
  npm ERR!     /root/.npm/_logs/2020-06-12T13_22_34_364Z-debug.log
/src/WebClient/WebClient.csproj(40,5): error MSB3073: The command "npm run build -- --prod" exited with code 137.
The command '/bin/sh -c dotnet publish "WebClient.csproj" -c Release -o /app/publish' returned a non-zero code: 1

然后我认为该项目可能有问题,因此我尝试在Visual Studio for Mac中将其打开,并且它的构建完全没有问题。但是当我运行它时,它会在Visual Studio输出中生成以下输出

npm ERR! A complete log of this run can be found in:

)
---> System.InvalidOperationException: The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: sh: /Users/username/Documents/DEV/WebClient/WebClient/ClientApp/node_modules/.bin/ng: Permission denied

npm ERR! code ELIFECYCLE

npm ERR! errno 126
npm ERR! [email protected] start: `ng serve "--port" "59704"`
npm ERR! Exit status 126
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.


npm ERR! A complete log of this run can be found in:


---> System.IO.EndOfStreamException: Attempted to read past the end of the stream.
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.StartAngularCliServerAsync(String sourcePath, String npmScriptName, ILogger logger)
   --- End of inner exception stack trace ---
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.StartAngularCliServerAsync(String sourcePath, String npmScriptName, ILogger logger)
   --- End of inner exception stack trace ---
   at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
   at System.Threading.Tasks.Task`1.get_Result()
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<>c.<Attach>b__2_0(Task`1 task)
   at System.Threading.Tasks.ContinuationResultTaskFromResultTask`2.InnerInvoke()
   at System.Threading.Tasks.Task.<>c.<.cctor>b__274_0(Object obj)
   at System.Threading.ExecutionContext.RunFromThreadPoolDispatchLoop(Thread threadPoolThread, ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location where exception was thrown ---
   at System.Threading.ExecutionContext.RunFromThreadPoolDispatchLoop(Thread threadPoolThread, ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Threading.Tasks.Task.ExecuteWithThreadLocal(Task& currentTaskSlot, Thread threadPoolThread)
   --- End of inner exception stack trace ---
   at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
   at System.Threading.Tasks.Task`1.get_Result()
   at Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.WithTimeout[T](Task`1 task, TimeSpan timeoutDelay, String message)
   at Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyRequest(HttpContext context, HttpClient httpClient, Task`1 baseUriTask, CancellationToken applicationStoppingToken, Boolean proxy404s)
   at Microsoft.AspNetCore.Builder.SpaProxyingExtensions.<>c__DisplayClass2_0.<<UseProxyToSpaDevelopmentServer>b__0>d.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

浏览器随即打开,并显示以下消息

An unhandled exception occurred while processing the request.
AggregateException: One or more errors occurred. (One or more errors occurred. (The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: sh: /Users/username/Documents/DEV/WebClient/WebClient/ClientApp/node_modules/.bin/ng: Permission denied

npm ERR! code ELIFECYCLE

npm ERR! errno 126
npm ERR! [email protected] start: `ng serve "--port" "59704"`
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.


npm ERR! A complete log of this run can be found in:

))

当我尝试在Windows上构建docker映像时,它也失败了。

任何与此有关的指导表示赞赏。

本姆

我使用Mac对这个问题进行了一些调查。事实证明,经过一些修改,我可以成功构建并运行docker容器。您可以在此处查看我的详细代码更改

我可以通过运行以下命令在Mac上成功运行它:

dotnet build
cd WebClient
dotnet run

1.PublishRunWebpack从csproj移除

当我尝试运行Dockerfile生成映像时,我看到了与问题描述相同的错误,该错误以某种方式将我引向了本文并检查了以下PublishRunWebpack任务WebClient.csproj

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
  <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

  <!-- Include the newly-built files in the publish output -->
  <ItemGroup>
    <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
    <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>%(DistFiles.Identity)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

PublishRunWebpack任务将在发布应用程序时运行(即dotnet publish ...),因此不会在开发过程中(即dotnet run触发,这表明npm run build -- --prod在构建Docker映像或npm时失败甚至在您的构建阶段都不存在。

2.在Dockerfile中添加构建阶段(用于节点)

因此,我从中删除了该构建目标,WebClient.csproj并在Dockerfile中添加了一个构建阶段来构建Angular Web应用程序。以下代码段仅显示了节点构建阶段这是完整的Dockerfile

### some steps to build and publish the dotnet app...

#Angular build
FROM node as nodebuilder

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY WebClient/ClientApp/package.json /usr/src/app/package.json
RUN npm install
# (use 8.3.14 as I saw package.json is using this)
RUN npm install -g @angular/[email protected] --unsafe

# add app
COPY WebClient/ClientApp/. /usr/src/app

## this is the original step stated in the .csproj file
RUN npm run build -- --prod

## or, you can use the following command if you enable server-side prerendering
# RUN npm run build:ssr -- --prod

### some steps to copy the Angular web app to ClientApp/dist/...

3.修复Angular构建错误

当我再次开始构建Docker映像时,遇到了以下问题,并从Stack Overflow获得了解决方案:

构建并运行

之后,我可以在http:// localhost:8080上成功构建并运行Docker映像:

docker build . -t web-client
docker run -p 8080:80 -d web-client

运行dockerized应用

仪表板显示该应用程序正在运行: Docker仪表板

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

ASP.NET Core 3:无法在 linux 上运行

在Raspbery Pi 3 B +上运行ASP .NET Core

无法在 Azure Devops 部署组(自托管)上运行 ASP.NET Core Web API

Docker:运行 docker 后无法在浏览器上启动 .Net Core 3.1 Web Api

在Visual Studio for Mac和Asp.net Core 2.0 Web API中生成后无法运行解决方案

无法将值从 angular 服务发布到 asp.net core angular 中的 Web API

在 asp.NET Core MVC Web 上启动并行任务

Kendo UI for Angular中的ASP.NET Core OData Web服务,Angular 5和网格组件

Arch Linux上的asp.net core 2.1无法运行

VS 2017 + ASP.Net Core +无法构建Angular 4

为什么要在Windows Server上的.NET上的.NET Core上运行ASP.NET Core

无法更改 ASP.NET Core Web App 中生成的 DLL 的运行时版本

从作为 AWS Lambda 函数运行的 AWS ApiGateway ASP.NET Core 3 Web API 返回文件

带有ASP.Net Core MVC和ASP.Net Web Api的Angular2 App中的HTML5路由

如何在 Internet Explorer 11 上运行 Angular 5 asp.net core MVC

Asp.net Core 2.1 Web App无法在IIS上正确呈现

将现有的ASP.NET Core Web App转换为在Azure IoT Edge上运行的Edge模块

无法在docker linux中运行Asp.Net Core

ASP.NET Core Web API + Angular 2授权和身份验证

ASP.Net Core 3远程证书在MacO上无效

运行ASP.Net Core Docker映像

ASP.NET Core Web API服务无法连接到同一网络上的Docker SQL Server

ASP .NET Core 3的Web安全审核问题

在 ASP.NET Core 的 Mac Docker 上运行的 SQL Server 的连接字符串是什么?

独立的ASP.Net Core应用程序无法在Mac上运行

ASP.NET Core 2.1 Preview 2 App无法在Azure App Service上运行

ASP.NET Core Web API在本地运行,但不在Azure应用程序服务上运行

NHibernate在运行ASP.NET MVC 3 Web应用程序的Mono上

ASP.NET Core API-在Azure App Service上获取404,但在Localhost上可以正常运行