tencent cloud

single-page applicationとは何ですか。

single-page application（SPA）とは、ネットワークアプリケーションプログラムまたはウェブサイトのモデルの一種であり、従来のように新しいページ全体をサーバーからリロードするのではなく、現在のページを動的にリライトすることでユーザーとのインタラクションを行うものです。この方式では、ページ間の切り替えによってユーザーエクスペリエンスが中断されることがなく、アプリケーションをデスクトップアプリケーションにより近いものにすることができます。single-page applicationでは、必要なコード（HTML、JavaScript、CSS）はすべて単一のページからロードして検索するか、または必要に応じて（通常はユーザーの操作に対する応答として）適切なリソースを動的にロードし、ページに追加します。

現在のフロントエンド開発領域でよくみられるSPA開発フレームワークには、React、Vue、Angularなどがあります。

ここでは、現在比較的よく用いられている2つのフレームワークを使用し、Tencent CloudのCloud Object Storage（COS）の静的ウェブサイト機能を使用してオンラインで使用できるSPAをスピーディーに構築する方法について、段階を追ってご説明するとともに、よくあるご質問とその対処方法についても記載します。

準備作業

1. Node.js 環境をインストールします。
2. Tencent Cloudアカウントを登録し、実名認証を完了して、Tencent Cloud COSコンソールに正常にログインできることを確認します。
3. バケットを作成します（テストに便利なように、権限をパブリック読み取り/プライベート書き込みに設定します）。

フロントエンドコードを作成する

注意：

すでにご自身でコードを実装済みの場合は、バケットの静的ウェブサイト設定を有効化するの手順に直接ジャンプして確認することができます。

Vueを使用してSPAをスピーディーに構築する

1. 次のコマンドを実行し、vue-cliをインストールします。

   npm install -g @vue/cli
   

2. 次のコマンドを実行し、vue-cliを使用してvueプロジェクトをクイック生成します。公式ドキュメントをご参照ください。

   vue create vue-spa
   

3. 次のコマンドを実行し、プロジェクトのルートディレクトリにvue-routerをインストールします。

   npm install vue-router -S  (Vue2.x)
   

または

npm install vue-router@4 -S  (Vue3.x)

4. プロジェクト内のmain.jsおよびApp.vueファイルを変更します。
   main.jsは以下のようにします。
   
   
   App.vueは主にコンポーネントのtemplateを以下のように変更します。
   
   

   説明：

   スペースの都合上、ここでは一部の重要コードのみを抜粋します。完全なコードはここをクリックしてダウンロードできます。

5. コードを変更した後、次のコマンドを実行してローカルプレビューを行います。

   npm run serve
   

6. デバッグを行い、プレビューで誤りがないか確認した後、次のコマンドを実行して本番環境コードをパッケージ化します。

   npm run build
   

この時点で、プロジェクトのルートディレクトリ下にdistディレクトリが生成されます。これでVueのプログラムコードの準備は完了です。

Reactを使用してSPAをスピーディーに構築する

1. 次のコマンドを実行し、create-react-appをインストールします。

   npm install -g create-react-app
   

2. create-react-appを使用してreactプロジェクトをクイック生成します。公式ドキュメントをご参照ください。

3. 次のコマンドを実行し、プロジェクトのルートディレクトリにreact-router-domをインストールします。

   npm install react-router-dom -S
   

4. プロジェクト内のApp.jsファイルを変更します。
   
   

   説明：

   スペースの都合上、ここでは一部の重要コードのみを抜粋します。完全なコードはここをクリックしてダウンロードできます。

5. コードを変更した後、次のコマンドを実行してローカルプレビューを行います。

   npm run start
   

6. デバッグを行い、プレビューで誤りがないか確認した後、次のコマンドを実行して本番環境コードをパッケージ化します。

   npm run build
   

この時点で、プロジェクトのルートディレクトリ下にbuildディレクトリが生成されます。これでReactのプログラムコードの準備は完了です。

バケットの静的ウェブサイト設定を有効化する

1. 作成済みのバケットの詳細ページに進み、左側ナビゲーションバーで、基本設定 > 静的ウェブサイトをクリックします。
2. 静的ウェブサイト管理ページで、下図を参照して設定を行います。操作の詳細については、静的ウェブサイトの設定をご参照ください。

COSにデプロイする

1. 静的ウェブサイトを設定済みのバケットを見つけ、ファイルリストページに進みます。

2. コンパイルディレクトリ（Vueはデフォルトではdistディレクトリ、reactはデフォルトではbuildディレクトリ）下のすべてのファイルをバケットのルートディレクトリ下にアップロードします。操作の詳細については、オブジェクトのアップロードをご参照ください。

3. バケットの静的ウェブサイトドメイン名にアクセスします（下図のアクセスノード参照）。

これで、デプロイが完了したアプリケーションのメインページを確認できます。ここではVueアプリケーションの例を挙げます。

4. ルーティング（Home、Foo、Bar）を切り替えてページを更新してみて、予測したとおり（ルーティング下で更新しても404エラーが表示されない）になるかどうかを検証します。

よくあるご質問

静的ウェブサイトのデフォルトドメイン名を使用したくない場合はどうすればよいですか。自分のドメイン名を使用できますか。

上記で使用したデフォルトの静的ウェブサイトドメイン名以外に、COSはカスタムCDNアクセラレーションドメイン名、カスタムオリジンサーバードメイン名の設定もサポートしています。具体的には、ドメイン名管理の概要のドキュメントを参照して設定できます。設定が成功すると、ご自身の使用したいドメイン名でアプリケーションにアクセスできるようになります。

CDNアクセラレーションドメイン名の設定を選択した場合は、更新後のデータを入手しやすいよう、CDNノードキャッシュ期限設定を行っておくことにご注意ください。

アプリケーションをデプロイ後、ルーティングを切り替えてレンダリングに成功しましたが、ページを更新すると404エラーが表示されました。何が原因ですか。

原因は、静的ウェブサイト設定の際に設定が失われたか、またはエラードキュメントを誤って設定したことによる可能性があります。この章の冒頭にある標準設定のスクリーンキャプチャをもう一度ご参照ください。エラードキュメントとインデックスドキュメントはどちらもindex.htmlに設定されています。

SPAの特性により、どのような状況でもアプリケーションポータル（通常はindex.html）にアクセスできることを保証する必要があります。そうしなければ、その後のルーティングの一連の内部ロジックがトリガーされないからです。

ルーティングの切り替え後、ページは正常に表示されますが、HTTPステータスコードが404のままです。どうすれば正常に200が返されますか。

ここでの原因は、静的ウェブサイト設定の際にエラードキュメントのレスポンスコードを設定していなかったことによるものです。冒頭の設定スクリーンキャプチャをご参照の上、200に設定することで解決できます。

エラードキュメントを設定後、アクセスエラーのパスに404を表示する機能も必要なのですが、どうすればよいですか。

ここでは、フロントエンドコード内で404ロジックを実装することを推奨します。ルーティング設定の一番下に最下層のマッチングルールを設定し、前のすべてのルールがマッチングに失敗した場合は404コンポーネントをレンダリングするようにします。コンポーネントの内容はニーズに合わせてご自身で設計可能です。具体的には、ここでご提供するコードdemo内のルーティング設定の最後の設定をご参照ください。

アクセスしたページで403 Access Deniedエラーが表示されましたが、何が原因ですか。

原因は、バケットの権限がプライベート読み取り/書き込みに設定されていることによる可能性があります。パブリック読み取り/プライベート書き込みに変更すると解決できます。

また、CDNアクセラレーションドメイン名を使用してプライベート読み取り/書き込みのバケットにアクセスする場合、back-to-origin認証を有効化しておかなければ、CDNサービスにCOSリソースへの正常なアクセス権限を付与できないことにも注意が必要です。