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

【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!までをまとめます。

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()として標準搭載されている話

app.get

Expressのメソッドで、HTTPリクエストのGET処理をする。

参考:app.get.method

app.listen

Expressのメソッドで、ポートやホストを指定して接続します。

参考:app.listen

まとめ

たったの30行弱のコードでしたが、学びになることがたくさんありました!
次回は

参考チュートリアル

フルスタック:React.js + Node.js + Express + MongoDB example: MERN stack CRUD App
– フロントエンド:React Hooks CRUD example with Axios and Web API
– バックエンド:Node.js, Express & MongoDb: Build a CRUD Rest Api example