Nodejs で Web サイトを構築-フロントエンドQ&A-php.cn

Nodejs で Web サイトを構築

WBOY

リリース： 2023-05-11 22:18:35

オリジナル

1874 人が閲覧しました

Web テクノロジーの継続的な発展により、Node.js は最も広く使用される開発言語の 1 つになりました。 Node.js は、Chrome V8 エンジンに基づく JavaScript ランタイム環境であり、高速でスケーラブルな Web アプリケーションの構築に適しています。この記事では、Node.js を使用して Web サイトを構築するプロセスを紹介します。

1. 環境セットアップ

開始する前に、まず環境をセットアップする必要があります。 LTS 版の Node.js を使用し、公式 Web サイト (https://nodejs.org/ja/) から対応するシステムのインストールパッケージをダウンロードしてインストールすることを推奨します。

インストールが完了したら、Node.js の環境変数が正しく構成されているかどうかを確認する必要があります。コマンドラインウィンドウを開き、node -v と入力します。バージョン番号が表示されれば、インストールは成功です。

2. HTTP サーバーの構築

Node.js には http モジュールが用意されており、これを使用して Web サーバーを作成できます。このうち、createServer() メソッドは HTTP サーバーを作成し、listen() メソッドは指定されたポートと IP アドレスをリッスンします。

コードは次のとおりです:

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World!
');
});

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

ログイン後にコピー

上記のコードは、ローカルポート 3000 をリッスンする単純な HTTP サーバーを作成します。ブラウザに http://127.0.0.1:3000/ と入力して、サーバー上のページにアクセスします。ページのコンテンツは Hello World! です。

3. ルーティングの処理

単に Hello World をクライアントに送信するだけの場合!メッセージを受信する場合は、HTTP サーバーを使用すれば十分です。ただし、実際の開発では、より複雑な要求応答シナリオが発生し、ルーティングを処理する必要があります。

この例では、/home と /about の 2 つのページがあると仮定します。これら 2 つのページへのアクセスをリクエストする場合は、異なる処理が必要です。したがって、HTTPサーバーにルーティング処理を追加することができます。

コードは次のとおりです:

const http = require('http');
const url = require('url');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    const uri = url.parse(req.url).pathname;
    if (uri === '/home') {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end('Welcome to the homepage!
');
    } else if (uri === '/about') {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end('About the website!
');
    } else {
        res.statusCode = 404;
        res.setHeader('Content-Type', 'text/plain');
        res.end('404 Not Found
');
    }
});

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

ログイン後にコピー

上記のコードでは、Node.js の組み込み URL モジュールを使用して、要求された URL アドレスをルーティング処理用のパス名に解析します。要求されたパス名が /home の場合、サーバーは「ホームページへようこそ!」を返します。要求されたパス名が /about の場合、サーバーは「Web サイトについて!」を返します。要求されたパス名が存在しない場合、サーバーは 404 Not を返します。見つかった。

4. テンプレートエンジンを使用する

実際の開発では、テンプレートエンジンを使用することで開発効率が大幅に向上します。一般的に使用されるテンプレートエンジンには、ejs、ハンドルバー、jade などが含まれます。この例では、ページのレンダリングに ejs テンプレートエンジンが使用されます。

まず、npm を介して ejs モジュールをインストールします:

npm install ejs --save

ログイン後にコピー

HTTP サーバーに変更を加え、テンプレートエンジンを使用して HTML ページをレンダリングします:

const http = require('http');
const url = require('url');
const ejs = require('ejs');
const fs = require('fs');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    const uri = url.parse(req.url).pathname;

    if (uri === '/home') {
        fs.readFile('./views/home.ejs', 'utf8', (err, data) => {
            if (err) {
                console.log(err);
                res.statusCode = 404;
                res.setHeader('Content-Type', 'text/plain');
                res.end('File not found!
');
            } else {
                res.statusCode = 200;
                res.setHeader('Content-Type', 'text/html');
                const template = ejs.compile(data);
                const html = template({title: 'Home Page', message: 'Welcome to the homepage!'});
                res.end(html);
            }
        });
    } else if (uri === '/about') {
        fs.readFile('./views/about.ejs', 'utf8', (err, data) => {
            if (err) {
                console.log(err);
                res.statusCode = 404;
                res.setHeader('Content-Type', 'text/plain');
                res.end('File not found!
');
            } else {
                res.statusCode = 200;
                res.setHeader('Content-Type', 'text/html');
                const template = ejs.compile(data);
                const html = template({title: 'About Page', message: 'About the website!'});
                res.end(html);
            }
        });
    } else {
        res.statusCode = 404;
        res.setHeader('Content-Type', 'text/plain');
        res.end('404 Not Found
');
    }
});

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

ログイン後にコピー

上記のコードでは、 fs モジュールが使用されます。テンプレートファイルを読み取り、ejs モジュールを使用してテンプレートファイルをレンダリングし、生成された HTML ページをクライアントに返します。

5. 静的ファイルを使用する

実際の開発では、通常、画像、CSS ファイル、JavaScript ファイルなどの静的ファイルが使用されます。 Node.js は、静的ファイルのリクエストを処理するために使用できる静的ファイルサービスを提供します。

コードは次のとおりです:

const http = require('http');
const url = require('url');
const ejs = require('ejs');
const fs = require('fs');
const path = require('path');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    const uri = url.parse(req.url).pathname;
    const filename = path.join(process.cwd(), uri);

    fs.exists(filename, (exists) => {
        if (!exists) {
            res.statusCode = 404;
            res.setHeader('Content-Type', 'text/plain');
            res.end('404 Not Found
');
            return;
        }

        if (fs.statSync(filename).isDirectory()) {
            filename += '/index.html';
        }

        fs.readFile(filename, 'binary', (err, file) => {
            if (err) {
                res.statusCode = 500;
                res.setHeader('Content-Type', 'text/plain');
                res.end(err + '
');
                return;
            }

            res.statusCode = 200;
            const extname = path.extname(filename);
            res.setHeader('Content-Type', mimeTypes[extname] || 'text/plain');
            res.write(file, 'binary');
            res.end();
        });
    });
});

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

ログイン後にコピー

上記のコードでは、要求されたファイルが存在するかどうかを判断するために fs モジュールが使用され、パスを処理するために path モジュールが使用され、mimeTypes はファイルタイプを定義するために使用されます。要求されたファイルが存在しない場合は 404 Not Found が返されます。要求がフォルダーの場合は、デフォルトでフォルダー内の Index.html ファイルが要求されます。ファイルが正常に読み取られた場合は 200 が返され、Content-Typeヘッダーとレスポンスを同時に設定します。

上記の操作により、Node.js を使用して Web サイトを構築し、基本的なルーティング処理と静的ファイルサービスを実装することができました。さらなる研究と実践を通じて、より複雑な Web サイトを作成し、データベース操作やリクエストエージェントなどのより多くの機能を実装できるようになります。

以上がNodejs で Web サイトを構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。