Не удалось загрузить Vuejs приложение на Azure после развертывания

Question

Я пытаюсь развернуть простое приложение Vue. js (целевая страница) в ресурсе службы веб-приложения Azure через службу конвейера Azure Devops. У меня конвейеры сборки и выпуска работают «успешно», но я вижу 404 на ресурсе после развертывания.

Я также использую Visual Studio для разработки этого приложения, поэтому у меня есть файл решения с проект для кода Vue внутри этого.

Структура проекта

MySolution
--MyProject
----src
----dist

azure -pipelines.yaml configuration

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:

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

- script: |
    npm install
  workingDirectory: 'MyProject'
  displayName: 'npm install'

- script: |
    npm build
  workingDirectory: 'MyProject'
  displayName: 'npm build'

- task: CopyFiles@2
  inputs:
    Contents: 'MyProject/dist/**'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1
  inputs: 
    pathtoPublish: $(Build.ArtifactStagingDirectory)
    ArtifactName: 'dist' # output artifact named dist

Когда запускается задача копирования файлов, она сохраняет структуру каталогов внутри артефакта следующим образом:

dist
--MyProject
----dist
------index.html

Я вижу артефакт, создаваемый в конвейере (с именем ' dist ') и развертывается на ресурсе. Я считаю, что проблема возникает из-за задач копирования файлов и публикации sh в файле azure -pipelines.yaml, поскольку та же самая структура каталогов находится под wwwroot на ресурсе (wwwroot -> dist -> MyProject -> dist), в результате чего ресурс не может найти index. html file.

Здесь я вижу два возможных решения:

1. Удалить структура каталогов в артефакте так, чтобы файл index. html находился в артефакте root.
2. Обновите конфигурацию IIS, чтобы сообщить ему правильное расположение файла index. html.

Большая часть моего опыта связана с AWS и apache / nginx, поэтому я немного не понимаю, как реализовать любой из этих вариантов в мире Microsoft. Любое руководство приветствуется, так как я уже несколько часов бью головой об этом. Заранее спасибо!

Answer 1

Хорошо, так что после нескольких часов езды и осознания того, что я над этим долго думал, ответ на этот вопрос - оба варианта, представленные выше

Шаг 1

1. Удалите структуру каталогов в артефакте, чтобы файл index. html находился в артефакте root.

Существует дополнительная опция, которую вы можете добавить к шагу CopyFiles в сборке конвейер для обозначения исходной папки. Это приведет к копированию файлов в структуре с этого момента, с сохранением любой структуры подпапок, если вы используете двойной подстановочный знак «**».

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
  inputs:
    SourceFolder: 'MyProject/dist'
    Contents: |
      **
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

В результате будет создана структура каталогов в артефакте

dist
-- index.html

Шаг 2

Обновите конфигурацию IIS, чтобы сообщить ей о правильном расположении индекса. html файл.

Мне также нужно было настроить файл web.config с правилом перезаписи для использования индекса . html (поскольку Azure пытался создать файл node.js web.config по умолчанию, когда файл web.config отсутствовал). Этот файл конфигурации также должен находиться в каталоге root артефакта, поэтому я добавил вторую задачу CopyFile, чтобы сделать это перед основной задачей CopyFile в промежуточный каталог сборки.

  displayName: 'Copy web.config to: MyProject/dist'
  inputs:
    SourceFolder: 'MyProject'
    Contents: |
      **/web.config
    TargetFolder: 'MyProject/dist'