すべてのカテゴリ

簡単にわかる Web サーバーの仕組み？Web サーバーはインターネットなどのネットワーク上で Web サイトのサービスを提供するためのサーバーです。「サーバー」という言葉はよく利用されますが、簡単に言えば「何かのサービスを提供する」という意味です。 Web サーバーの場合は、インターネットの Web サイトの仕事を提供する「物」ということになります。実際は、Web サイトのサービスを提供するためのシステム（コンピュータとソフトウエア）をまとめて Web サーバーと呼ぶ場合が多いようです。Web サイトの仕組みWeb サイトの仕組みを簡単に説明すると、Web サイトの情報を保存しているコンピュータとその情報をネットワークを通じて提供するためのソフトウエアで成り立っています。Web サーバーはネットワークを経由して送られてくる、Web ブラウザからのリクエストに対して、リクエストされたページ（これが URL と呼ばれる物です）の情報を提供するようになっています。このネットワーク上で Web ブラウザと Web サーバーでやり取りするための仕組みを「プロトコル」と読んでいて、Web サーバーの場合「HTTP」というプロトコルを利用しています。Web ブラウザが表示できるのは、「HTML」と呼ばれる方法で書かれた情報です。従って、基本は、要求された HTML の情報を渡すのが Web サーバーの仕事になります。HTML ファイルには、その体裁を記述した CSS ファイルや、画像（写真や動画、イラスト）のファイル、また Javascript のファイルなどが含まれているので、そうした情

NuxtアプリをFirebaseでホスティングするには前回の投稿で紹介したように、NextやNuxtのようなサーバ側でレンダリング（描画）をするアプリの場合は、インターネットに公開するための設定方法が少し面倒になります。これは、通常のWebサーバーの機能である、リクエストされたURLの情報を提供する以外に、リクエストされた「ページを作る」という処理が必要になるためです。この記事では、NuxtのアプリをFirebaseでホスティングするための設定方法の詳細を紹介します。必要な手順NuxtアプリをFirebaseで公開する手順です。前提条件として、公開したいNuxtのアプリはすでに開発済ということでその後の手順について紹介します。この例では、Nuxtのテンプレートのプロジェクトを公開するという形で紹介していきます。1. Nuxtのアプリを作る2. 公開用のフォルダを作成3. Firebaseの設定4. テスト5. 公開（deployment）Nuxtのアプリを作る今回は、Nuxtのアプリの実際の実装は行いません。テンプレートのアプリをそのまま公開するという前提ですすめます。テンプレートのアプリは、「create-nuxt-app」を使って作成します。開発用のPCにインストールされていない場合は、まずこのパッケージをインストールします。$ sudo npm install -g create-nuxt-app$ npx create-nuxt-app nuxt-sample(*)Windowsの場合「sudo」は必要ありません。コマンドを実行すると、プロジェクトの設定について聞かれる

Next/Nuxt で作ったアプリもホスティングできる FirebaseWeb アプリをサーバーサイドのレンダリングを利用して実装するフレームワークは、Next や Nuxt がよく利用されますが、実際にインターネットに公開する場合はフロントエンドのフレームワークの React や Vue を利用した場合に比べると少し面倒なケースが多くなります。理由は、当然と言えば当然ですが、サーバー側でバックエンドのプログラムを動かす必要があるのが大きな理由です。Firebase はバックエンドのサービスを Functions(Cloud Functions)という形でサポートしているので、Nuxt のアプリをホスティングすることもできます。この記事では、まずは、Firebase で Nuxt のアプリをホスティングする仕組みについて概要を説明します。詳しいやり方は別の記事で改めて紹介する予定です。サーバー側のレンダリングとは？最初にまず「サーバー側のレンダリング」（Server Side Rendering/SSR）について簡単に説明します。Web サイトの基本的な仕組みは、サーバーに HTML で書かれたファイルを置いておいて、Web ブラウザが URL を指定して表示するデータを受け取ることで実現しています。シンプルなサイトの場合は、HTML ファイルに書かれた HTML の情報を受け取って表示するのが「静的サイト」と呼ばれるものです。「静的」なので、基本的に表示される内容は予め HTML 書かれた情報に固定されていて、別な情報を表示するにはサーバーにあるファイルを更新する必要がありま