From acafc1fb9eaaf29798c8f4747eec4bc3f55269fc Mon Sep 17 00:00:00 2001 From: piro-hiroki Date: Mon, 16 Oct 2023 01:31:33 +0900 Subject: [PATCH 1/2] i18n(ja): Add new translation --- .../docs/ja/guides/deploy/cloudflare.mdx | 138 ++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 src/content/docs/ja/guides/deploy/cloudflare.mdx diff --git a/src/content/docs/ja/guides/deploy/cloudflare.mdx b/src/content/docs/ja/guides/deploy/cloudflare.mdx new file mode 100644 index 0000000000000..3546b0646b4f5 --- /dev/null +++ b/src/content/docs/ja/guides/deploy/cloudflare.mdx @@ -0,0 +1,138 @@ +--- +title: AstroサイトをCloudflare Pagesにデプロイする +description: Cloudflare Pagesを使用してAstroサイトをデプロイする方法。 +type: deploy +i18nReady: true +--- + +[Cloudflare Pages](https://pages.cloudflare.com/)は、フロントエンド開発者が静的ウェブサイト(JAMstack)やSSRウェブサイトを共同でデプロイするためのプラットフォームです。 + +このガイドには以下の内容が含まれています。 + +- [Cloudflare Pages ダッシュボードからデプロイする方法](#gitを使ったサイトのデプロイ方法) +- [CloudflareのCLIであるWranglerを使ったデプロイ方法](#wranglerを使ったサイトのデプロイ方法) +- [SSRサイトを `@astrojs/cloudflare` を使ってデプロイする方法](#ssrサイトのデプロイ方法) + +## 前提条件 + +始めるには、以下のものが必要です。 + +- Cloudflareアカウント。まだお持ちでない場合は、無料のCloudflareアカウントを作成できます。 +- アプリのコードが[GitHub](https://github.com/)または[GitLab](https://about.gitlab.com/)リポジトリにプッシュされていること。 + +## Gitを使ったサイトのデプロイ方法 + +1. Cloudflare Pagesで新しいプロジェクトを立ち上げます。 +2. コードをgitリポジトリ（GitHub、GitLab）にプッシュする。 +3. Cloudflare ダッシュボードにログインし、**Account Home** > **Pages**でアカウントを選択します。 +4. **Gitに接続**オプションを選択します。 +5. デプロイしたいgitプロジェクトを選択し、**セットアップの開始**をクリックします。 +6. 以下のビルド設定を使用します。 + + - **フレームワーク・プリセット：** `Astro` + - **ビルドコマンド：** `npm run build` + - **ビルド出力ディレクトリ：** `dist` + +7. **保存してデプロイする**ボタンをクリックします。 + +## Wranglerを使ったサイトのデプロイ方法 + +1. [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/)をインストールする。 +2. `wrangler login`を使ってCloudflareアカウントでWranglerを認証する。 +3. ビルドコマンドを実行する。 +4. npx wrangler pages deploy dist` を使ってデプロイする。 + +```bash +# Wrangler CLI をインストールする +npm install -g wrangler +# CLIからCloudflareアカウントにログインする +wrangler login +# ビルドコマンドを実行する +npm run build +# 新しいデプロイメントを作成する +npx wrangler pages deploy dist +``` + +アセットがアップロードされると、Wranglerはサイトを確認するためのプレビューURLを提供します。Cloudflare Pagesダッシュボードにログインすると、新しいプロジェクトが表示されます。 + +### Wranglerでローカルにプレビューを有効にする + +プレビューを機能させるには、`wrangler` をインストールする必要がある。 + +```bash +pnpm install wrangler --save-dev +``` + +プレビュースクリプトを更新して、Astroの内蔵プレビューコマンドの代わりに `wrangler` を実行することができます。 + + +```json title="package.json" +"preview": "wrangler pages dev ./dist" +``` + +## SSRサイトのデプロイ方法 + +[`astrojs/cloudflare`アダプター](/ja/guides/integrations-guide/cloudflare/)を使用して、Cloudflare PagesにデプロイするためのAstro SSRサイトを構築することができます。 + +以下の手順に従って、アダプタをセットアップしてください。その後、上記のいずれかの方法でデプロイできます。 + +### クイックインストール + +以下の `astro add` コマンドを使用して、AstroプロジェクトにSSRを有効にするCloudflareアダプタを追加します。これにより、アダプタがインストールされ、`astro.config.mjs` ファイルに適切な変更が加えられます。 + +```bash +npx astro add cloudflare +``` + +### 手動インストール + +アダプターを手動でインストールする場合は、以下の2つのステップを実行してください。 + +1. お好みのパッケージマネージャを使用して、`@astrojs/cloudflare` アダプタをプロジェクトの依存関係に追加します。npmを使用しているか、よくわからない場合は、ターミナルでこれを実行します。 + + ```bash + npm install @astrojs/cloudflare + ``` + +2. `astro.config.mjs` ファイルに以下を追加します。 + + ```js title="astro.config.mjs" ins={2, 5-6} + import { defineConfig } from 'astro/config'; + import cloudflare from '@astrojs/cloudflare'; + + export default defineConfig({ + output: 'server', + adapter: cloudflare() + }); + ``` + +### 2つのモード + +現在、[`@astrojs/cloudflare`](https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare#readme)アダプターでPages Functionsを使用する場合、2つのモードがサポートされています。 + +1. **アドバンス**モード： このモードは `dist` 内の `_worker.js` をピックアップする `advanced` モードや、プロジェクトルートにあるfunctionsフォルダからWorkerをコンパイルするディレクトリモードで関数を実行したい場合に使用します。 + + モードが設定されていない場合、デフォルトは `"advanced"` です。 + +2. **ディレクトリ**モード： つまり、アダプタはアプリのクライアントサイド部分を同じようにコンパイルしますが、ワーカースクリプトをプロジェクトルートの `functions` フォルダに移動します。アダプタはそのフォルダに `[[path]].js` を置くだけなので、プラグインやページのミドルウェアを追加して、バージョン管理でチェックすることができます。 + + ```ts title="astro.config.mjs" "directory" + export default defineConfig({ + adapter: cloudflare({ mode: "directory" }), + }); + ``` +### ページ関数の使用 + +[ページ・ファンクション](https://developers.cloudflare.com/pages/platform/functions/)は、サーバーサイドのコードを実行することで、専用のサーバーを実行することなく動的な機能を実現します。 + +始めるには、プロジェクトのルートに `/functions` ディレクトリを作成します。このディレクトリにFunctionsファイルを書くと、あらかじめ指定されたルートにカスタム機能を持ったWorkerが自動的に生成されます。Functionsの書き方については、[Pages Functions documentation](https://developers.cloudflare.com/pages/platform/functions/)を参照してください。 + +📚 [SSR in Astro](/ja/guides/server-side-rendering/)についてもっと読む。 + +## トラブルシューティング + +エラーが発生する場合は、ローカルで使用している `node` のバージョン（`node -v`）が環境変数で指定しているバージョンと一致していることを再確認してください。 + +Cloudflareは[Node v16.13](https://miniflare.dev/get-started/cli#installation)を必要とします。このバージョンはAstroのアウトオブボックス最小値よりも新しいので、少なくともv16.13を使用していることを再確認してください。 + +CloudflareのAuto Minify設定の結果、クライアントサイドのハイドレーションが失敗することがあります。コンソールに `Hydration completed but contains mismatches` と表示されたら、Cloudflare settingsのAuto Minifyを無効にしてください。 From 4058eb9577263bdf10bd7fee7c238b7fb0625761 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Sat, 23 Dec 2023 13:19:45 -0400 Subject: [PATCH 2/2] Apply suggestions from Shinya code review Co-authored-by: Shinya Fujino --- .../docs/ja/guides/deploy/cloudflare.mdx | 58 +++++++++---------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/src/content/docs/ja/guides/deploy/cloudflare.mdx b/src/content/docs/ja/guides/deploy/cloudflare.mdx index 3546b0646b4f5..3230a21c22fad 100644 --- a/src/content/docs/ja/guides/deploy/cloudflare.mdx +++ b/src/content/docs/ja/guides/deploy/cloudflare.mdx @@ -9,9 +9,9 @@ i18nReady: true このガイドには以下の内容が含まれています。 -- [Cloudflare Pages ダッシュボードからデプロイする方法](#gitを使ったサイトのデプロイ方法) +- [Cloudflare Pagesダッシュボードからデプロイする方法](#gitを使ったサイトのデプロイ方法) - [CloudflareのCLIであるWranglerを使ったデプロイ方法](#wranglerを使ったサイトのデプロイ方法) -- [SSRサイトを `@astrojs/cloudflare` を使ってデプロイする方法](#ssrサイトのデプロイ方法) +- [SSRサイトを`@astrojs/cloudflare`を使ってデプロイする方法](#ssrサイトのデプロイ方法) ## 前提条件 @@ -22,14 +22,14 @@ i18nReady: true ## Gitを使ったサイトのデプロイ方法 -1. Cloudflare Pagesで新しいプロジェクトを立ち上げます。 +1. Cloudflare Pagesで新しいプロジェクトを作成します。 2. コードをgitリポジトリ（GitHub、GitLab）にプッシュする。 -3. Cloudflare ダッシュボードにログインし、**Account Home** > **Pages**でアカウントを選択します。 +3. Cloudflareダッシュボードにログインし、**アカウントホーム** > **Pages**で自分のアカウントを選択します。 4. **Gitに接続**オプションを選択します。 5. デプロイしたいgitプロジェクトを選択し、**セットアップの開始**をクリックします。 6. 以下のビルド設定を使用します。 - - **フレームワーク・プリセット：** `Astro` + - **フレームワークプリセット：** `Astro` - **ビルドコマンド：** `npm run build` - **ビルド出力ディレクトリ：** `dist` @@ -37,19 +37,19 @@ i18nReady: true ## Wranglerを使ったサイトのデプロイ方法 -1. [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/)をインストールする。 -2. `wrangler login`を使ってCloudflareアカウントでWranglerを認証する。 -3. ビルドコマンドを実行する。 -4. npx wrangler pages deploy dist` を使ってデプロイする。 +1. [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/)をインストールします。 +2. `wrangler login`を使ってCloudflareアカウントでWranglerを認証します。 +3. ビルドコマンドを実行します。 +4. `npx wrangler pages deploy dist` を使ってデプロイします。 ```bash -# Wrangler CLI をインストールする +# Wrangler CLI をインストールします npm install -g wrangler -# CLIからCloudflareアカウントにログインする +# CLIからCloudflareアカウントにログインします wrangler login -# ビルドコマンドを実行する +# ビルドコマンドを実行します npm run build -# 新しいデプロイメントを作成する +# 新しいデプロイメントを作成します npx wrangler pages deploy dist ``` @@ -57,13 +57,13 @@ npx wrangler pages deploy dist ### Wranglerでローカルにプレビューを有効にする -プレビューを機能させるには、`wrangler` をインストールする必要がある。 +プレビューを機能させるには、`wrangler`をインストールする必要があります。 ```bash -pnpm install wrangler --save-dev +pnpm add wrangler --save-dev ``` -プレビュースクリプトを更新して、Astroの内蔵プレビューコマンドの代わりに `wrangler` を実行することができます。 +これにより、プレビュースクリプトを更新して、Astro組み込みのプレビューコマンドの代わりに`wrangler`を実行できるようになりました。 ```json title="package.json" @@ -78,7 +78,7 @@ pnpm install wrangler --save-dev ### クイックインストール -以下の `astro add` コマンドを使用して、AstroプロジェクトにSSRを有効にするCloudflareアダプタを追加します。これにより、アダプタがインストールされ、`astro.config.mjs` ファイルに適切な変更が加えられます。 +以下の`astro add`コマンドを使用して、AstroプロジェクトにSSRを有効にするCloudflareアダプタを追加します。これにより、アダプタがインストールされ、`astro.config.mjs` ファイルに適切な変更が加えられます。 ```bash npx astro add cloudflare @@ -88,13 +88,13 @@ npx astro add cloudflare アダプターを手動でインストールする場合は、以下の2つのステップを実行してください。 -1. お好みのパッケージマネージャを使用して、`@astrojs/cloudflare` アダプタをプロジェクトの依存関係に追加します。npmを使用しているか、よくわからない場合は、ターミナルでこれを実行します。 +1. お好みのパッケージマネージャを使用して、`@astrojs/cloudflare`アダプタをプロジェクトの依存関係に追加します。npmを使用しているか、よくわからない場合は、ターミナルで以下を実行します。 ```bash npm install @astrojs/cloudflare ``` -2. `astro.config.mjs` ファイルに以下を追加します。 +2. `astro.config.mjs`ファイルに以下を追加します。 ```js title="astro.config.mjs" ins={2, 5-6} import { defineConfig } from 'astro/config'; @@ -110,29 +110,29 @@ npx astro add cloudflare 現在、[`@astrojs/cloudflare`](https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare#readme)アダプターでPages Functionsを使用する場合、2つのモードがサポートされています。 -1. **アドバンス**モード： このモードは `dist` 内の `_worker.js` をピックアップする `advanced` モードや、プロジェクトルートにあるfunctionsフォルダからWorkerをコンパイルするディレクトリモードで関数を実行したい場合に使用します。 +1. **アドバンス**モード： このモードは`dist`内の`_worker.js`をピックアップする`advanced`モードや、プロジェクトルートにあるfunctionsフォルダからWorkerをコンパイルするディレクトリモードで関数を実行したい場合に使用します。 - モードが設定されていない場合、デフォルトは `"advanced"` です。 + モードが設定されていない場合、デフォルトは`"advanced"`です。 -2. **ディレクトリ**モード： つまり、アダプタはアプリのクライアントサイド部分を同じようにコンパイルしますが、ワーカースクリプトをプロジェクトルートの `functions` フォルダに移動します。アダプタはそのフォルダに `[[path]].js` を置くだけなので、プラグインやページのミドルウェアを追加して、バージョン管理でチェックすることができます。 +2. **ディレクトリ**モード： 関数を`directory`モードで実行したい場合にこのモードを使用します。つまり、アダプタはアプリのクライアントサイド部分を同じようにコンパイルしますが、ワーカースクリプトをプロジェクトルートの`functions`フォルダに移動します。アダプタはそのフォルダに`[[path]].js`を置くだけなので、プラグインやページのミドルウェアを追加して、バージョン管理でチェックすることができます。 ```ts title="astro.config.mjs" "directory" export default defineConfig({ adapter: cloudflare({ mode: "directory" }), }); ``` -### ページ関数の使用 +### Pages Functionsの使用 -[ページ・ファンクション](https://developers.cloudflare.com/pages/platform/functions/)は、サーバーサイドのコードを実行することで、専用のサーバーを実行することなく動的な機能を実現します。 +[Pages Functions](https://developers.cloudflare.com/pages/platform/functions/)により、専用のサーバーを実行することなしに、サーバーサイドのコードを実行して動的な機能を実現できます。 -始めるには、プロジェクトのルートに `/functions` ディレクトリを作成します。このディレクトリにFunctionsファイルを書くと、あらかじめ指定されたルートにカスタム機能を持ったWorkerが自動的に生成されます。Functionsの書き方については、[Pages Functions documentation](https://developers.cloudflare.com/pages/platform/functions/)を参照してください。 +使い始めるには、プロジェクトのルートに`/functions`ディレクトリを作成します。このディレクトリにPages Functionsのファイルを作成すると、指定されたルートにカスタム機能を持ったWorkerが自動的に生成されます。Functionsの書き方については、[Pages Functionsのドキュメント](https://developers.cloudflare.com/pages/platform/functions/)を参照してください。 -📚 [SSR in Astro](/ja/guides/server-side-rendering/)についてもっと読む。 +📚 [AstroでのSSR](/ja/guides/server-side-rendering/)についてもっと読む。 ## トラブルシューティング -エラーが発生する場合は、ローカルで使用している `node` のバージョン（`node -v`）が環境変数で指定しているバージョンと一致していることを再確認してください。 +エラーが発生する場合は、ローカルで使用している`node`のバージョン（`node -v`）が環境変数で指定しているバージョンと一致しているかどうかを再確認してください。 -Cloudflareは[Node v16.13](https://miniflare.dev/get-started/cli#installation)を必要とします。このバージョンはAstroのアウトオブボックス最小値よりも新しいので、少なくともv16.13を使用していることを再確認してください。 +Cloudflareは[Node v16.13](https://miniflare.dev/get-started/cli#installation)を必要とします。このバージョンはAstroが必要とする最小値よりも新しいので、少なくともv16.13を使用していることを再確認してください。 -CloudflareのAuto Minify設定の結果、クライアントサイドのハイドレーションが失敗することがあります。コンソールに `Hydration completed but contains mismatches` と表示されたら、Cloudflare settingsのAuto Minifyを無効にしてください。 +CloudflareのAuto Minify設定の結果、クライアントサイドのハイドレーションが失敗することがあります。コンソールに`Hydration completed but contains mismatches`と表示されたら、Cloudflare settingsのAuto Minifyを無効にしてください。