🥭

ExpressとmongoDBを使ったREST APIをTypeScriptで組んでみる【1.環境構築編】

5 min read

はじめに

Express(TypeScript)を利用してmongoDB(mongoDB Atlas)との連携をする方法の備忘録になります。
※セキュリティやエラー処理については考慮されていない点ご了承ください。

今回は環境構築ということでmongoDB Atlasの設定と、環境設定まで。

mongoDB Atlasの設定

今回は1つのアカウントで1つ限定になりますが、512MBのストレージまでのデータベースを無料で利用できるmongo DB Atlasを利用しました。
googleアカウントを持っていると簡単にサインアップできます。

https://www.mongodb.com

このあと画像がたくさん続きます。。。















お疲れさまでした!
これで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とのやり取りにはmongoDB向けのORMであるmongooseを利用します。

https://mongoosejs.com/

環境設定

また、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への接続テストとダミーデータを投入してみます。

なお、完成版?のソースはこちらになります。

https://github.com/himorishige/techBlog-backend

https://zenn.dev/himorishige/articles/5b645e7eb45f3e

https://zenn.dev/himorishige/articles/5084aab24c9f35

Discussion

ログインするとコメントできます