コンテンツにスキップ

Angular

Angular ↗ は、反応的で強力なフロントエンドアプリケーションを構築するための非常に人気のあるフレームワークです。

このガイドでは、新しいAngularアプリケーションを作成し、Cloudflare Pagesを使用してデプロイします。

create-cloudflare CLI (C3) を使用して新しいプロジェクトを作成する

create-cloudflare ↗ CLI (C3) を使用して新しいプロジェクトをセットアップします。C3は新しいプロジェクトディレクトリを作成し、Angularの公式セットアップツールを起動し、即座にデプロイするオプションを提供します。

create-cloudflareを使用して新しいAngularプロジェクトを作成するには、次のコマンドを実行します：

Terminal window
npm create cloudflare@latest -- my-angular-app --framework=angular

create-cloudflareは、Wrangler CLIやCloudflare Pagesアダプターを含む依存関係をインストールし、セットアップに関する質問をします。

Git integration

In addition to Direct Upload deployments, you can deploy projects via Git integration. Git integration allows you to connect a GitHub or GitLab repository to your Pages application and have your Pages application automatically built and deployed after each new commit is pushed to it.

Setup requires a basic understanding of Git ↗. If you are new to Git, refer to GitHub’s summarized Git handbook ↗ on how to set up Git on your local machine.

GitHubリポジトリを作成する

Create a new GitHub repository by visiting repo.new ↗. After creating a new repository, go to your newly created project directory to prepare and push your local application to GitHub by running the following commands in your terminal:


Terminal window
# C3を使用してアプリケーションを構築した場合や
# すでに変更をコミットした場合は、以下の3つのコマンドをスキップしてください
git init
git add .
git commit -m "Initial commit"


git branch -M main
git remote add origin https://github.com/<YOUR_GH_USERNAME>/<REPOSITORY_NAME>
git push -u origin main

Pagesプロジェクトを作成する

  1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
  2. Workers & Pages > Create application > Pages > Connect to Gitに移動し、新しいPagesプロジェクトを作成します。

まだ行っていない場合は、GitHubアカウントへのアクセスを承認するよう求められます。Cloudflareは、ソースからプロジェクトを監視およびデプロイするためにこれが必要です。特定のリポジトリへのアクセスを制限することもできますが、Cloudflare Pagesに追加のリポジトリを追加したい場合は、GitHubの設定 ↗内で手動でこのリストを更新する必要があります。

  1. 作成した新しいGitHubリポジトリを選択し、Set up builds and deploymentsセクションで次の情報を提供します：
Configuration option Value
Production branch main
Build command npm run build
Build directory dist/cloudflare

オプションで、Project nameフィールドをカスタマイズできます。デフォルトではGitHubリポジトリの名前が設定されますが、一致する必要はありません。Project nameの値は、あなたの*.pages.devサブドメインとして割り当てられます。

  1. 設定が完了したら、Save and Deployを選択します。

進行中の最初のデプロイパイプラインを確認します。Pagesはすべての依存関係をインストールし、指定された通りにプロジェクトをビルドします。Cloudflare Pagesは、新しいコミットがプッシュされるたびに自動的にプロジェクトを再ビルドし、デプロイします。

さらに、プレビューのデプロイメントにアクセスでき、これによりプルリクエストのためにビルドとデプロイのプロセスを繰り返します。これにより、変更を本番環境にデプロイする前に、実際のURLでプロジェクトの変更をプレビューできます。

Learn more

By completing this guide, you have successfully deployed your Angular site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings