Nodejs が HTML ファイルを実行する方法

フロントエンド テクノロジーの発展に伴い、動的なフロントエンド レンダリング手法を採用する Web サイト、特に React や Vue などのフレームワークに基づくシングルページ アプリケーションが増えており、これらのアプリケーションは webpack などを通じてさまざまなモジュールやコンポーネントをパッケージ化しています。ツールは静的リソース ファイルにパッケージ化され、最終的にブラウザーで実行されます。ただし、開発、テスト、運用チームの便宜上、Node.js サーバー上でソース コードまたは HTML ファイルを実行する必要がある場合があります。この記事では、Node.js 環境で HTML ファイルを実行する方法について詳しく説明します。

1. Express フレームワークの使用

Express は、Node.js で最も人気のある Web フレームワークの 1 つであり、Web アプリケーションを迅速に構築するためのインフラストラクチャを提供し、HTML ファイルのレンダリングにも使用できます。 . .まず、Express をインストールします:

npm install express --save

次に、HTML ファイル要求を処理するための単純な Express サーバーを作成できます:

const express = require('express')
const path = require('path')
const app = express()

const port = 3000

// 设置静态目录
app.use(express.static(path.join(__dirname, 'public')))

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'))
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

上記のコードでは、Express サーバーを作成し、静的サーバーをセットアップします。ディレクトリ public.ブラウザがこのディレクトリ内のファイルを要求すると、Express はこれらの静的ファイルを自動的に返します。同時に、ルート パスからのリクエストを処理するルートも設定しました。これは、index.html ファイルを返します。これで、public ディレクトリに index.html ファイルを作成できます。このファイルは、http://localhost:3000 にアクセスすることでブラウザで確認できます。ページがアップされました。

2. http モジュールを使用する

Node.js のコア モジュール http も HTTP リクエストと応答を処理できます。http モジュールを使用して、HTML ファイルを処理する単純な HTTP サーバーを起動できます。

const http = require('http')
const fs = require('fs')
const path = require('path')

const port = 3000

const server = http.createServer((req, res) => {
  const filePath = path.join(__dirname, 'public', 'index.html')
  fs.readFile(filePath, (err, data) => {
    if (err) {
      res.writeHead(500, { 'Content-Type': 'text/plain' })
      res.end('Internal Server Error')
      return
    }
    res.writeHead(200, { 'Content-Type': 'text/html' })
    res.end(data)
  })
})

server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`)
})

上記のコードでは、Node.js のコア モジュール http を使用して HTTP サーバーを作成し、HTTP リクエストを処理し、index.html を送信します。ファイルをクライアントの端末に送信し、ブラウザで表示します。

3. fs モジュールの使用

HTTP サーバーを使用する必要がない場合は、fs モジュールを直接使用して HTML ファイルを読み取って返すこともできます。コードは次のとおりです。

const http = require('http')
const fs = require('fs')
const path = require('path')

const port = 3000

const server = http.createServer((req, res) => {
  const filePath = path.join(__dirname, 'public', 'index.html')
  fs.readFile(filePath, (err, data) => {
    if (err) {
      res.writeHead(500, { 'Content-Type': 'text/plain' })
      res.end('Internal Server Error')
      return
    }
    res.writeHead(200, { 'Content-Type': 'text/html' })
    res.end(data)
  })
})

server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`)
})

上記のコードでは、fs モジュールを使用して public/index.html ファイルを読み取り、クライアントに送信します。

4. 概要

この記事では、Node.js 環境で HTML ファイルを実行する 3 つの方法 (Express フレームワークの使用、http モジュールの使用、および fs モジュールの使用) を紹介します。その中でも、Express フレームワークを使用する方法が最も一般的に使用されており、テンプレート エンジン、ルーティング、ミドルウェアなどの機能が追加され、より完成度の高い Web アプリケーションを構築することが容易になります。 http モジュールと fs モジュールの使用は比較的簡単で、HTML ファイルの読み取りや返しなどの単純なタスクに適しています。

以上がNodejs が HTML ファイルを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。