Question

我构建了一个Angular7应用程序，该应用程序具有ServerSide Rendering（具有角度通用），该应用程序包装在.Net Core应用程序中，无法部署到Azure App Service。

当我通过Visual Studio进行发布时，所有构建均已正确完成，使用创建了dist文件夹

/dist
   /browser
   /server
   server.js

但是将文件从node_modules复制到obj文件夹后，发布失败。

无法复制文件“ C：\ Work \ Repos \ website \ msSite \ ClientApp \ node_modules.cache \ terser-webpack-plugin \ content-v2 \ sha512 \ 8f \ 66 \ f49339db5275a13ef193d46e9a87afb770d173d93548f10a78 a493694695c748602741bec0e9f1f2c503f2d6e48f8034f4cc29da83d689f2f631af6938ba“到” C：\ Work \ Repos \ we bsite \ msSite \ obj \ Release \ netcoreapp2.1 \ PubTmp \ Out \ ClientApp \ node_modules.cache \ terser-webpack-plugin \ content-v2 \ sha512 \ 8f \ 66 \ f49339db5275a13ef193d46e9a87afb770d173d93548f10a78a493694695c748602d2c 8f8034f4cc29da83d689f2f631af6938ba”。指定的路径，文件名或两者均太长。完全限定的文件名必须少于260个字符，目录名称必须少于248个字符。

据我了解，因为服务器端渲染node_modules是必需的，但是我该如何解决此问题？

这是.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 --aot" />
<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>
  </ResolvedFileToPublish>
</ItemGroup>

Answer 1

260个字符的路径限制为limitation within the Windows OS。您需要减少此文件的路径长度，以便成功生成和发布。有几种方法可以做到这一点。

您可以将项目存储在靠近驱动器根目录的文件夹中。
您可以减少文件名的长度。
您可以将构建输出设置为更靠近驱动器根目录。

要更改构建输出文件夹，请右键单击项目并打开属性：

在属性窗口中，确保要编辑用于发布的配置（通常是Release），然后打开Build选项卡。在窗口底部附近，您可以覆盖默认的构建路径到另一个文件夹：

Answer 2

有两个解决此问题的方法： 1.不要部署node_modules缓存。 CI / CD将花费很多时间。

<ItemGroup>
 <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
 <DistFiles
   Include="$(SpaRoot)node_modules\**"
   Exclude="$(SpaRoot)node_modules\.cache\**; $(SpaRoot)node_modules.cache\**"
   Condition="'$(BuildServerSideRenderer)' == 'true'" />
 <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
   <RelativePath>%(DistFiles.Identity)</RelativePath>
   <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
 </ResolvedFileToPublish>
</ItemGroup>

部署package.json并锁定文件而不是node_modules。它的速度要快得多，因为您不必使用很多软件包（包括开发软件包）来复制node_modules。 CI / CD必须安装节点软件包。在示例中使用了纱线。

<ItemGroup>
 <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
 <DistFiles
   Include="$(SpaRoot)package.json; $(SpaRoot)yarn.lock;"
   Condition="'$(BuildServerSideRenderer)' == 'true'" />
 <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
   <RelativePath>%(DistFiles.Identity)</RelativePath>
   <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
 </ResolvedFileToPublish>
</ItemGroup>

Answer 3

您必须更改Terser设置才能禁用缓存文件。

在Angular 8中很简单，您必须使用angular custom-webpack： Angular CLI custom webpack config

webpack.config.js：

    const TerserPlugin = require('terser-webpack-plugin');
    module.exports = {
    cache: false,
   optimization: {
    minimize: true,
    minimizer: [
     new TerserPlugin({
      cache: false,
      }),
    ],
   },
 };

请参阅terser-webpack-blugin网站

将Angular7服务器端渲染部署到Azure App Service

3 个答案: