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）
PROJECT このプロジェクトは、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
SVNの使い方
infra SVNは細かなファイル権限管理をサポートする集中型のファイル管理（バージョン管理）ツールです。利用前にはリポジトリ作成が必要で、TortoiseSVNのようなGUIクライアントの利用が推奨されます。代表的なコマンドにはcheckout、commit、update、add、delete、log、diff、revert、ignoreがあり、さらにブランチ管理やヘルプコマンドについても扱います。コマンドの具体的な使い方が詳しく整理されており、素早く学習を始めるのに適しています。
4
Docker入門
infra Dockerは、アプリケーションと依存関係を分離されたコンテナにパッケージ化することで、環境差異や依存関係の衝突を避け、マイクロサービスのデプロイ問題を解決する技術です。仮想マシンと比べて起動が速く、リソース使用量も少ないのが特徴です。Dockerのアーキテクチャはイメージとコンテナで構成され、Docker Hubでイメージを共有・取得できます。基本操作にはイメージ/コンテナの作成・管理や、データ永続化とホスト分離のためのボリューム利用が含まれます。Docker Composeを使うと分散アプリケーションのデプロイを簡素化できます。
5
Xでの市場認識に関する個人的なまとめ
market 複雑系とゲーム理論の観点から、市場の機能、感情の再帰性、通貨価値を支えるコンセンサスの内在的な論理を整理し、短期的な変動に惑わされず、市場予想とインフレ波及の仕組みを深く理解できるよう読者を導きます。