使用Azure Pipelines部署Remix应用至Azure App Service失败

问题场景 #

基于Remix App Server模板构建的Remix应用，通过Azure Pipelines部署到Azure App Service时，执行build命令生成的.cache文件夹在打包复制过程中触发权限错误，目标是部署完成后运行npm run start启动应用。

报错内容 #

EACCES: permission denied, copyfile '.cache/remix/builds/[哈希值]/server/index.js'

原Azure Pipelines配置 #

# Node.js Express Web App to Linux on Azure
# Build a Node.js Express app and deploy it to Azure as a Linux web app.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- development

variables:

  # Azure Resource Manager connection created during pipeline creation
  azureSubscription: <subscription_id>

  # Web app name
  webAppName: 'remix'

  # Environment name
  environmentName: 'remix-app'

  # Agent VM image name
  vmImageName: 'ubuntu-latest'

  # PNPM Cache Location
  pnpm_config_cache: $(Pipeline.Workspace)/.pnpm-store

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'

    - task: Cache@2
      inputs:
        key: 'pnpm | "$(Agent.OS)" | pnpm-lock.yaml'
        path: $(pnpm_config_cache)
      displayName: Cache pnpm

    - script: |
        corepack enable
        corepack prepare pnpm@latest-8 --activate
        pnpm config set store-dir $(pnpm_config_cache)
      displayName: "Setup pnpm"

    - script: |
        pnpm install
        pnpm run build
      displayName: 'pnpm install, build'

    - 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: AzureWebApp@1
            displayName: 'Azure Web App Deploy: remix'
            inputs:
              azureSubscription: $(azureSubscription)
              appType: webAppLinux
              appName: $(webAppName)
              runtimeStack: 'NODE|18'
              package: $(Pipeline.Workspace)/drop/$(Build.BuildId).zip
              startUpCommand: 'npm run start'

解决方案 #

方案1：打包时排除.cache目录（推荐） #

Remix在执行npm run start时会自动管理缓存，无需提前打包.cache文件夹。修改ArchiveFiles@2任务，添加排除规则：

- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
    includeRootFolder: false
    archiveType: zip
    archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    replaceExistingArchive: true
    excludeFiles: '.cache/**' # 添加这一行排除缓存目录

方案2：修改.cache目录权限（若需保留该目录） #

如果确实需要打包.cache，在构建完成后添加权限修改脚本：

- script: |
    pnpm install
    pnpm run build
    sudo chmod -R 777 .cache # 添加权限修改命令
  displayName: 'pnpm install, build and fix cache permissions'

额外优化：统一使用pnpm启动应用 #

构建阶段使用pnpm，部署时保持一致可避免npm重新安装依赖的问题，修改启动命令：

startUpCommand: 'pnpm run start'

内容的提问来源于stack exchange，提问作者arunmmanoharan