ガイド

このガイドでは、高性能なNext.jsフルスタックアプリケーションの構築と、コード品質やアプリケーション速度を犠牲にすることなく開発ワークフローの最適化に焦点を当てています。今後のセクションでは、プロジェクトアーキテクチャ、環境設定、ルーティング戦略、効率的なデータ取得技術について詳しく検討します。これらのストプラクティスにより、EdgeOne PagesでシームレスにNext.jsフルスタックアプリケーションをデプロイでき、エッジコンピューティングの力を活用して優れたパフォーマンスと世界規模のアクセシ。以下のディレクトリ構造は、推奨するNext.jsハイブリッドレンダリングテンプレートを表しています。この慎重に整理されたアーキテクチャは、スケーラブルなフルスタックアプリケーションを構築する開発者にとって最適な基盤として機能します：

Ethan Mercer

EdgeOne Pagesの高度な機能の1つは、リバースプロキシとして機能する能力であり、クライアントのリクエストをバックエンドサーバーに安全かつ効率的に転送することができます。この記事では、edgeone.json設定ファイルを使用してEdgeOne Pagesをリバースプロキシとして設定するプロセスをガイドします。EdgeOne Pagesはェクトのビルドとデプロイメントの動作（ビルドコマンドなど）をカスタマイズし、ルーティング戦略（リダイレクト、リライト、HTTPレスポンスヘッダーを含む）を管理するための「edgeone.json」設定ファイルを提供しています。リライトを使用すると、ブラウザに表示されるURLを変更せずに、ユーザーのリクエストを透過的に異なるURLにルーティングすることができます。リライトを使用すると、リクエストがバックエンドサーバーに到達する前に、URLパス、クエリパラメータ、およびリクエストヘッダーを変更することができます。

Ethan Mercer

クロスオリジンリソースシェアリング（CORS）は、ブラウザによって実装されたセキュリティメカニズムであり、ウェブアプリケーションが異なるオリジンからのリソースとどのように相互作用するかを制御します。デフォルトでは、同一オリジンポリシーにより、ウェブページは自身のドメイン以外のサーバーへのリクエストを制限されます。CORSは、サーバーがHTTPヘッダーを介してどのオリジンがリソースにアクセスできるかを指定することに、これらの制限を緩和します。リクエストが「非シンプルリクエスト」（カスタムヘッダーを使用したり、GET/POST以外のメソッドを使用したりする場合）と見なされると、ブラウザは自動的にプリフライトOPTIONSリクエストをサーバーに送信します。サーバーは適切なCORSヘッを返さなければならず、そうでない場合、ブラウザは実際のリクエストをブロックします。Pages Functionsは、EdgeOneエッジノードで行されるサーバーレスのコード実環境を提供します。開発者はビジネスロジックを書き、トリガールールを設定するだけで、サーバーインフラストラクチャの管理は不要です。コードは、エンドユーザーに近いエッジノードで弾力的かつ安全に実行されます。

Benjamin Carter

すべての開発者は、この感覚を知っています：CodePenで素晴らしいものを作ったばかり—おそらく見事なCSSアニメーション、インタラクティブなJavaScriptウィジェット、または美しいランディングページのプロトタイプです。今、それを世界と共有したいと思っています。単なるPenとしてではなく、実際のスタンドアロンウェブサイトとして。従来のデプロイメントでは、Gitとの格闘、ビルドツールの設定、または複雑なホスティングプラットフォームのナビゲーションが必要でした。しかし、EdgeOne Pagesを使えば、CodePenから本番環境のサイトまでわずか30秒で実現できます。詳細に入る前に、このプロセスがどれほど簡単かを見てみましょう。全体のワークフローはたった3つのアクションで構成されています：エクスポート → ドラッグ → デプロイ。

Ethan Mercer