Репозиторий Turbo Mono, развертывающий nextjs 14 в Службе приложений Azure

У меня возникла проблема со сборкой и развертыванием приложения NextJS14 в Службе приложений Azure в моем репозитории Turbo Mono, и мне нужна помощь в понимании правильного способа сделать это. Я пробовал множество вещей, и каждый раз мне не хватало зависимости или node_module слишком велик, и развертывание завершалось неудачей. Итак, может ли кто-нибудь из вас дать мне правильную последовательность действий в моем YAML для сборки из моно-репозитория и отправки его в мое веб-приложение Azure, чтобы оно могло работать.

Я попробовал, поскольку я не могу отправить только само приложение, поскольку его сборка создает странную простую ссылку в node_module на корневой node_module, я решил добавить .npmrc с node-linker=hoisted symlink=false внутри, и я выполняю установку pnpm и копирую корневой node_module в свой проект, а затем отправляю его в веб-приложение Azure. На данный момент пакет заархивирован примерно на 500 МБ, и примерно через 40 минут его не удается отправить на мой компьютер (план обслуживания B1 Linux). Так что я как бы потерял способ сделать это из моно-репозитория.

Просто помните, что я не эксперт и только начал это путешествие.

Спасибо вам за помощь

Мои yml-скрипты

azure-pipeline.yml

trigger:
  branches:
    include:
      - main
  paths:
    include:
      - apps/frontend/*

variables:
  - name: projectRoot
    value: $(Build.SourcesDirectory)/apps/frontend

stages:

  - stage: IdentifyAndSetVariables
    displayName: 'Identify Changes and Set Variables'
    jobs:
      - job: IdentifyChanges
        displayName: 'Identify Changes'
        pool:
          vmImage: 'ubuntu-latest'
        steps:
          - checkout: self
            submodules: true
            fetchDepth: 2
          - bash: |
              echo "Identifying modified projects..."
              MODIFIED_PROJECTS=$(git diff --name-only HEAD~1 -- apps/frontend | awk -F/ '{print $3}' | sort -u | tr '\n' ';')
              echo "Modified projects: $MODIFIED_PROJECTS"
              # -- Only for testing 
              MODIFIED_PROJECTS='transfert-passages' 
              IFS=';' read -r -a projectArray <<< "$MODIFIED_PROJECTS"
              for project in "${projectArray[@]}"
              do
                projectName=${project}
                echo "##vso[task.setvariable variable=${projectName}Changed;isOutput=true]true"
              done
            displayName: 'Get the modified projects'
            name: IdentifyChangesOutput
            env:
              SYSTEM_ACCESSTOKEN: $(System.AccessToken)

  - stage: Build
    displayName: 'Build Projects'
    dependsOn: [Prepare, IdentifyAndSetVariables]
    condition: succeeded()
    jobs:
      - job: DeployInfoSecur
        condition: eq(stageDependencies.IdentifyAndSetVariables.IdentifyChanges.outputs['IdentifyChangesOutput.info-securChanged'], 'true')
        pool:
          vmImage: 'ubuntu-latest'
        steps:
          - template: info-secur-build-deploy.yml

      - job: DeployGestionAdresses
        condition: eq(stageDependencies.IdentifyAndSetVariables.IdentifyChanges.outputs['IdentifyChangesOutput.gestion-adressesChanged'], 'true')
        pool:
          vmImage: 'ubuntu-latest'
        steps:
          - script: echo "Deploying Gestion-Adresses..."
          - template: gestion-adresses-build-deploy.yml

      - job: DeployTransfertPassages
        condition: eq(stageDependencies.IdentifyAndSetVariables.IdentifyChanges.outputs['IdentifyChangesOutput.transfert-passagesChanged'], 'true')
        pool:
          vmImage: 'ubuntu-latest'
        steps:
          - template: transfert-passages-build-deploy.yml
      - job: DeployGestionDemandes
        condition: eq(stageDependencies.IdentifyAndSetVariables.IdentifyChanges.outputs['IdentifyChangesOutput.gestion-demandesChanged'], 'true')
        pool:
          vmImage: 'ubuntu-latest'
        steps:
          - template: transfert-passages-build-deploy.yml

трансферт-прохождение-build-deploy.yml

parameters:
  - name: projectName
    type: string
    default: 'transfert-passages'
  - name: appLocation
    type: string
    default: apps/frontend/transfert-passages
  - name: azureSubscription
    type: string
    default: ''
  - name: webAppName
    type: string
    default: 'Transfert-Passages'

steps:
  - checkout: self
    submodules: true
  - task: NodeTool@0
    inputs:
      versionSpec: '20.x'
    displayName: 'Install Node.js'
  - script: |
      curl -L https://unpkg.com/@pnpm/self-installer | node
    displayName: 'Install pnpm'
  - script: |
      echo $(TRANSFERT_PASSAGES_API_SPA) > apps/backend/nodejs/api-transfert-passages/.env
      echo $(TRANSFERT_PASSAGES_API_LOGS) >> apps/backend/nodejs/api-transfert-passages/.env
      echo "node-linker=hoisted" > .npmrc
      echo "symlink=false" >> .npmrc
      cat .npmrc
      cat apps/backend/nodejs/api-transfert-passages/.env
      pnpm install
      pnpx prisma generate --schema=apps/backend/nodejs/api-transfert-passages/prisma/schemas/cdv-sbdr021-SPA.prisma
      pnpx prisma generate --schema=apps/backend/nodejs/api-transfert-passages/prisma/schemas/cdv-sbdr015-LOGS.prisma
      pnpm run build --filter ${{ parameters.projectName }}
      mv node_modules apps/frontend/transfert-passages/
    displayName: 'Build Transfert Passages'
  - task: ArchiveFiles@2
    inputs:
      rootFolderOrFile: 'apps/frontend/transfert-passages'
      includeRootFolder: false
      archiveType: 'zip'
      archiveFile: '$(Build.ArtifactStagingDirectory)/${{ parameters.projectName }}.zip'
      replaceExistingArchive: true
    displayName: 'Archive Build Artifacts'
  - upload: $(Build.ArtifactStagingDirectory)/${{ parameters.projectName }}.zip
    artifact: ${{ parameters.projectName }}

Для развертывания я делаю это вручную из меню «Релиз».

Можете ли вы успешно создать и развернуть свое веб-приложение на локальном компьютере?

Ziyang Liu-MSFT 08.03.2024 09:42

Да, это не проблема. Я могу запустить pnpm run build --filter <my-app>, а затем pnpm run start --filter <my-app>, и это работает. локально.

ChangeMyNameForPA 08.03.2024 14:58

Вы можете попробовать развернуть свое веб-приложение на локальном компьютере с помощью Azure CLI . Если это работает, установите автономный агент на своем локальном компьютере и используйте его для запуска своего конвейера. Обязательно используйте одну и ту же команду Azure CLI для развертывания приложения в конвейере.

Ziyang Liu-MSFT 19.03.2024 09:38
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
3
438
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Для успешного развертывания репозитория Turbo выполните следующие действия:

Мое приложение Turbo-repo запускается локально с помощью команды turbo run dev: -

Команды: -

npm install turbo --global
turbo build
turbo run dev

Выход: -

Мой код конвейера Azure DevOps: -

trigger:
- main

variables:
  environmentName: 'siliconwebapp655'
  vmImageName: 'ubuntu-latest'

stages:
- stage: Build
  displayName: Build stage
  jobs:
  - job: Build
    displayName: Build
    pool:
      vmImage: $(vmImageName)

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

    - script: npm install turbo --global
      displayName: 'Install Turbo globally'
    - script: npm install
      displayName: 'Install all packages'

    - script: |
        turbo build
      displayName: 'Build application with Turbo'

    - task: ArchiveFiles@2
      displayName: 'Archive files'
      inputs:
        rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
        includeRootFolder: false
        archiveType: zip
        archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
        replaceExistingArchive: true

    - upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
      artifact: drop

- stage: Deploy
  displayName: Deploy stage
  dependsOn: Build
  condition: succeeded()
  jobs:
  - deployment: Deploy
    displayName: Deploy
    environment: $(environmentName)
    pool:
      vmImage: $(vmImageName)
    strategy:
      runOnce:
        deploy:
          steps:
          - task: NodeTool@0
            inputs:
              versionSpec: '18.x'
            displayName: 'Install Node.js for deployment'

          - script: npm install turbo --global
            displayName: 'Install Turbo globally'

          - task: AzureWebApp@1
            displayName: 'Azure Web App Deploy: $(webAppName)'
            inputs:
              azureSubscription: 'SID subscription (0151c365-f598-44d6-b4fd-e2b6e97cb2a7)'
              appType: 'webAppLinux'
              appName: 'siliconwebapp542'
              package: '$(Pipeline.Workspace)/drop/$(Build.BuildId).zip'
              runtimeStack: 'NODE|18.10'
              startUpCommand: 'turbo run dev'

Выход:-

Вы можете масштабировать свое веб-приложение до уровня «Стандартный» с уровня «Базовый», чтобы увеличить вычислительный размер и объем памяти вашего веб-приложения: -

Спасибо за ответ, так как он поможет мне понять некоторые детали процесса, но мой вопрос был больше о том, как и что перенести в веб-приложение в Azure для приложения NEXT JS 14. Создать приложение на моем моно не проблема. Прямо сейчас я пытаюсь отправить свой .next в веб-приложение, но зависимости всегда отсутствуют.

ChangeMyNameForPA 11.03.2024 16:32

Теперь мне удается заставить его работать: установить pnpm в моно, затем запустить pnpm build --filter <my-app>, затем создать папку tmp, скопировать мой .next из моно в папку temp, создать package.json со следующей зависимостью, выполните установку npm в этой папке tmp, а затем отправьте этот пакет (папку tmp) в Azure.

ChangeMyNameForPA 11.03.2024 18:08

Окей, выглядит правильно

SiddheshDesai 26.03.2024 06:10
Ответ принят как подходящий

Хорошо. Итак, как мне удалось заставить это работать в моем конвейере:

  1. установка пнпм
  2. pnpm запустить сборку --filter
  3. Я создаю файл tmp и копирую его .next из моно-репозитория.
  4. Я создаю простой package.json, содержащий следующий только как зависимость, в папке temp.
  5. Я перехожу в эту папку
  6. запустить установку npm
  7. Затем я делаю артефакт из этой папки.
  8. отправить его на сервер
steps:
  - checkout: self
    submodules: true
  - task: NodeTool@0
    inputs:
      versionSpec: '20.x'
    displayName: 'Install Node.js'

  - script: curl -L https://unpkg.com/@pnpm/self-installer | node
    displayName: 'Install pnpm'

  - script: |
      export NEXT_PUBLIC_API_USERNAME=$(NEXT_PUBLIC_API_USERNAME)
      export NEXT_PUBLIC_API_PASSWORD=$(NEXT_PUBLIC_API_PASSWORD)
      export NEXT_PUBLIC_APP_AAD_APP_API_URI=$(NEXT_PUBLIC_APP_AAD_APP_API_URI)
      export NEXT_PUBLIC_JWT_TOKEN=$(NEXT_PUBLIC_JWT_TOKEN)
    displayName: 'Set environment variables'

  - script: |
      echo $(apiSPAConnectionString) > $(apiBackendLocation)/.env
      echo $(apiLOGSConnectionString) >> $(apiBackendLocation)/.env
    displayName: 'Set environment variables for Prisma'

  - script: |
      pnpm install
      pnpm run prisma:generate:all --filter api-$(projectName)
      pnpm run build --filter $(projectName)
    displayName: 'Build Transfert Passages'

  - script: |
      mkdir -p $(tempFolder)
      mv $(packageJSONLocation)package.json $(tempFolder)
      mv $(appLocation)/.next $(tempFolder)
      cd $(tempFolder)
      npm install
    displayName: 'Building new dependencies'
  - task: ArchiveFiles@2
    inputs:
      rootFolderOrFile: $(tempFolder)
      includeRootFolder: false
      archiveType: 'zip'
      archiveFile: '$(Build.ArtifactStagingDirectory)/$(projectName).zip'
      replaceExistingArchive: true
    displayName: 'Archive Build Artifacts'
  - upload: $(Build.ArtifactStagingDirectory)/$(projectName).zip
    artifact: $(projectName)

Надеюсь, это может помочь кому-то.

Другие вопросы по теме

Gunicorn Worker не загружается в веб-приложении Azure для Linux — ModuleNotFoundError
Почему я получаю ECONNRESET, если не отменить его и сразу после этого не вызвать службу API Azure (APIM)?
У меня возникла проблема с публикацией веб-приложения ASP.NET Core MVC в Azure
Не удалось развернуть функции Azure (Python) с помощью Bicep: «Ошибка: LinuxFxVersion имеет недопустимое значение»
Процесс узла блокирует файл в созданной папке .prisma, предотвращая последующие сборки в конвейере Azure
Почему в отчете об устойчивости службы приложений Azure неправильно указано, что упреждающее автоматическое восстановление отключено
Веб-приложение Azure auth_settings_v2 не поддерживается
Приложение-функция Azure с триггером HTTP для возврата сообщения, но продолжения работы над еще некоторыми задачами
Страница отображается пустой после обновления Веб-приложение React Службы Azure
Ошибка приложения после развертывания React в службе Azure