Блог

Я весь день пытался запустить конвейер dev.azure для CI amp; CD для приложения Angular Frontend, но в итоге ничего не сработало…

В настоящее время я нахожусь в следующем состоянии:

У меня есть web.config со следующим содержимым:

 <?xml version="1.0" encoding="UTF-8"?>

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>
  

Когда я захожу на веб-сайт со следующим URL:https://mySecretSubdomain.azurewebsites.net / Я перенаправляюсь на https://mySecretSubdomain.azurewebsites.net/home и вижу пустую страницу (в источниках я вижу, что она вернула мою index.html ).

Ожидаемое поведение в этом случае: показать страницу входа (это происходит, когда я запускаю приложение локально с помощью Visual Studio Code.)

Я включил ведение журнала везде, где нашел его в своей службе приложений Azure. В DetailedErrors папке под https://mySecretSubdomain.scm.azurewebsites.net Я получаю информацию о том, что мой запрос фактически привел к ошибке HTTP 404 — not found. И в запрошенном теге URL описания ошибки отображается значение: https://mySecretSubdomain:80/home (Обратите внимание: https имеет смысл, порт 80 не имеет смысла, и я пропускаю часть .azurewebsites.net в URL).

angular.json содержит следующую часть:

 ...
"options": {
    browserTarget": "my-SecretApp-name:build",
    "host": "https://mySecretSubdomain.azurewebsites.net/",
    "port": 443
}
...
  

Я просмотрел все возможные варианты, но не нашел ничего, что могло бы помочь. Есть идеи?

редактировать 14/09/2020 — 1:

Следующие ответы на комментарий @Cece Dong — MSFT:

• Запрошенный конвейер:

в yaml:

 pool:
  name: Azure Pipelines
  demands: npm

steps:
- task: Npm@1
  displayName: 'npm install'
  inputs:
    verbose: false

- task: Npm@1
  displayName: 'npm run build'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build --prod'

- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: src
    includeRootFolder: false

- task: PublishBuildArtifacts@1
  displayName: 'Publish artifacts: drop'
  

• Я проверил с помощью KUDU, все файлы опубликованы и доступны по пути «сайт».

• На данный момент у меня нет времени следовать вашему примеру (я уверен, что это сработает), если это необходимо, я могу выполнить это в качестве теста позже на этой неделе.

редактировать 14/09/2020 — 2:

Я только что понял, что в руководстве (http://dot-net-box.blogspot.com/2020/01/deploy-angular-8-app-to-azure-with.html ), упомянутый @Cece Dong — MSFT, в конвейере больше шагов, чем у меня. Итак, я соответствующим образом обновляю свой конвейер и буду держать вас в курсе.

Проблема заключалась в том, что я не создал правильный конвейер.

В итоге сработала следующая конфигурация конвейера:

 pool:
  name: Azure Pipelines
steps:
- task: NodeTool@0
  displayName: 'Use Node 13.x'
  inputs:
    versionSpec: 13.x

- task: Npm@1
  displayName: 'npm install angular cli'
  inputs:
    command: custom
    verbose: false
    customCommand: 'install -g @angular/cli'

- task: Npm@1
  displayName: 'npm install dependencies'
  inputs:
    command: custom
    verbose: false
    customCommand: 'install --no-package-lock'

- task: Npm@1
  displayName: 'npm run build'
  inputs:
    command: custom
    verbose: false
    customCommand: 'run build --prod'

- task: AzureRmWebAppDeployment@4
  displayName: 'Azure App Service Deploy: MyWebName'
  inputs:
    azureSubscription: 'MySubscription'
    WebAppName: MyWebName
    packageForLinux: 'dist/my-app-name'
  

Огромное спасибо @Cece Dong — MSFT за то, что указал мне правильное направление, упомянув руководство:http://dot-net-box.blogspot.com/2020/01/deploy-angular-8-app-to-azure-with.html