Blog

ヘッドレスシングルページアプリケーションは、必ずしもバックエンドコードを必要としません。これにより、多くのホスティングの制約から解放され、アプリケーションを迅速にデプロイするためのオプションの世界が開かれます。

Kentico CloudのようなヘッドレスCMSを使用してシングルページアプリケーションを強化する場合、サーバー側のコードを記述する必要はありません。 HTML、CSS、JavaScriptだけを使用して、アプリケーションのコンテンツを動的に更新および拡張しながら、本格的なシングルページアプリケーションを作成できます。

アプリケーションは静的リソースのみを必要とするため、多くの興味深い公開オプションを利用できます。ワークフローに簡単に統合できるシンプルなデプロイメントツールを提供するものもあり、それらの多くは無料です。

この投稿では、Surgeと呼ばれるサービスを使用してKenticoCloudをデモンストレーションするために作成したサンプルSPAをデプロイする方法を見ていきます。サージはシンプルで無料のサービスであり、1つのコマンドでプロジェクトをデプロイできます。これが私たちがすることです：

1. 必要な工具を取り付けます
2. サンプルリポジトリのクローンを作成します
3. シングルページアプリケーションをデプロイする

工具の取り付け

フロントエンド開発者であれば、npmとGitの両方をすでに持っている可能性があります。万が一、まだ持っていない場合は、実行しているプラットフォームに関係なく、それぞれのWebサイトに優れた手順があります。これらの両方をインストールしたら、次に進むことができます。

次は、サージのツールをインストールします。これは、コマンドプロンプト/ターミナルに次のように入力するのと同じくらい簡単です。

 npm install --global surge

これには数秒しかかかりません。その後、Surgeで公開を開始する準備が整いました。

サンプルリポジトリのクローン作成

必要なツールがすべて揃ったので、コマンドプロンプトまたはターミナルでサンプルプロジェクトのソースコードを保存する予定のディレクトリに移動します。次に、次のコマンドを使用して、GitHubからサンプルリポジトリのクローンを作成します。

 git clone https://github.com/Kentico/cloud-sample-app-js.git

その後、次のコマンドを使用してプロジェクトの依存関係をインストールします。

 npm install

次のコマンドを実行して、アプリケーションをローカルでテストできます。

 npm start

これにより、お気に入りのブラウザでアクセスできるサンプルサイトが実行されます。公開時の様子は次のとおりです。

シングルページアプリケーションのデプロイ

デプロイする前に、無駄のないトリムされた本番環境に対応したビルドを準備する必要があります。これは、以下を実行するのと同じくらい簡単です。

 npm run build

ビルドしたら、ビルドディレクトリに移動して次のように入力します。

 surge

初めてこれを行うと、電子メールアドレスとパスワードの入力を求められます。詳細については、Surgeのヘルプの開始ページを参照してください。 1回おきに、公開するローカルディレクトリを確認し、公開するサブドメインを生成します。

必要に応じてサブドメインを変更でき、独自のドメインをすべて無料で使用することもできます。その後、完了です。サイトが展開され、展開中に指定されたドメインでアクセスできるようになります。

次のステップ

Surgeのヘルプドキュメントは、より複雑なシナリオを処理する方法に関する優れた情報を提供します。ただし、サージは単純な展開の1つのオプションにすぎないことに注意してください。 Zeitは、シンプルな1コマンド展開のもう1つの一般的なオプションです。

このアプローチは、KenticoCloudで新しいことを試すための遊び場としてうまく機能します。 /src/Client.jsファイルのプロジェクトIDを独自のプロジェクトIDと交換することで、コンテンツの変更やページの追加などを試すことができます。

すべてがクライアント側でJavaScriptによってレンダリングされるため、本番シナリオに常に適しているとは限りません。これは、検索インデックス作成で問題になる可能性があります。 Googleやその他の検索エンジンクローラーは通常、JavaScriptベースのレンダリングをサポートしていますが、すべてがサポートしているわけではありません。サポートしていないか、実装と完全に互換性がない可能性があります。