このトピックでは、ReactとObject Storage Service (OSS) の静的Webサイトホスティング機能を使用して、フロントエンドで単一ページアプリケーション (SPA) を構築する方法について説明します。
背景情報
SPAは、完全に新しいページをリロードするのではなく、webサーバーからの新しいデータで既存のページを動的に書き換えることによってユーザーと対話するwebアプリケーションまたはwebサイトです。 このアプローチにより、シームレスなユーザーエクスペリエンスが保証され、アプリケーションはデスクトップアプリケーションのように機能します。 SPAでは、すべての必要なHTML、JavaScript、およびCSSコードは、単一のページロードでブラウザによって取得されるか、または適切なリソースが動的にロードされ、通常はユーザーのアクションに応答して必要に応じてページに追加されます。
前提条件
Node.js用のOSS SDKがインストールされています。 詳細については、「インストール」をご参照ください。
バケット作成についての このチュートリアルでは、examplebucketという名前のバケットを使用します。 詳細については、「バケットの作成」をご参照ください。
カスタムドメイン名
example.comはexamplebucketバケットにマップされます。 詳細については、「カスタムドメイン名のマップ」をご参照ください。
ステップ1: Reactを使用してSPAを構築する
コマンドプロンプトまたはPowerShellを開きます。 このチュートリアルでは、コマンドプロンプトを使用します。次のコマンドを実行してプロジェクトを作成します。
npx create-react-app spa-demoコマンド出力例:
次のパッケージをインストールする必要があります。create-react-app 続行しますか? (y)で続行しますか? (y)プロンプトで、yと入力してEnterキーを押します。数分後、プロジェクトが作成され、すべてのプロジェクトの依存関係が一緒にインストールされます。
次のコマンドを実行して、作成したプロジェクトに移動します。
cdスパ-デモ次のコマンドを実行して、作成したプロジェクトをプレビューします。
npm実行開始次の図は、App.jsファイルの内容を示しています。
プロジェクトをデバッグし、ファイルをプレビューして、SPAが要件を満たしていることを確認します。 次に、次のコマンドを実行して、本番環境でプロジェクトをビルドします。
npm実行ビルドビルドディレクトリは、プロジェクトのルートディレクトリに生成されます。
手順2: examplebucketバケットの静的Webサイトホスティングの設定
OSSコンソールにログインします。
左側のナビゲーションウィンドウで、[バケット] をクリックします。 表示されるページで、examplebucketをクリックします。
左側のナビゲーションツリーで、 を選択します。
[静的ページ] セクションで、[設定] をクリックし、次の表の説明に従ってパラメーターを設定します。
サブフォルダのホームページの設定は、URLがスラッシュ (/) で終わるバケットのルートディレクトリにあるサブディレクトリにアクセスしたときに返される内容を決定します。 実際のビジネス要件に応じて、この機能を有効または無効にできます。
サブフォルダのホームページ機能が有効:
パラメーター
説明
デフォルトホームページ
ブラウザを使用してOSSバケットでホストされている静的Webサイトにアクセスしたときに表示されるデフォルトのホームページ。 この例では、このパラメーターをindex.htmlに設定します。
Subfolderホームページ
バケットのサブフォルダホームページ機能を有効にするかどうかを指定します。 この例では、[有効] を選択します。 バケットのサブフォルダホームページ機能を有効にした後、バケットのルートディレクトリにアクセスすると、ルートディレクトリのデフォルトのホームページが返されます。 URLがスラッシュ (/) で終わるサブディレクトリにアクセスすると、サブディレクトリ内のデフォルトのホームページが返されます。
サブフォルダ404ルール
この例では、[リダイレクト] を選択します。
デフォルトの404ページ
アクセスするオブジェクトがバケットに存在せず、HTTPステータスコード404が返される場合に返されるエラーページ。 このチュートリアルでは、このパラメーターで指定されたページファイルをSPAの既定のエラーページとして使用します。 このパラメーターをindex.htmlに設定します。これは、既定のホームページの値と同じです。
エラーページのステータスコード
エラーページとともに返されるHTTPステータスコード。 ステータスコードを200に設定します。
サブフォルダのホームページ機能が無効:
パラメーター
説明
デフォルトホームページ
ブラウザを使用してOSSバケットでホストされている静的Webサイトにアクセスしたときに表示されるデフォルトのホームページ。 この例では、このパラメーターをindex.htmlに設定します。
Subfolderホームページ
バケットのサブディレクトリホームページ機能を有効にするかどうかを指定します。 この例では、[無効] をクリックします。 この場合、バケットのルートディレクトリ、またはURLがスラッシュ (/) で終わるサブディレクトリにアクセスすると、バケットのルートディレクトリにあるデフォルトのホームページが返されます。
デフォルトの404ページ
アクセスするオブジェクトがバケットに存在せず、HTTPステータスコード404が返される場合に返されるエラーページ。 このチュートリアルでは、このパラメーターで指定されたページファイルをSPAの既定のエラーページとして使用します。 このパラメーターをindex.htmlに設定します。これは、既定のホームページの値と同じです。
エラーページのステータスコード
エラーページとともに返されるHTTPステータスコード。 ステータスコードを200に設定します。
[保存] をクリックします。
ステップ3: ビルドディレクトリ内のすべてのファイルをアップロードする
左側のナビゲーションウィンドウで、[バケット] をクリックします。 表示されるページで、examplebucketをクリックします。
左側のナビゲーションツリーで、ファイル > オブジェクト を選択します。
[オブジェクト] ページで、[オブジェクトのアップロード] をクリックします。
[オブジェクトのアップロード] パネルで、次の表の説明に従ってパラメーターを設定します。
パラメーター
説明
アップロード先
[現在のディレクトリ] を選択します。
オブジェクトACL
オブジェクトのアクセス制御リスト (ACL) をパブリック読み取りに設定します。
アップロードするファイル
[フォルダの選択] をクリックし、spa-demoプロジェクトのbuildディレクトリにあるすべてのファイルを選択します。
重要ビルドディレクトリ自体を除いて、ビルドディレクトリ内のファイルのみをバケットのルートディレクトリにアップロードします。 それ以外の場合、カスタムドメイン名を使用してSPAにアクセスすることはできません。
[オブジェクトのアップロード] をクリックします。
[タスクリスト] パネルでファイルのアップロードの進行状況を確認できます。 ファイルがアップロードされた後、examplebucketバケットでindex.htmlという名前のオブジェクトを見つけることができます。
ステップ4: カスタムドメイン名を使用してSPAにアクセスする
webブラウザを開きます。
SPAにアクセスするには、アドレスボックスにhttps://example.com/index.htmlを入力します。 このチュートリアルでは、例としてカスタムドメイン名example.comを使用します。
次の図は、SPAのwebページを示しています。
よくある質問
デプロイされたSPAのwebページは、ルート移行後にレンダリングできます。 ただし、ページを更新すると、HTTPステータスコード404が返されます。 どうすればよいですか。
バケットの静的Webサイトホスティングを設定すると、デフォルトのホームページまたはデフォルトの404ページが誤って設定されることがあります。 デフォルトホームページとデフォルト404ページの両方がindex.htmlに設定されていることを確認します。
ページはルート遷移後にロードされます。 ただし、200の代わりにHTTPステータスコード404が返されます。 どうすればよいですか。
バケットの静的Webサイトホスティングを設定するときに、エラーページステータスコードパラメーターが空白のままになるか、設定が正しくない場合があります。 [エラーページのステータスコード] が200に設定されていることを確認します。
バケットの静的Webサイトホスティングを設定した後、オブジェクトにアクセスするときにオブジェクトがダウンロードされた場合はどうすればよいですか?
オブジェクトはプレビューされますが、オブジェクトにアクセスしたときにダウンロードされないように設定できます。 詳細については、「オブジェクトにアクセスしたときにオブジェクトをプレビューできない場合の対処方法」をご参照ください。