クラウドストレージの単一ページアプリケーション

静的サイト（ 1および2 ）をホストするためのプラットフォームとしてクラウドストレージを使用する方法についてはすでに説明しました。 今日は、リポジトリに基づいて現代のサイトをホストする方法についてお話します。リポジトリは、今日人気のあるシングルページアプリケーション（SPA）アプローチに基づいています。

アプローチとしてのSPA

略語SPAは「シングルページアプリケーション」（「シングルページアプリケーション」）の略です。 狭義には、ブラウザでクライアント側で直接実行される1ページのサイトを指すために使用されます。 より広い意味で、SPA（「SPI」と略されることもあります-「単一ページインターフェイス」）は、Web開発におけるアプローチ全体を意味し、今日ではさらに普及しています。 このアプローチの意味は何ですか？なぜ人気が高まっているのですか？



遠くから少し始めましょう。 今日、最も一般的なタイプのサイトは、もちろん、サーバー側でページ生成が行われる動的サイトです。 開発者にとって明らかなすべてのアメニティを備えているため（各リクエストは最初からページを作成します）、そのようなサイトは顧客にとって本当に頭痛の種になることがあります。 以下は、彼らが直面する不便さの完全なリストではありません。

• 一部のフレームワークでは、クライアントが最後に入力したデータを含むフォームを返すことができますが、検証のためにページをリロードする必要があるため、サイトでの作業が不快になります。
• サーバー側のページ生成には、深刻なワークロードが伴います。

多くの場合、説明されている問題は次のように解決されます。ページは引き続きサーバー側で生成されますが、小さなJavaScriptスクリプトはクライアント側で実行され、たとえば、サーバーに送信する前にフォームを検証できます。 一見したところ解決策は悪くありませんが、欠点もあります。

• 以前にフロントエンドとバックエンドの機能が明確に分離されていた場合（バックエンドがビューとロジックを生成し、フロントエンドが表示を担当します）、ロジックはフロントエンドで複製されます。
• ビューを生成するコードは常に複製する必要があり、そのために問題があります：コピーと貼り付け、マークアップの不一致、壊れたセレクター、コードの維持の困難など。

もちろん、あなたはこれすべてで生きることができます。 しかし、多くの場合、SPAアプローチははるかに効果的です。



このアプローチの観点から見ると、サイトはページのセットとしてではなく、同じHTMLページの状態のセットとして理解されます。 状態が変化すると、ページ自体をリロードせずに新しいコンテンツの非同期ロードが発生します。



SPAは古典的な意味でのサイトではなく、ブラウザでクライアント側で実行されるアプリケーションです。 したがって、ユーザーの観点からは、低速または不安定なインターネット接続（モバイルデバイスからサイトを表示する場合など）であっても、操作の速度にほとんど問題はありません。 また、サーバーからクライアントへのマークアップではなく、データ（主にJSON形式）とそのサイズが小さいという事実により、作業の高速性が確保されます。



最近、SPAの作成と使用を大幅に簡素化する興味深い技術的ソリューションとサービスが数多くあります。 それらのいくつかをより詳細に検討しましょう。

BAAS（サービスとしてのバックエンド）

クライアント側でインターフェースをレンダリングし、ページをリロードせずにリクエストを送信するだけでサーバーと対話することを可能にする技術は長い間存在していました。 たとえば、 XMLHttpRequest APIは2000年に登場しました。 しかし、これらのテクノロジーの使用には困難が伴いました。リクエストの許可とデータへのアクセスの機能を実装するバックエンドを書き直す必要がありました。



今日、多数のBaaSサービスの登場により、すべてが非常に簡単になりました。 BaaSという略語は、Backend as a Serviceの略です。 BaaSサービスは、Webアプリケーション開発者に既製のサーバーインフラストラクチャ（通常はクラウドに配置）を提供します。 それらのおかげで、サーバーコードの記述にかかる時間（そして多くの場合、お金も）を節約でき、アプリケーション自体の改善とその機能の開発に集中できます。 BaaSを使用すると、任意の機能セットを備えた任意のバックエンドをアプリケーションまたはサイトに接続できます。適切なライブラリをページに追加するだけです。



たとえば、 MongoLabサービスを使用すると、MongoDBクラウドデータベースをWebアプリケーションおよびWebサイトに接続できます。



もう1つの興味深い例はFireBaseです。 このサービスは、リアルタイムアプリケーション向けのクラウドデータベースおよびAPIです。 特に、クライアントとサーバー間のデータ交換をリアルタイムで整理できます。JavaScriptライブラリをページに接続し、イベントを構成してデータを変更するだけです。 FireBaseに基づいて、チャットやユーザーアクティビティフィードなどを簡単に実装できます。



興味深く、注目に値するBaaSサービスの中でも、強調する価値があります。

• バックエンドレスは、あらゆる種類のアプリケーションに既製のクラウドサーバーインフラストラクチャを提供するプラットフォームです。 その支援により、ユーザー管理、ユーザーデータストレージ、リアルタイムメッセージング、通知、位置情報、ファイル管理などをサイトに追加できます。
• Syncanoは、Firebaseと機能が似ているリアルタイムアプリケーション用のAPIを提供するサービスです。
• QuickBloxは、ロシアの開発者による面白くない製品です（ Habréに関する詳細な記事も参照してください ）。

BaaSサービスの簡単な概要もここにあります 。



クラウドストレージは外部バックエンドとしても使用できます。 これにより、たとえば、ファイル管理機能をWebアプリケーションやサイトに統合できます。



ストレージを外部バックエンドとして使用する場合、認証とコンテンツの操作という2つの重要な点に特に注意する必要があります。 認証キー（トークン）は、auth.selcdn.ruへのリクエストを使用して取得できます。



次に、すべてのデータ処理要求でX-Auth-Tokenヘッダーの値として指定する必要があります。 これらの要求への応答には、値「*」のAccess-Control-Allow-Originヘッダーが含まれます。これにより、任意の外部ドメインからリポジトリにアクセスできます。



ストレージAPIを使用するWebアプリケーションの例は、フォトギャラリーです （既に説明しました。GitHubのリポジトリも参照してください）。

HTML5 History API

動的サイトの各ページには独自のURLがあります。 SPAは、URLを変更せずにページの状態を変更できるように配置されています。 ただし、この場合、問題が発生します。ユーザーはリンクを保存してから、以前にアクセスしたセクションに戻ることができません。 それを解決する方法はいくつかあります。



まず、ハッシュフラグメント（「＃」記号の後に来るリンクの部分）を使用できます。 ハッシュフラグメントには、以前の状態を復元できるページの「仮想」アドレスが含まれています。 ユーザーがページをリロードすると、ハッシュ値を読み取った後、JavaScriptコードが必要なデータをダウンロードし、対応するセクションを表示します。 このオプションは多くのサイトで使用されていますが、そのようなURL（たとえば、「 example.com/base /#！/ Section1 / page2」）はあまり自然に見えないことに注意してください。 さらに、これらは2つのエンティティで構成されます。Webサーバーからページが要求される「実際の」アドレスと、論理セクションを示す「仮想」です。



次に、 HTML5 History APIを使用できます （ Habréの記事も参照してください ）。 History APIを使用すると、現在のドメイン内のページURLを完全に変更することができます。リロードする必要はありません。 このAPIをサポートするブラウザでは、ページの読み込みに使用されるURLとJavaScriptから指定されたURLに違いはありません。



履歴API関数の呼び出しは、ネイティブブラウザーのボタン「進む」と「戻る」および履歴にも関連付けられています。「戻る」ボタンをクリックすると、ブラウザーはpopstateイベントをトリガーし、JavaScriptコードで処理でき、前のセクションが表示されます。 これがどのように機能するかは、たとえばここで確認できます 。



サイトで説明されているURLスキームを使用するには、それに応じてWebサーバーを構成する必要があります。 存在しないページの代わりに、メインSPAページが返されることを確認する必要があります-通常、これはindex.htmlです。 この場合、クライアントのブラウザはJavaScriptをロードし、現在のページアドレスに基づいて目的のサイトファイルを既に描画します。



nginx設定では、これは次のように記述されます。

 location / {rewrite。* /index.html;  }

SPAがGitHubページやリポジトリなどのサービスでホストされている場合、設定はコントロールパネルで設定する必要があります。

検索エンジン最適化

SPAの検索エンジンインデックスは別の問題です。 サイトがクライアント側で完全に生成された場合、インデックス付けが不十分になりますが、この点に関して最近改善されていますが、インデックス作成時にボットが徐々にJavaScriptを実行し始めています。



この問題を解決する1つの方法は次のとおりです。ページのスナップショットはボット専用に生成されます。 ページは、HTML5 History APIを使用するかどうかに応じて異なる方法で生成する必要があります。



ハッシュフラグメントの場合、 GoogleとYandexは同じアプローチを提供します。「実」アドレスと「仮想」アドレスを分離するには、「＃」の代わりに「＃！」を使用します。 検索ボットは、このような区切り記号が付いたリンクを見て、URLで特別なクエリパラメーター「_escaped_fragment_」を使用し、ハッシュの後に続くアドレスの一部をその中に入れます。



Webサーバーは、このようなリクエストを特別に処理し、ボットがインデックスを作成できるように完全なHTMLページをレンダリングする必要があります。 （標準の「＃」の後のURLの部分はHTTPリクエストの一部ではないため、これが必要になります。）また、特別なメタタグ（上記のリンクを参照）を使用することも推奨されます。 一部のページには「＃！」のリンクが含まれていない場合があります。



アドレス指定に完全なURLが使用されている場合、サイトをインデックス可能にするのはさらに簡単です。指定されたアドレスに対応するサーバー上でページを生成するだけです。 サイトを訪問したボットは、コンテンツを含むページを受け取り、正常にインデックスを作成します。



サイトがブラウザーで開いている場合、ページは最初にHTMLマークアップに従って表示され、次にJavaScriptが作用します。 リンクをさらにクリックしても、ページはリロードされません。 この動作は、リンクをクリックしてイベントをインターセプトし、ネイティブ動作をキャンセルすることで実装できます。 この場合、ボットはリンク（「href」属性）をたどり、すべての遷移を制御し、必要に応じてイベントを処理できます。



また、このアプローチにより、サイトの読み込み速度を最適化できることに注意してください：最新のブラウザは、サーバーからのHTMLをより高速にレンダリングし、JavaScriptスクリプトの読み込み、解析、DOMによるページのレンダリングに通常より時間がかかります。



DOMと直接機能するJavaScriptコードのみを使用してHTMLページを生成するにはどうすればよいですか？ これを行うにはいくつかの方法があります。



まず、 PhantomJS （これはAPIで管理されるいわゆる「ヘッドレス」WebKitベースのブラウザー）をインストールし、ページスナップショットを生成するように構成できます（実際の例を参照 ）。



第二に、 prerenderツールまたはPrerenderer.ioサービスを使用できます。これらもPhantomJSに基づいています。



第三に、一部の最新のフレームワーク（たとえばDerbyJSやReact ）では、この関数は既に実装されています（ここの例を参照してください： react-server-example ）。

スパ宿泊施設

SPAをホストできる現代のインターネットには多くのサイトがあります。 最も人気のあるものを考えてください。

Dropbox

最も簡単なオプションは、 Dropboxで SPAをホストすることです。 これを行うには、DropboxパブリックディレクトリにSPA用のディレクトリを作成し、その中に必要なファイルをすべて配置してから、index.htmlファイルを選択し、マウスの右ボタンをクリックしてコンテキストメニューを呼び出します。 メニューで、「Dropbox→共有リンク」を選択します。 その後、リンクが作成され、クリップボードにコピーされます。これにより、ブラウザを介してアプリケーションを使用できるようになります。

最近、Dropboxでサイトをホストする機能を拡張する試みが行われました（これについては、たとえばこちらをご覧ください ）。 ただし、これらは主な問題を解決しません。Dropboxは、パブリックリンクに非常に厳しい（完全なブロックまで）トラフィック制限があります。 したがって、説明されているオプションは、友人や同僚にSPAを示すためにのみ推奨できます。

Githubページ

GitHub Pagesは、静的サイトおよびSPAをホストするための無料サイトです。 GitHubページでSPAをホストするには、GitHubでSPAのリポジトリを作成し、Project Pagesのgh-pagesブランチまたはUser / Organization Pagesのmasterブランチに静的ファイルを配置する必要があります。 行われたすべての変更は、このリポジトリにコミットする必要があります。 より詳細な情報は、 公式ドキュメントにあります 。

ビットバルーン

ビットバルーン -新しいサービスですが、すでに非常に人気があります。

各登録ユーザーには、10 MBの空きディスク容量が提供されます。 SPAを配置するには、必要なファイルをすべてアップロードします。 このサービスは、JS、HTML、CSSを自動的に縮小し、CDNも接続します。



プレミアムアカウントは月額5ドルです。 有料アカウントの所有者は、さまざまな追加機能を利用できます-特に、独自のドメインを接続し、さまざまな外部サービスを接続します。

セレクターストレージ

当社のクラウドストレージは、SPAをホストするための便利なプラットフォームです。 一般に、SPAの配置手順は、以前の投稿のいずれかで既に記述した静的サイトを配置する手順とほとんど変わりません。 次の手順が含まれます。

1. パブリックコンテナの作成とドメインのアタッチ：上記のリンクはすべてを詳細に説明していますが、これについては詳しく説明しません。
2. 特別ページのカスタマイズ：セットアップ手順が最近改善されました。 存在しないページの処理をカスタマイズするもう1つのオプションを追加しました（「エラー404：ページ」）。 これで、存在しないページを要求したときに表示されるファイルを指定し、別のURLへのリダイレクトは行わない一方で、そのページの応答コード（200または404）を設定できます。

これにより、完全なURLを使用できます（History APIセクションを参照）。



他のサイト（上記のものを含む）に対する当社のストレージの間違いない利点には、低コストで柔軟な支払いシステム（固定料金なし、支払いは保存されたデータと発信トラフィックの量に対してのみ請求されます- ここで計算できます ）、およびCDNの可用性コンテナおよびファイルのアップロードパラメータを設定するための柔軟なシステム。

おわりに

この記事では、ストレージを単一ページサイトをホストするためのプラットフォームとして使用する別の側面について説明しました。 それがあなたの役に立つことを願っています

既に当社のストレージ施設を使用してSPAをホストしている場合は、経験や印象を共有してください。



何らかの理由でここにコメントを投稿できない読者は、私たちのブログに参加してください 。