2
votes

Déployer le rendu côté serveur Angular7 sur Azure App Service

J'ai une application Angular7 créée avec le rendu ServerSide (avec angular universal) qui est enveloppé dans une application .Net Core et je ne peux pas effectuer le déploiement sur Azure App Service.

Lorsque je publie via Visual Studio, toute la compilation est faite correctement, en créant le dossier dist avec

<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>

mais ensuite la publication échoue lors de la copie des fichiers de node_modules vers l'objet dossier.

Impossible de copier le fichier "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 \ f49339db5275a13ef193d46e9a87afb770d173d935489f10a87afb770d173d935489f10a782c496f6484f6484f7504f04f04f05f03a5a7f03a5a7f05f05f03a4f03a4a7f05f05f05f05f05f05f05f05f05f05f05f05f05f05f05f05f05f05f03a4a7a7f05f05f6 8f8034f4cc29da83d689f2f631af6938ba ". Le chemin, le nom de fichier ou les deux spécifiés sont trop longs. Le nom de fichier complet doit comporter moins de 260 caractères et le nom du répertoire doit contenir moins de 248 caractères.

Comme je le comprends, car le rendu côté serveur est-il nécessaire, mais comment puis-je résoudre ce problème?

cela fait partie du fichier .csproj

/dist
   /browser
   /server
   server.js

.net-core angular azure-web-app-service

0 commentaires

3 Réponses :

0
votes

La limite de chemin de 260 caractères est une limitation dans le système d'exploitation Windows . Vous devrez réduire la longueur du chemin d'accès à ce fichier afin de réussir la création et la publication. Il existe plusieurs façons de procéder.

Vous pouvez stocker le projet dans un dossier plus proche de la racine du lecteur.
Vous pouvez réduire la longueur du nom de fichier.
Vous pouvez définir la sortie de compilation pour qu'elle se trouve quelque part plus près de la racine du lecteur.

Pour changer le dossier de sortie de construction, cliquez avec le bouton droit sur le projet et ouvrez les propriétés:

Dans la fenêtre des propriétés, assurez-vous que vous modifiez la configuration que vous utilisez pour la publication (généralement Release) et ouvrez l'onglet Build. En bas de la fenêtre, vous pouvez remplacer le chemin de construction par défaut vers un autre dossier:

0 commentaires

0
votes

Il existe deux solutions à ce problème: 1. Ne déployez pas le cache node_modules. CI / CD prendra beaucoup de temps.

<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>

Déployez package.json et verrouillez le fichier au lieu de node_modules. C'est beaucoup plus rapide car vous n'avez pas à copier node_modules avec beaucoup de packages, y compris ceux de développement. CI / CD doit installer des packages de nœuds. Le fil est utilisé dans l'exemple.

<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>

0 commentaires

0
votes

vous devez modifier les paramètres de Terser pour désactiver les fichiers de cache.

Dans Angular 8, c'est facile, vous devez utiliser angular custom-webpack: Configuration du pack web personnalisé de la CLI angulaire

webpack.config.js:

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

voir le site terser-webpack-blugin

0 commentaires