Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Angular

最終更新 Markdown で表示Agent セットアップ

Angular ↗ は、リアクティブで強力なフロントエンドアプリケーションを作る、広く使われているフレームワークです。

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

create-cloudflare CLI（C3）で新しいプロジェクトを作成する

create-cloudflare ↗ CLI（C3）で新しいプロジェクトをセットアップします。C3 は新しいプロジェクトディレクトリを作成し、Angular の公式セットアップツールを起動し、すぐにデプロイするかどうかを選べます。

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

npm create cloudflare@latest -- my-angular-app --framework=angular --platform=pages

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

Git 連携

Direct Upload によるデプロイに加えて、Git 連携 でもプロジェクトをデプロイできます。Git 連携では、GitHub または GitLab のリポジトリを Pages アプリケーションに接続し、新しいコミットがプッシュされるたびに Pages アプリケーションを自動でビルドしてデプロイします。

セットアップには Git ↗ の基本的な理解が必要です。Git を初めて使う場合は、ローカルマシンへの Git の導入について、GitHub の Git handbook の要約 ↗ を参照してください。

GitHub リポジトリを作成する

repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。新しいリポジトリを作成したあと、作成したプロジェクトディレクトリに移動し、次のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub にプッシュする準備をします。


# Skip the following three commands if you have built your application
# using C3 or already committed your changes
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 プロジェクトを作成する

サイトを Pages にデプロイするには、次の手順を実行します。

  1. Cloudflare ダッシュボードで Workers & Pages ページを開きます。

    Workers & Pages を開く ↗

  2. Create application を選びます。

  3. Pages タブを選びます。

  4. Import an existing Git repository を選びます。

  5. 作成した新しい GitHub リポジトリを選び、Begin setup を選びます。

  6. Set up builds and deployments セクションで、次の情報を入力します。

設定項目値
本番ブランチmain
ビルドコマンドnpm run build
ビルドディレクトリdist/cloudflare

必要に応じて Project name を変更できます。デフォルトは GitHub リポジトリ名ですが、一致させる必要はありません。Project name の値が *.pages.dev サブドメインになります。

  1. 設定が終わったら、Save and Deploy を選択します。

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

あわせて プレビューデプロイ も使えます。プルリクエストに対して同じビルドとデプロイを繰り返します。本番に出す前に、実際の URL で変更を確認できます。

さらに学ぶ

このガイドを完了すると、Angular サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。

役に立ちましたか？