用于创建工件Angular Universal应用的Azure管道

axkjgtzd 于 2023-05-18 发布在 Angular

关注(0)|答案(2)|浏览(213)

我正在尝试将我的Angular Universal应用部署到Azure Web App Service。
npm run build:ssr && npm run serve:ssr在本地运行良好。
没有ssr渲染npm run start也能很好地工作。
部署简单的应用程序没有ssr工程我的主机太好.我只对ssr的部署有问题。
我的ssr网页配置

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="iisnode" path="main.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="DynamicContent">
          <match url="/*" />
          <action type="Rewrite" url="main.js"/>
        </rule>
        <rule name="StaticContent" stopProcessing="true">
          <match url="([\S]+[.](jpg|jpeg|gif|css|png|js|ts|cscc|less|ico|html|map|svg))" />
          <action type="None" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <clientCache cacheControlMode="UseMaxAge" />
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".ttf" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <remove fileExtension=".otf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-woff" />
      <mimeMap fileExtension=".otf" mimeType="application/otf" />
    </staticContent>
  </system.webServer>
</configuration>

我的 Azure 管道为ssr
第一例

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
  - masters

pool:
  vmImage: ubuntu-latest

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '18.x'
    displayName: 'Install Node.js'

  - script: |
      npm install -g @angular/cli
      npm install --force
      npm outdated
      npm run build:ssr --prod
    displayName: 'npm install and build'

  - task: CopyFiles@2
    inputs:
      targetFolder: '$(Build.ArtifactStagingDirectory)'

  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: 'dist'
      ArtifactName: 'dist'

第二个案例

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
  - masters

pool:
  vmImage: ubuntu-latest

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '18.x'
    displayName: 'Install Node.js'

  - script: |
      npm install -g @angular/cli
      npm install --force
      npm outdated
      npm run build:ssr --prod
    displayName: 'npm install and build'

  - task: CopyFiles@1
    displayName: 'Copy browser directory from dist directory to the root'
    inputs:
      SourceFolder: '$(Build.SourcesDirectory)/dist'
      TargetFolder: '$(Build.ArtifactStagingDirectory)/app-name'

  - task: CopyFiles@2
    displayName: 'Copy main.js to the root'
    inputs:
      SourceFolder: '$(Build.ArtifactStagingDirectory)/app-name/dist'
      Contents:  main.js
      TargetFolder: '$(Build.ArtifactStagingDirectory)/app-name'

  - task: DeleteFiles@1
    displayName: 'Delete the dist/main.js'
    inputs:
      SourceFolder: '$(Build.ArtifactStagingDirectory)/app-name/dist'
      Contents: 'main.js'
      
  - task: PublishBuildArtifacts@1
    inputs:
      PathtoPublish: 'dist'
      ArtifactName: 'dist'

结果我得到了这个

我在Azure Web App配置上根工件的方法运行良好。我的应用程序不能只运行Angular SSR。错在哪里？在管道中还是在配置文件中？

Azure

来源：https://stackoverflow.com/questions/76231583/azure-pipeline-for-creating-artifact-angular-universal-app

2条答案

按热度按时间

t98cgbkg1#

我使用以下YAML代码在Azure DevOps管道中部署Angular Universal应用程序：-

trigger:

- main

  

pool:

vmImage: ubuntu-latest

  

steps:

- task: NodeTool@0

inputs:

versionSpec: '16.x'

displayName: 'Install Node.js'

- script: |

npm install -g @angular/cli

ng new my-app --defaults --skip-install

cd my-app

ng add @nguniversal/express-engine --skip-confirmation

displayName: 'Create Angular Universal app'

  

- script: |

npm install

npm run build:ssr

workingDirectory: '$(System.DefaultWorkingDirectory)/my-app'

displayName: 'Build Angular Universal app'

  

- task: CopyFiles@2

inputs:

SourceFolder: '$(System.DefaultWorkingDirectory)/my-app/dist/my-app/browser'

Contents: '**'

TargetFolder: '$(Build.ArtifactStagingDirectory)'

displayName: 'Copy files to artifact staging directory'

  

- task: PublishBuildArtifacts@1

inputs:

PathtoPublish: '$(build.artifactstagingdirectory)'

ArtifactName: 'drop'

publishLocation: 'Container'

displayName: 'Publish artifact'

  

- task: AzureRmWebAppDeployment@4

inputs:

ConnectionType: 'AzureRM'

azureSubscription: '<subscription-id>'

appType: 'webAppLinux'

WebAppName: 'siliconwebapp'

packageForLinux: '$(Build.ArtifactStagingDirectory)'

RuntimeStack: 'NODE|16-lts'

StartupCommand: 'npm install && npm run build:ssr && npm start'

displayName: 'Deploy to Azure App Service'

输出：-

展开成功，请参阅以下内容：-