164 文字
1 分
GitHub ActionsでAngularページを自動デプロイ
angular.json
projects > {your-project-name} > architect > build > options > outputPath
デフォルトで静的ウェブページがブラウザで生成される場合は、属性を変更/追加してください
"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でトークンを生成してください（https://github.com/settings/tokens）リポジトリへアクセスするために使用します。また、Actions の環境変数に追加してください。
https://github.com/${your_name}/${your_repo}/settings/secrets/actions
監視対象のブランチへプッシュ
GitHub Pages の設定を変更し、ページ用のブランチを gh-pages に設定します。
共有
この記事が役に立ったときは、ぜひ他の人に共有してください!
GitHub ActionsでAngularページを自動デプロイ
https://dreaife.tokyo/jp/posts/github-action-angular/ 一部の情報は古い可能性があります
関連した投稿 スマート
1
Angularベースのアニメ展示サイト＋ログイン・登録（Cognito）
FRONTEND このプロジェクトは、Bangumi上のアニメを表示・検索するためのAngularベースのWebアプリで、ユーザー認証にCognitoを使用しています。GitHub Actionsによる自動ビルド・デプロイを通じて、GitHub Pagesへの自動デプロイにも対応しています。主な技術スタックはAngular 16、TypeScript、HTML、CSSで、ログイン、登録、検索、アニメカレンダーなどの機能を備えています。
2
ブログ移行-Mizuki設定記録
infra notionNextからmizukiへの移行過程の記録、主な理由はnotionNextの制限です。mizukiを選んだ理由は、軽量で機能のバランスが良く、日記とプロジェクトの表示をサポートしているからです。設定プロセスは簡単で、内容はmdとtsファイルによって制御され、同時にbangumi APIとの接続も実現しています。CIを用いてNotionのコンテンツを同期する計画を立て、多言語対応を進め、画像リンクの有効期限切れの問題を解決しました。
3
GitHubに大容量ファイルをアップロードする
infra GitHubに大きなファイルをアップロードするには、Git Large File Storage（LFS）をインストールし、ローカルGitリポジトリで設定する必要があります。具体的には、LFSの導入、大容量ファイルを追跡するポインタ設定、対応コマンドによるアップロードを行います。これらの手順を完了すれば、大容量ファイルをGitHubへ正常にアップロードできます。
4
SVNの使い方
infra SVNは細かなファイル権限管理をサポートする集中型のファイル管理（バージョン管理）ツールです。利用前にはリポジトリ作成が必要で、TortoiseSVNのようなGUIクライアントの利用が推奨されます。代表的なコマンドにはcheckout、commit、update、add、delete、log、diff、revert、ignoreがあり、さらにブランチ管理やヘルプコマンドについても扱います。コマンドの具体的な使い方が詳しく整理されており、素早く学習を始めるのに適しています。
5
Docker入門
infra Dockerは、アプリケーションと依存関係を分離されたコンテナにパッケージ化することで、環境差異や依存関係の衝突を避け、マイクロサービスのデプロイ問題を解決する技術です。仮想マシンと比べて起動が速く、リソース使用量も少ないのが特徴です。Dockerのアーキテクチャはイメージとコンテナで構成され、Docker Hubでイメージを共有・取得できます。基本操作にはイメージ/コンテナの作成・管理や、データ永続化とホスト分離のためのボリューム利用が含まれます。Docker Composeを使うと分散アプリケーションのデプロイを簡素化できます。