EdgeOne Pagesに次世代Nextjsプロジェクトを5分でデプロイする：完全ガイド

EdgeOne PagesのデプロイメントがNext.jsフルスタックをサポートしていることをご存知ですか。現在、以下のNext.js機能がサポートされています：

EdgeOne PagesでNext.jsフルスタックプロジェクトをデプロイするために、私たちは3つのデプロイメントオプションを提供しています。

始めるための3つの方法

方法A：EdgeOne Pages Next.jsテンプレートをデプロイする

EdgeOne Pagesテンプレートからのデプロイは、ゼロからNext.jsプロジェクトを構築してデプロイする最も速い方法です。

コンソールで「プロジェクト作成」をクリックし、「テンプレートから開始」を選択できます。ここでは、ニーズに応じてNext.js の基本テンプレートまたはNext.jsをベースにした様々なテーマテンプレートを選択できます。

Pagesはテンプレートを新しいプライベートリポジトリにクローンしてビルドします。ビルドが完了したら、リポジトリからコードをクローンして開

方法B：GitリポジトリからNext.jsプロジェクトをインポートする

EdgeOne Pagesは初めてのユーザーに対して、Gitリポジトリの認証とデプロイを完了するためのわかりやすいステップバイステップのガイダンスを提供しています。

まず、ブラウザでEdgeOne Pagesコンソールにアクセスします。

次に、オンラインリポジトリを選択し、ガイド付きの手順に従って認証を完了します：

Git認証の後、コードリポジトリを選択してデプロイを開始します。この段階で、必要に応じて環境変数を設定することもできます。

ビルドとデプロイが完了したら、「プロジェクト設定」パネルでビルド設定を確認・変更できます。

方法C：EdgeOne CLIを使用した直接アップロードワークフロー

Gitリポジトリに依存せずにデこれにより、IDEから直接プロジェクトをデプロイおよび更新することができ、迅速かつ簡単に行えます。

EdgeOneは機能豊富なCLIを提供しており、アカウントとやり取りすることができ、EdgeOne CLIを通じて直接デプロイできます。具体的な手順は以下の通りです：

1. Next.jsプロジェクトの作成

まず、Next.jsプロジェクトを作成し、プロジェクトディレクトリに移動します。詳細な手順については、Next.jsのドキュメントを参照してください。

npx create-next-app@latest

cd <project>

2. 初期設定

まだインストールしていない場合は、EdgeOne CLIをグローバルにインストールしてください：

npm install -g edgeone

プロジェクトで初めてEdgeOne CLIを使用する場合は、まず「edgeone pages init」を実行してください。

edgeone pages init          # 「グローバル」リージョンを選択

実行後、ログインを求められ、「Edge Functions」と「Node Functions」を作成するかどうか尋ねられます。これらはEdgeOne Pagesフルスタックでサポートされているエッジ関数と集中型Node関数です。ここでバックエンド機能を実装できます。詳細については、関連チュートリアルを参照してください。

プロジェクトでCLIを初めて使用するわけではない場合は、直接ログインできます。

edgeone login          # 「グローバル」リージョンを選択

3. ビルドとデプロイ

私たちは人気のあるほとんどのフレームワークへのサポートを統合しています。「edgeone pages deploy -n <name>」を実行すると、ビルドとデプロイのプロセスが自動的に処理されます。

初回デプロイの場合は、linkコマンドを実行します。プロンプトが表示されたら、<projectName>を入力します。EdgeOne Pagesは自動的に現在のプロジェクトをデプロイします。

edgeone pages link

または、「link <projectName>」を使用して既存のプロジェクトにリンクし、deployコマンドでデプロイはライブプロジェクトを更新します。

edgeone pages link <projectName>

edgeone pages deploy 

EdgeOne CLIの詳細な手順については、チュートリアルローカル開発とデバッグ

プロジェクトの作成方法にかかわらず、EdgeOne CLIを使用してNext.jsプロジェクト内のバックエンドサービス（edge-functionsとnode-functionsを含む）を迅速かつ便利にデバッグできます。

CLIにはバックエンドサービスとエッジ関数をローカルでデバッグするための機能が統合されています。「edgeone pages dev」を実行すると、CLIはフロントエンドとバックエンドの両方のサービスをポート8088にマッピングし、プロジェクトのデバッグが容易になります。

CLIが提供する開発環境により、開発者は「localhost:8088/<function-path>」を通じて集中型Nodeサービスとエッジサービスの両方を直接デバッグできます。

まとめ

上記のどのデプロイ方法を使用しても、EdgeOne Pagesで実行されているNext.jsアプリケーションができました—グローバルに分散され、自動HTTPSが有効で、サーバーに触れることなくゼロから何百万ものアクセスに対応できる準備が整っています。

ここから恐れずに繰り返し改良しましょう：ブランチプレビューで実験を安全に保ち、インスタントロールバックで数秒でミスを元に戻し、必要な場所であなた専用のマジックを実現します。プッシュ、プレビュー、プロモート—そして、システムが重労働を行っている間にコーヒーを飲みに行きましょう。

関連ドキュメント

• Next.jsドキュメント
• EdgeOne CLIユーザーガイド
• Node-functionsとEdge-functionsチュートリアル
• Next.jsフルスタックテンプレートリポジトリ