☰

Node.jsをシンプルなWebサーバーとして使用する 質問する

tag-icon • tag-icon node.js server webserver
Node.jsをシンプルなWebサーバーとして使用する 質問する

非常にシンプルな HTTP サーバーを実行したいと考えています。すべての GET リクエストは、通常の HTML ページとしてサーバーに提供されるexample.com必要がありますindex.html(つまり、通常の Web ページを読むときと同じエクスペリエンス)。

以下のコードを使用すると、 のコンテンツを読み取ることができます。通常の Web ページとしてindex.html機能するにはどうすればよいですか?index.html

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(index);
}).listen(9615);

get以下の提案の 1 つは複雑で、使用したいリソース (CSS、JavaScript、画像) ファイルごとに 1 行記述する必要があります。

いくつかの画像、CSS、JavaScript を含む単一の HTML ページを提供するにはどうすればよいですか?

ベストアンサー1

最もシンプルな Node.js サーバーは次のとおりです。

$ npm install http-server -g

これで、次のコマンドを使用してサーバーを実行できます。

$ cd MyApp

$ http-server

NPM 5.2.0 以降を使用している場合は、http-serverでインストールせずに使用できますnpx。これは本番環境での使用は推奨されませんが、ローカルホストでサーバーをすばやく実行するのに最適な方法です。

$ npx http-server

パッケージ名を誤って入力することによるセキュリティやユーザー エクスペリエンスの問題を防ぐために、npx はインストールする前にプロンプ​​トを表示します。このプロンプトは、-y または --yes オプションを使用して抑制できます。

$ npx -y http-server

または、Web ブラウザーを開いて CORS リクエストを有効にする次の方法を試すこともできます。

$ http-server -o --cors

その他のオプションについては、http-serverGitHubのドキュメントまたは以下を実行します:

$ http-server --help

他にもたくさんの優れた機能があり、NodeJitsu への展開も非常に簡単です。

機能フォーク

もちろん、独自のフォークで機能を簡単に追加できます。このプロジェクトの既存の 800 以上のフォークの 1 つで既に機能が追加されている場合があります。

ライトサーバー: 自動更新の代替手段

良い代替案http-serverはlight-serverファイルの監視や自動更新など、さまざまな機能をサポートしています。

$ npm install -g light-server 
$ light-server

Windowsエクスプローラーのディレクトリコンテキストメニューに追加

 reg.exe add HKCR\Directory\shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-o\" \"-s\" \"%V\""

シンプルなJSON RESTサーバー

プロトタイププロジェクト用のシンプルなRESTサーバーを作成する必要がある場合は、jsonサーバーあなたが探しているものかもしれません。

自動更新エディター

現在、ほとんどの Web ページ エディターと IDE ツールには、ソース ファイルを監視し、変更があった場合に Web ページを自動的に更新する Web サーバーが含まれています。

私が使うライブサーバーVisual Studio Code を使用します。

のオープンソーステキストエディタ括弧NodeJS 静的 Web サーバーも含まれています。Brackets で任意の HTML ファイルを開き、「ライブ プレビュー」を押すだけで、静的サーバーが起動し、ブラウザーでそのページが開きます。HTML ファイルを編集して保存するたびに、ブラウザーが自動的に更新されます。これは、アダプティブ Web サイトをテストするときに特に便利です。複数のブラウザー/ウィンドウ サイズ/デバイスで HTML ページを開きます。HTML ページを保存して、すべて自動更新されるため、アダプティブなものが機能しているかどうかをすぐに確認できます。

Web / SPA / PWA / モバイル / デスクトップ / ブラウザExt Web開発者

一部のSPAフレームワークには、Webpack 開発サーバーソース ファイルの変更を検出し、SPA または PWA Web アプリの増分再構築とパッチ適用 (ホット リロードと呼ばれる) をトリガーできます。これを実行できる一般的な SPA フレームワークをいくつか紹介します。

VueJS 開発者

VueJS開発者にとってのお気に入りはクエーサーフレームワークサーバーサイドレンダリング（SSR）をサポートするスイッチを備えたWebpack DevServerがすぐに使用できます。プロキシルールCORS の問題を解決します。モバイルとデスクトップの両方に適応するように設計された、最適化されたコンポーネントが多数含まれています。これらにより、すべてのプラットフォーム (SPA、SPA+SSR、PWA、PWA+SSR、Cordova および Capacitor Mobile AppStore アプリ、Electron Desktop Node+VueJS アプリ、さらにはブラウザー拡張機能) 向けに 1 つのアプリを構築できます。

もう一つ人気のものはナックスまた、静的 HTML/CSS コード生成、および他の UI コンポーネント スイート用のプラグインを使用した SSR または非 SSR ビルド モードもサポートします。

React フレームワーク開発者

リアクト開発者はホットリロードを設定する。

Cordova/Capacitor + Ionic フレームワーク開発者

Iconic は、モバイル専用のハイブリッド コンポーネント フレームワークで、現在では VueJS、React、Angular 開発をサポートしています。自動更新機能を備えたローカル サーバーがツールに組み込まれていますionic。アプリ フォルダーから実行するだけですionic serve。さらに良い点は...ionic serve --labiOS と Android の両方の自動更新の横並びビューを表示します。

おすすめ記事