[MERN①] Express & MongoDB Setup

~~~~~~~~~~ (Contents) MERN ~~~~~~~~~~~
[MERN①] Express & MongoDB Setup
https://qiita.com/niyomong/private/3281af84486876f897f7
[MERN②]User API Routes & JWT Authentication
https://qiita.com/niyomong/private/c11616ff7b64925f9a2b
[MERN③] Profile API Routes
https://qiita.com/niyomong/private/8cff4e6fa0e81b92cb49
[MERN④] Post API
https://qiita.com/niyomong/private/3ce66f15375ad04b8989
[MERN⑤] Getting Started With React & The Frontend
https://qiita.com/niyomong/private/a5759e2fb89c9f222b6b
[MERN⑥] Redux Setup & Alerts
https://qiita.com/niyomong/private/074c27259924c7fd306b
[MERN⑦] React User Authentication
https://qiita.com/niyomong/private/37151784671eff3b92b6
[MERN⑧] Dashboard & Profile Management
https://qiita.com/niyomong/private/ab7e5da1b1983a226aca
[MERN⑨] Profile Display
https://qiita.com/niyomong/private/42426135e959c7844dcb
[MERN⑩] Posts & Comments
https://qiita.com/niyomong/private/19c78aea482b734c3cf5
[MERN11] デプロイ
https://qiita.com/niyomong/private/150f9000ce51548134ad
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

##1. ライブラリのインストール & Expressの基本セットアップ

###1.1 プロジェクトファイル作成とnpm初期設定(仮: MERN)
`.gitignore`ファイル作成

``` MERN/.gitignore
node_modules/
```
・Initialize git repositories
`$ git init`


・Initialize package.json
`$ npm init`

```
{
  "name": "xxx",
  "version": "1.0.0",
  "description": "xxx",
  "main": "server.js",
  "scripts": {
+    "start": "node server", 
+    "server": "nodemon server"
},
  "author": "xxx",
  "license": "MIT",
}
```

###1.2 基本的なライブラリ(Dependencies)をインストール
`$ npm i express express-validator bcryptjs config gravatar jsonwebtoken mongoose request `

~~ 以下、インストールした基本ライブラリ概略。~~
-> express-validator: expressのバリデーション
-> bcryptjs: パスワードの暗号化(ランダム番号に置換する)
-> config: 設定ファイル、デフォルトで./config/default.json等形式のファイルを読み込む
-> gravatar: 自分が投稿したコメントに表示されるアバターを表示
-> jsonwebtoken: 署名の出来るJSONを含んだURL Safeなトークン、認証サーバから返されるトークンに使用
-> mongoose: node.js上でmongoDBを扱うためのライブラリ
-> request: npmで利用することができるHTTPリクエスト機能

`$ npm i -D nodemon concurrently`

~~ 以下、インストールした追加ライブラリ概略。~~
-> nodeの代わりにnodemonを使ってコードを走らせると、コードの変更時にプロセスが自動で再起動する。
-> concurrently: ExpressとReactを同時に動かすために必要。


###1.3 Nodeサーバー構築 for Express

3行目のapp.get(‘/’, function (req, res) {では、appに代入されているexpressのgetメソッドを使用して、ルートパス（/）にアクセスされた際（req）、表示する処理を（res）している

```MERN/server.js
const express = require('express');

const app = express();

app.get('/', (req, res) => res.send('API Running'));

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

```

###1.4 実際にNode.jsサーバーを起動して、Expressを実行する。
`$ npm run server`



##2. MongooseでMongoDBに接続

###2.1 configフォルダ作成 -> config/default.jsonファイル作成
-> Mongo AtlasからDatabaseURIをコピーし、default.jsonにペースト
https://www.virment.com/how-to-use-mongo-db-atlas/
＊user名、password、dbnameは適宜変更

```MERN/config/default.json
{
  "mongoURI": "mongodb+srv://<user名>:<password>@xxxx.lg0op.mongodb.net/<dbname>?retryWrites=true&w=majority"
}
```

###2.2 config/db.jsファイル作成

```MERN/config/db.js
const mongoose = require('mongoose');
const config = require('config');
const db = config.get('mongoURI');

const connectDB = async () => {
  try {
    await mongoose.connect(db, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });

    console.log('MongoDB Connected...');
  } catch (err) {
    console.error(err.message);
    // Exit process with failure
    process.exit(1);
  }
};

module.exports = connectDB;

module.exports = connectDB;
```

###2.3 NodeサーバーにconnectDB追加

```MERN/server.js
const express = require('express');
+ const connectDB = require('./config/db');

const app = express();

+ //Connect Database
+ connectDB();
```

最後に、`$ npm run server`で「MongoDB Connected...」を確認。


##3. Express RouterでRouteファイルを作成

###3.1 routes/apiフォルダを作成（作りたいコントローラー）
user.js
auth.js
profile.js
posts.js

###3.2 下記のExpressの基本コードを４つともコピペ

```routes/api/user.js
const express = require('express');
const router = express.Router();

// @route  GET api/users
// @desc   Test route
// @access Public
router.get('/', (req, res) => res.send('User route'));

module.exports = router;
```

###3.3 NodeサーバーにRouteを設定

```server.js
....
app.get('/', (req, res) => res.send('API Running'));

+ // Define Routes
+ app.use('/api/users', require('./routes/api/users'));
+ app.use('/api/auth', require('./routes/api/auth'));
+ app.use('/api/profile', require('./routes/api/profile'));
+ app.use('/api/posts', require('./routes/api/posts'));

const PORT = process.env.PORT || 5000;
...
```

###3.4 POSTMANでAPI通信確認。
![スクリーンショット 2020-09-05 22.57.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294859/dac86a96-8193-9256-91c2-4f68f9f983bc.png)
-> 通信確認OK!