为什么在通过 github 操作部署 Azure Web 应用程序后，ClientApp/dist 文件夹意外为空？

问题描述 投票：0回答：1

我正在部署与 .Net Core 8.0 网站集成的单页（角度）应用程序。我部署到 Azure Web 应用程序。

部署后，ClientApp/dist 文件夹为空。它应该包含我的角度应用程序中的分发组件。

最后的部署阶段似乎是删除或拒绝 Client/dist 文件夹内容。它仅影响 ClientApp/dist 文件夹。其他文件夹和文件似乎如我所料。

我是否缺少一些控制 Client/dist 文件夹填充的设置/开关/或选项？

git actions yaml 文件粘贴在下方[1]

这篇文章的其余部分记录了为什么我认为......

第一阶段

证据 .Net Core 应用程序抛出异常，指出找不到 index.html 文件。我使用 kudu 查看 wwwroot/ClientApp/dist 文件夹。它是空的。我希望在那里看到 index.html 和其他文件。

我跟踪了index.html整个过程。我假设属于 ClientApp/dist 中的其他文件将遵循相同的路径。

第二阶段

证据我启用了构建和部署过程的详细日志记录。在 dotnet 发布的输出中，我看到它报告创建运行时、主要、polyfils 和样式。我推断它也创建了index.html。

第三阶段

在“上传部署作业的工件”输出中，我看到提到的index.html

证据 在日志中我看到 ##[debug]File:/home/runner/.dotnet/myapp/ClientApp/dist/index.html 使用提供的 searchPath 找到

...然后... ##[debug]/home/runner/.dotnet/myapp/ClientApp/dist/index.html 大小小于 64k。在内存中创建 gzip 文件以减少上传大小 ##[debug]为 /home/runner/.dotnet/myapp/ClientApp/dist/index.html 创建的 gzip 文件有助于减小原始文件的大小。该文件将使用 gzip 上传。

..还有... ##[调试]文件：28/245。 /home/runner/.dotnet/myapp/ClientApp/dist/index.html 花了 68.236 毫秒完成上传

第四阶段

在部署阶段，子阶段“从构建作业下载工件”我看到再次提到index.html

证据在日志输出中我看到...... ##[调试]文件：92/245。 /home/runner/work/[Redacted]/[Redacted]/ClientApp/dist/index.html 花了 263.048 毫秒完成下载。

当我使用 kudo 检查已部署的文件时，最后一条日志行使我期望 index.html 文件显示在 wwwroot/ClientApp/dist 中。

结论

看起来“从构建作业下载工件”阶段已经“丢失”了 ClientApp/dist 目录的全部内容。

仅特定目录 ClientApp/dist 中缺少 AFAICT 文件。还有其他 .html、.js 和 .css 文件已准确到达其预期位置。

这是我第一次使用 Azure，我可能需要手持。

[1] git actions yaml 文件

name: Build and deploy ASP.Net Core app to Azure Web App - develop-redacted

on:
  push:
    branches:
      - develop
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up .NET Core
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: '8.x'
          include-prerelease: true

      - name: Set up node 16.20.2
        uses: actions/setup-node@v4
        with:
            node-version: '16.20.2'

      - name: Build with dotnet
        run: dotnet build --configuration Release

      - name: dotnet publish
        run: dotnet publish ./NetCoreWebsite/NetCoreWebsite.csproj -c Release -o ${{env.DOTNET_ROOT}}/myapp

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: .net-app
          path: ${{env.DOTNET_ROOT}}/myapp

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    permissions:
      id-token: write #This is required for requesting the JWT

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: .net-app
      
      - name: Login to Azure
        uses: azure/login@v1
        with:
          client-id: ${{ secrets.redacted }}
          tenant-id: ${{ secrets.redacted }}
          subscription-id: ${{ secrets.redacted }}

      - name: Deploy to Azure Web App
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'develop-redacted'
          slot-name: 'Production'
          package: .
angular azure azure-web-app-service github-actions
1个回答
0
投票

我是否缺少一些控制 Client/dist 文件夹填充的设置/开关/或选项？

  • 您没有在使用命令中构建
    dist
    文件夹
    npm run build
  • 构建完成后需要上传。
  • 在您的
    .yml
    文件中，您仅选择了节点版本，选择节点后未执行任何操作。

这对我有用。

#我的目录：

Webapp/
│
├── .github/
│   └── workflows/
│       └── main_dotnetwithangualr.yml
│
├── WebApplication2/
|   ├── angular-app/
|   │   ├── src/
|   │   │   └── ...                             
|   │   ├── angular.json
|   │   ├── package.json
|   │   └── ...
│   ├── Controllers/
│   │   └── ...               
│   ├── Models/
│   │   └── ... 
│   ├── Properties/
│   │   └── ...                 
│   ├── Views/
│   │   └── ...                 
│   ├── wwwroot/
│   │   └── ...                
│   ├── appsettings.json
│   ├── Program.cs
│   └── WebApplication2.csproj
│
└── WebApplication2.sln


main_dotnetwithangualr.yml
:

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy ASP.Net Core app to Azure Web App - dotnetwithangualr

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: windows-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up .NET Core
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: '8.x'
          include-prerelease: true

      - name: Set up Node.js version  
        uses: actions/setup-node@v3  
        with:  
          node-version: '18.x'

      - name: npm install, build, and test  
        run: |
          npm install
          npm run build
        working-directory: WebApplication2/angular-app/  # building `dist`, using `package.json` as it is available in "WebApplication2/angular-app/" path I added working directory.

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: angular
          path: ./WebApplication2/angular-app/dist/  # uploading files and folders created inside `dist`

      - name: Build with dotnet
        run: dotnet build --configuration Release

      - name: dotnet publish
        run: dotnet publish -c Release -o ${{env.DOTNET_ROOT}}/myapp

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: .net-app
          path: ${{env.DOTNET_ROOT}}/myapp

  deploy:
    runs-on: windows-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: .net-app
          
      - name: Download artifact from angular build job
        uses: actions/download-artifact@v3
        with:
          name: angular
      
      - name: Deploy to Azure Web App
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'dotnetwithangualr'
          slot-name: 'Production'
          package: .
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_E48F4EC67FB14F22A7CD2D3AA9C7BDF5 }}


OUTPUT
：

dist
在本地：

已在天蓝色上上传文件：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.