mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4
150 文字
1 分
GitHub ActionsでAngularページを自動デプロイする
2024-11-04

angular.json#

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

デフォルトで静的ページが browser 配下に生成される場合は、次のプロパティを変更または追加してください。

"baseHref": "/browser/",

angular-cli-ghpages をインストールします。

ng add angular-cli-ghpages

.github/workflows 配下にワークフローを作成#

name: Deploy to GitHub Pages
on:
push:
branches:
- master # または監視するブランチ名
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '20' # プロジェクトの要件に応じて Node.js のバージョンを変更してください
- name: Install dependencies
run: npm install
- name: Build project
run: npm run build
- name: Deploy to GitHub Pages
uses: JamesIves/github-pages-deploy-action@v4
with:
folder: dist/my-angular-project/browser # 実際の出力パスに合わせて指定してください
token: ${{ secrets.TOKEN }}
env:
GITHUB_TOKEN: ${{ secrets.TOKEN }}

GitHub でリポジトリへのアクセスに使用する token を生成し、Actions の環境変数に追加してください。

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

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

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

共有

この記事が役に立ったときは、ぜひ他の人に共有してください!

GitHub ActionsでAngularページを自動デプロイする
https://dreaife.tokyo/jp/posts/github-action-angular/
著者
dreaife
公開日
2024-11-04
ライセンス
CC BY-NC-SA 4.0

一部の情報は古い可能性があります

目次