【React.js Node.js Express MongoDBでwebアプリ】②Expressの設定とHello,World!まで

こんにちは、Mako（@makokamiya）です。

今回は、こちらのチュートリアルを参考に、React.js + Node.js + Express + MongoDB(MERN stack)の構成でwebアプリを作ろうと思うので、調べた内容を記録していきます！

前回は、Node.jsを新規作成し、モジュールをインストールまでをまとめました。

この記事は、こちらのチュートリアルの、バックエンドNode.js, Express & MongoDb: Build a CRUD Rest Api exampleに沿って、Expressの設定からHello,World!までをまとめます。

1. Node.js Appの作成
2. 用語・コードの理解
3. まとめ
4. 参考チュートリアル

Node.js Appの作成

ルートディレクトリに、server.js という名前のフォルダを作成します。

// ミドルウエアの読み込み
const express = require("express");
const cors = require("cors");

// expressのインスタンス作成
const app = express();

// 「フロントではhttp://localhost:8081を使うよー。。」
var corsOptions = {
    origin: "http://localhost:8081"
};
app.use(cors(corsOptions));

// 「JSON形式で返すよー。。」
app.use(express.json())

// 「POSTデータ（x-www-form-urlencoded）を受け取るよー。。」
app.use(express.urlencoded({ extended: true }));

// simple route
app.get("/", (req, res) => {
    res.json({ message: "Hello, World!" });
});

// 「8080ポートでサーバー立ち上げるよー。。」
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}.`);
});

以下のコマンドでExpressサーバーを立ち上げ、ブラウザ確認をします。 http://localhost:8080/

node server.js

用語・コードの理解

require();

JavaScriptのメソッドで、インストールしたモジュールやライブラリやミドルウェアを読み込む。

参考：jsのimportとrequireの違い
参考：JavaScript コードモジュールの利用

cors

ウェブのセキュリティ上、異なるオリジン間でのリソースのアクセスはできないように制限されています。CORSはそれを可能にするしくみです。

今回のように、フロントエンドとバックエンドを分けて、異なるオリジン間でリソースのやり取りをする場合は、必ずCORS設定をしなければいけません。

今回の場合、バックエンドのExpressは「http://localhost:8080」で、フロントエンドのReact(axios)で「http://localhost:8081」を使用します。

参考：オリジン間リソース共有
参考：オリジン
参考：同一オリジンポリシー

app.use

Expressのメソッドで、インストールしたモジュールやライブラリやミドルウェアを使用する。

参考：サード・パーティー・ミドルウェア

express.json()

Expressのメソッドで、リクエストをJSON形式で返します。

参考：express.json

express.urlencoded()

Expressのメソッドで、フォームからのPOSTデータを受け取る。

※extendedのオプションはデフォルトでtrueなので、引数を与えずに起動してみると、問題なく動きますが、「body-parser deprecated undefined extended: provide extended option server.js:18:17」と注意されたので、trueでも指定したほうがよさそうです。

※extended:falseだと単にクエリ文字列、extended: trueだと、JSON likeにパースしてくれるqsモジュールを使うという認識でおります。

チュートリアルでは body-parser.json()、bodyParser.urlencoded()で書いていますが、body-parser はexpressに標準搭載されたようですので、今回はexpress.json()、express.urlencoded()で書きました。問題なく動きます。

参考：Body-ParserがExpressにexpress.json()として標準搭載されている話