🐈

Node.jsデビュー！(404 not foundを防ぐ方法を紹介〜)

2021/03/29に公開

HTML

Node.js

npm

tech

Node.jsとは

どうも茄子です！Node.jsとはJavaScriptコードを解釈してアプリケーションを実行するためのプラットフォームです。メリットとしてはデータの連続的なストリーミング(インターネットに接続しながら映像、音声データが楽しめる再生方式のこと。)です。今回の記事は、Webを公開した時に役立つ情報を書きます！

404 not found

Webを実行した時

開発者：どこか間違えている〜。だるい。
はい、私もこの表示嫌いですわ。
ユーザー：このWebサイト全く信用できないやん。
このような評価を受けてしまいます。
なので、URLが存在していない時にこのエラーを自分が作ったメッセージやhtmlファウルで返す方法を紹介したいと思います！

Node.jsでの解決策

今回はパッケージhttp-status-codesを使用します。

Home.js

const port = 3000,
    //必要なモジュールをインポート
    fs = require("fs"),
    http = require("http"),
    httpStatus = require("http-status-codes"),
    htmlContentType = {
        "Content-Type": "text/html"
    };

const routes = {
        "GET": {},
        "POST": {}
    };

    handle = (req, res) => {
        try{
            routes[req.method][req.url](req, res);
        } catch (e) {
            res.writeHead(httpStatus.NOT_FOUND, htmlContentType);
            customReadFile("views/error.html", res);
        }
    };
    
    //経路関数をマップするgetとpostの関数
    get = (url, action) => {
        routes["GET"][url] = action;
    };

    post = (url, action) => {
        routes["POST"][url] = action;
    };

customReadFile = (file, res) => {
    fs.readFile(`./${file}`, (error, data) => {
        if (error) {
            res.writeHead(httpStatus.INTERNAL_SERVER_ERROR, htmlContentType);
            res.end("There was an error serving content!");
        }
        res.end(data);
    });
}
//Webページとアセットについて、一連の経路を追加
get("/", (req, res) => {
    res.writeHead(httpStatus.OK, htmlContentType);
    customReadFile("views/index.html", res);
});

// サーバーを起動
http.createServer(handle).listen(port);
console.log(`The server is listening on port number: ${port}`);

プロジェクト内のHome.jsと同じところにviewsというフォルダを作り、その中に使用するhtmlファイルをまてめています。localhostのport番号は3000番です。
http://localhost:3000/

http://localhost:3000/nuok

このようにURLが間違っていてもerror.html内の内容を表示することができました！(htmlファイル適当でごめんなさい)。ちなみにcustomReadFileの内容はサーバーエラーなので今回はスルーで。

まとめ

このように404 not foundを回避できました。htmlファイルをきれいに作ると、ファイルが見つからなくてもきれいな画面を表示できると思うのでぜひやってみてください。次はnode.jsを使用して、位置情報からユーザーに何か価値を与えられるようなWebアプリを作成する予定です。完成したら上げるので見ていってください！

Node.jsとは

404 not found

Node.jsでの解決策

まとめ

Discussion