【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.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