150 文字
1 分
GitHub ActionsでAngularページを自動デプロイする
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/ 一部の情報は古い可能性があります
関連した投稿 スマート
1
Angularベースのアニメーション展示サイト+ログイン・ユーザー登録(Cognito)
開拓 Angular 16とAWS CognitoでBangumiのアニメ展示サイトを構築。ログイン・登録、検索、カレンダー表示、GitHub ActionsによるPages配備を扱います。
2
ブログ移行-Mizuki設定記録
開拓 NotionNextからAstro製Mizukiへの移行記録。Bangumi連携、セルフホストCIによるNotion同期、R2での画像永続化、LLMによる多言語記事生成を扱います。
3
SVNの使い方
学び 集中型バージョン管理SVNの入門。リポジトリ作成、TortoiseSVN、checkout、update、commit、diff、revert、ignore、ブランチ操作を整理します。
4
Docker入門
学び Docker入門として、仮想マシンとの違い、イメージとコンテナ、Docker Hub、基本コマンド、永続化ボリューム、Docker Composeを整理します。
5
Dockerを使用してWindows 11でpyspiderを実行する
試行錯誤 Windows 11でpyspiderをDockerまたはDocker Composeから起動し、ローカル依存関係の問題を回避して、localhost:5000のWebUIで動作確認します。





