MEVN STACKとは〜Vueでフルスタックに作りたい〜 Part1

# MEVN STACKって何？
## MEVN STACKってこういうのだよ
### MEVN STACKとは、

- Mongodb
- Express
- Vue.js
- Node.js

の頭文字を取ったもの。
類似にMEAN STACK（Mongodb,Express,AngularJS,Node.js）もありますね！
Qiitaには、MEANはあったけどMEVNについてはなかったので、これから頑張って書いていきたいと思います。
もし少しでもいいね！と思ったら「Looks Good To Me!」をください。励みになります！

## 構成はこうすればできるよ
それぞれの役割についてです。

![vue-node-express-mongodb-crud-mean-stack-architecture.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573960/39bb10fc-833a-1841-5c08-cfce39404605.png)
[引用画像：https://bezkoder.com/vue-node-express-mongodb-mevn-crud/]

上記のような構成で構成します。
構築方法は以下の通りです。

## 環境構築
### ■動作環境
OS:macOS Catalina 10.15.6
Node:v13.8.0
Vue:@vue/cli 4.2.2
mongodb:v4.2.3

### mongodbの起動

ターミナルにて以下のコマンドを実行してmongodbを起動します。パスに記載されているところに「mongod.conf」が作成されているので、必要な項目を設定する。

```terminal.
hoge@hoge-MacBook-Air hoge %mongod --config /usr/local/etc/mongod.conf
```

僕はソースコードのプロジェクトはdocumentsの配下に格納するようにしているので、storageにはdocumentsの下にdataフォルダを作成してデータベースのデータを格納できるようにしているよ。任意でパスは変更してね。

```mongod.conf
systemLog:
  destination: file
  path: /usr/local/var/log/mongodb/mongo.log
  logAppend: true
storage:
  dbPath: /Users/Seastar/Documents/data/db
net:
  bindIp: 127.0.0.1
```
mongodbの起動を完了したらアプリケーションプロジェクトを作成はじめます！

### プロジェクトの作成
今回はhogeという名前で作っているので、必要に応じて変更してくだせぇ。

```terminal.
hoge@hoge-MacBook-Air documents %mkdir hoge && cd hoge
hoge@hoge-MacBook-Air hoge %npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (hoge)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/hoge/Documents/hoge/package.json:

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) y


   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New minor version of npm available! 6.13.6 → 6.14.7       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.14.7   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯
```

上記のコマンドを無事に実行するとhogeフォルダの配下に「package.json」が作成される。
作成されたのを確認したら以下のコマンドを続けて実行する。

```terminal.
hoge@hoge-MacBook-Air hoge %npm install express bcryptjs passport passport-jwt jsonwebtoken mongoose body-parser cors concurrently mongodb
hoge@hoge-MacBook-Air hoge % npm i -D nodemon
```

それぞれの役目は以下の通り

- express
    - Node.jsのフレームワークの一つ
    - サーバーサイド処理を書くために必要
- bcryptjs
    - パスワードなどをハッシュ化するため
- passport
    - 認証機能を実装するため
- passport-jwt
    - passport JSON Web Tokeで電子署名付きのJsonで改ざんチェック
- jsonwebtoken
    - JSON Web Tokeでのチェック
- mongoose
    - mongodbへの操作のため。ちなみにマングース
- body-parser
    - formの入力値を受け取るため
- cors
    - Cross-Origin Resource Sharing
- concurrently
    - npmのコマンドをサーバー側とフロント側で同時に実行するため
- mongodb
    - mongodbを操作するためにドライバーが必要
- nodemon
    - アプリケーションのコードの変更を監視し、変更があった際に自動でサーバーの再起動をしてくれるツー

インストールが完了すると以下のような構成になる。
<img width="603" alt="スクリーンショット 2020-07-30 1.15.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573960/8a4fcf4c-f54d-df1f-f4c2-83201c1ebbdd.png">

その後、「server」のフォルダとVueクライアントの「client」を作成していく。

```terminal.
hoge@hoge-MacBook-Air hoge % mkdir server
hoge@hoge-MacBook-Air hoge % vue create client


Vue CLI v4.2.2
┌─────────────────────────────────────────┐
│                                         │
│   New version available 4.2.2 → 4.4.6   │
│    Run npm i -g @vue/cli to update!     │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

....省略.....

🎉  Successfully created project client.
👉  Get started with the following commands:

 $ cd client
 $ npm run serve

hoge@hoge-MacBook-Air hoge %cd client
hoge@hoge-MacBook-Air client %npm i axios
hoge@hoge-MacBook-Air client %cd ../
hoge@hoge-MacBook-Air hoge %cd server
hoge@hoge-MacBook-Air server %touch index.js
```
### この記事はここまで
長くなるので今回はここまでにします。
次回以降に具体的なコードを作っていきます。