はじめに
先日React学習のためにローカル環境でJSON Serverと連携したテックブログを組んだのですが、今後の課題にしていたmongoDBとの連携を行っていく記録になります。
今回は環境構築ということでmongoDB Atlasの設定と、環境設定まで。
1. 環境構築編（この記事）
2. mongoDBとの接続
3. Model・Controllerの作成
4. 完成！?
mongoDB Atlasの設定
今回は1つのアカウントで1つ限定になりますが、512MBのストレージまでのデータベースを無料で利用できるmongo DB Atlasを利用しました。
googleアカウントを持っていると簡単にサインアップできます。
このあと画像がたくさん続きます。。。
お疲れさまでした！
これでmongoDBの準備が完了です。
プロジェクト作成
まずはバックエンド用のプロジェクトを新規作成します。
今回はtech-blog-backendという名称で作成しました。
$ mkdir tech-blog-backend
$ cd tech-blog-backend
$ npm init -y
パッケージのインストール
$ yarn add express cors dotenv express-async-handler mongoose
$ yarn add -D @types/node @types/express @types/mongoose @types/cors rimraf @types/rimraf ts-node ts-node-dev npm-run-all typescript
rimraf、ts-node、ts-node-dev、npm-run-allについてはTypeScriptの変換とローカルで起動させるためにそれぞれ利用しています。
今回mongoDBとのやり取りにはmongooseを利用します。
環境設定
また、package.jsonファイルに追記した部分は下記になります。
src/package.json
{
...
"main": "dist/index.js",
"scripts": {
"dev": "ts-node-dev --respawn src/index.ts", // 開発サーバー起動
"clean": "rimraf dist", // ビルドファイルの削除
"tsc": "tsc", // TypeScriptのコンパイル
"build": "npm-run-all clean tsc", // ビルドスクリプト
"start": "node .", // ビルドしたファイルでサービス起動
"data:import": "node dist/seed", // mongoDBへのダミーデータインポート
"data:destroy": "node dist/seed -d" // データのクリア
},
...
}
今回tsconfig.jsonは下記設定で新規作成しました。
tsconfig.json
{
"compilerOptions": {
"target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
"sourceMap": true /* Generates corresponding '.map' file. */,
"outDir": "./dist" /* Redirect output structure to the directory. */,
"strict": true /* Enable all strict type-checking options. */,
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
"skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
},
"include": ["src/**/*"]
}
また、mongoDB Atlasとの接続情報は.envファイルに記載します。
管理画面から取得した情報に、ご自身で設定したユーザー名、パスワード、データベース名を追記変更して貼り付けます。
.env
MONGO_URI=mongodb+srv://設定したユーザー名:設定したパスワード@cluster0.dcip*.mongodb.net/設定したデータベース名?retryWrites=true&w=majority
.envファイルなど不要なファイルをgit環境にあげないように忘れずに.gitignoreファイルも用意しておきます。
.gitignore
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/dist
# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
さいごに
これで環境構築完了です！
次回はDBへの接続テストとダミーデータを投入してみます。
なお、完成版？のソースはこちらになります。
↧