问题

I'm trying to deploy my simple Angular project in GitHub Actions. I tried something like this:

Script

"deploy": "ng build --configuration=production --base-href=/angular-crud/"

Deploy.yml

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v2.5.0
        with:
          node-version: 16

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run-script deploy

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

angular.json

"outputPath": "dist"

The problem, as we can see here, returns a 404:

Web

https://elhombresinnombre.github.io/angular-crud/

So, does anyone see what is wrong?

"deploy": "ng build --configuration=production --base-href=/angular-crud/"

name: Deploy to GitHub Pages
    
    on:
      push:
        branches:
          - main
    
    jobs:
      deploy:
        runs-on: ubuntu-latest
    
        steps:
          - name: Checkout repository
            uses: actions/checkout@v3
    
          - name: Set up Node.js
            uses: actions/setup-node@v2.5.0
            with:
              node-version: 16
    
          - name: Install dependencies
            run: npm ci
    
          - name: Build
            run: npm run-script deploy
    
          - name: Deploy to GitHub Pages
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: ./dist

"outputPath": "dist",

答案1

得分: 0

以下是翻译好的部分：

"What looks wrong to me, is the URL you're requesting to visit the site:"
"对我来说看起来有问题的是你请求访问的网址是："

"The correct URL to request the site is:"
"请求该网站的正确网址是："

"Because as the deployment revision of the gh-pages branch shows, the index.html file is placed in that subfolder."
"因为正如gh-pages分支的部署修订所显示的那样，index.html文件位于该子文件夹中。"

"The deployment revision is easy to find as there is only a single deployment so far."
"由于迄今为止只有一个部署，因此很容易找到部署修订。"

"What is in effect here?"
"这里实际上是什么？"

"Mind the --base-href option argument for the ng build command in the deploy npm script:"
"注意在deploy npm脚本中的ng build命令的--base-href选项参数："

"together with the angular.json#/projects/apollo-crud/architect/build/options/outputPath:"
"以及angular.json#/projects/apollo-crud/architect/build/options/outputPath："

"and the publish_dir setting in the workflow:"
"以及工作流程中的publish_dir设置："

"and compare them against the Microsoft Github Pages configuration of your repository (it also has a directory option)."
"并将它们与您的存储库的Microsoft Github Pages配置进行比较（它也有一个目录选项）。"

"E.g. you may want to use the default output directory of the Ansible project (dist only) to lower the barrier of entry as it would spare the apollo-crud subdirectory and looks matching with the publish_dir input parameter of the peaceiris/actions-gh-pages@v3 action. But that is entirely up to you, AFAIK all the utilities in the belt support diverse path layouts for Microsoft Github Pages for your Ansible projects, and there are more than one way to configure them so that the orchestra plays the same song."
"例如，您可以选择使用Ansible项目的默认输出目录（仅限dist）来降低入门难度，因为它将省去apollo-crud子目录并与peaceiris/actions-gh-pages@v3操作的publish_dir输入参数匹配。但这完全取决于您，据我所知，腰带中的所有实用程序都支持Microsoft Github Pages的各种路径布局，适用于您的Ansible项目，有多种配置方法可以使它们演奏相同的歌曲。"

"deploy": "ng build --configuration=production --base-href=/angular-crud/"

            "outputPath": "dist/apollo-crud",

          - name: Deploy to GitHub Pages
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: ./dist