github action自动部署angular页面

83 字

1 分钟

github action自动部署angular页面

2024-11-04

infra

github-action

angular.json#

projects > {your-project-name} > architect > build > options > outputPath

如果默认生成静态网页在browser下，记得修改/添加属性

1
"baseHref": "/browser/",

安装angular-cli-ghpages

1
ng add angular-cli-ghpages

.github/workflows下创建工作流#

1
name: Deploy to GitHub Pages
2

3
on:
4
  push:
5
    branches:
6
      - master  # 或者你要监控的分支名称
7

8
jobs:
9
  build-and-deploy:
10
    runs-on: ubuntu-latest
11
    steps:
12
      - name: Checkout code
13
        uses: actions/checkout@v3
14

15
      - name: Setup Node.js
16
        uses: actions/setup-node@v3
17
        with:
18
          node-version: '20'  # 请根据项目需求修改 Node.js 版本
19

20
      - name: Install dependencies
21
        run: npm install
22

23
      - name: Build project
24
        run: npm run build
25

26
      - name: Deploy to GitHub Pages
27
        uses: JamesIves/github-pages-deploy-action@v4
28
        with:
29
          folder: dist/my-angular-project/browser  # 请根据实际输出路径填写
30
          token: ${{ secrets.TOKEN }}
31

32
env:
33
  GITHUB_TOKEN: ${{ secrets.TOKEN }}

记得在github中生成token用于访问repo，并在action的环境变量中添加。

https://github.com/${your_name}/${your_repo}/settings/secrets/actions

推送到监控的分支#

修改github page配置，设置page分支为gh-pages

60 字

1 分钟

Automatically Deploy Angular Pages with GitHub Actions

2024-11-04

infra

github-action

angular.json#

projects > {your-project-name} > architect > build > options > outputPath

If the default static webpage is generated under the browser, remember to modify/add the property

1
"baseHref": "/browser/",

Install angular-cli-ghpages

1
ng add angular-cli-ghpages

Create a workflow in .github/workflows#

1
name: Deploy to GitHub Pages
2

3
on:
4
  push:
5
    branches:
6
      - master  # 或者你要监控的分支名称
7

8
jobs:
9
  build-and-deploy:
10
    runs-on: ubuntu-latest
11
    steps:
12
      - name: Checkout code
13
        uses: actions/checkout@v3
14

15
      - name: Setup Node.js
16
        uses: actions/setup-node@v3
17
        with:
18
          node-version: '20'  # 请根据项目需求修改 Node.js 版本
19

20
      - name: Install dependencies
21
        run: npm install
22

23
      - name: Build project
24
        run: npm run build
25

26
      - name: Deploy to GitHub Pages
27
        uses: JamesIves/github-pages-deploy-action@v4
28
        with:
29
          folder: dist/my-angular-project/browser  # 请根据实际输出路径填写
30
          token: ${{ secrets.TOKEN }}
31

32
env:
33
  GITHUB_TOKEN: ${{ secrets.TOKEN }}

Remember to generate a token on GitHub to access the repo, and add it to the action’s environment variables.

https://github.com/${your_name}/${your_repo}/settings/secrets/actions

Push to the monitored branch#

Modify the GitHub Pages configuration, and set the Pages branch to gh-pages

164 字

1 分钟

GitHub ActionsでAngularページを自動デプロイ

2024-11-04

infra

github-action

angular.json#

projects > {your-project-name} > architect > build > options > outputPath

デフォルトで静的ウェブページがブラウザで生成される場合は、属性を変更/追加してください

1
"baseHref": "/browser/",

angular-cli-ghpages のインストール

1
ng add angular-cli-ghpages

.github/workflowsでワークフローを作成#

1
name: Deploy to GitHub Pages
2

3
on:
4
  push:
5
    branches:
6
      - master  # 或者你要监控的分支名称
7

8
jobs:
9
  build-and-deploy:
10
    runs-on: ubuntu-latest
11
    steps:
12
      - name: Checkout code
13
        uses: actions/checkout@v3
14

15
      - name: Setup Node.js
16
        uses: actions/setup-node@v3
17
        with:
18
          node-version: '20'  # 请根据项目需求修改 Node.js 版本
19

20
      - name: Install dependencies
21
        run: npm install
22

23
      - name: Build project
24
        run: npm run build
25

26
      - name: Deploy to GitHub Pages
27
        uses: JamesIves/github-pages-deploy-action@v4
28
        with:
29
          folder: dist/my-angular-project/browser  # 请根据实际输出路径填写
30
          token: ${{ secrets.TOKEN }}
31

32
env:
33
  GITHUB_TOKEN: ${{ secrets.TOKEN }}

GitHubでトークンを生成してください（https://github.com/settings/tokens）リポジトリへアクセスするために使用します。また、Actions の環境変数に追加してください。

https://github.com/${your_name}/${your_repo}/settings/secrets/actions

監視対象のブランチへプッシュ#

GitHub Pages の設定を変更し、ページ用のブランチを gh-pages に設定します。

github action自动部署angular页面

https://dreaife.tokyo/posts/github-action-angular/

作者

dreaife

发布于

2024-11-04

许可协议

CC BY-NC-SA 4.0

部分信息可能已经过时

angular初步使用

svn使用

dreaife的休憩小栈

angular.json#

.github/workflows下创建工作流#

推送到监控的分支#

angular.json#

Create a workflow in .github/workflows#

Push to the monitored branch#

angular.json#

.github/workflowsでワークフローを作成#

監視対象のブランチへプッシュ#