我从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
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时失败甚至在您的构建阶段都不存在。
因此,我从中删除了该构建目标,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/...
当我再次开始构建Docker映像时,遇到了以下问题,并从Stack Overflow获得了解决方案:
之后,我可以在http:// localhost:8080上成功构建并运行Docker映像:
docker build . -t web-client
docker run -p 8080:80 -d web-client
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句