MERNスタック学習 44日目

これまでの私のExpress.jsサーバーはJSONデータのみを送信していましたが、今日、それを変更しました。

バックエンドから直接HTML、CSS、画像を配信する方法を学びました。これにより、プロジェクトは単なるAPIからフルスタックアプリケーションへと進化します。

ファイルルーティングを習得するために、Complete Codingのバックエンドトラックに従って学習しました。

実際のプロダクション環境では、フロントエンドファイルを配信するための効率的な方法が必要です。ファイルを読み込むために独自のループを記述すべきではありません。

今日使用したセットアップは以下の通りです：

  • express.static() ミドルウェア Expressにはexpress.static()という組み込みツールが含まれています。これを使うと、publicやassetsといったフォルダを指定して、ブラウザに配信することができます。

  • path.join() Node.jsのpathモジュールと__dirname変数を使用しました。これにより、Windows、Linux、Macのいずれにおいても、サーバーがエラーなくファイルを見つけられるようになります。

コードはこちらです：

const express = require("express");
const path = require("path");
const app = express();
const PORT = 8000;

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(`Server running on http://localhost:${PORT}`);
});

こうした基礎を構築することで、ウェブがどのように機能しているのかを理解する助けになります。

出典: https://dev.to/ali_hamza_589ec7b3eb6688d/day-44-of-learning-mern-stack-3c0m