mern stackで開発する

とりあえず何か作りたいなと思ったので，GPTにおすすめされたmern stackで開発することにしました．

mern stackとは

そもそもmern stackとは何なのかも知らないのでまとめてみました．

MongoDB, Express, React, Node.jsの頭文字を取ったものです．

簡単に書くとこんな感じです．

ゼロから作るのは大変なので，boilerplateを使って開発を進めます．
ボイラープレートとは，開発の初期段階で必要な設定やファイルをまとめたものです．（簡単にいうとテンプレートです）

今回はcreate-mern-appを使いました．

他にも有名なmern stackのboilerplateとしては以下があります．

とりあえず，スターが多く，最近も更新されているcreate-mern-appを使ってみることにしました．

create-mern-appページに行き，READMEの下にあるMERN Boilerplateをダウンロードします．

ダウンロードしたら，解凍してVSCodeで開きます．

動かすには，Node.jsとMongoDBが必要です．
以下はmacOSの場合に限って説明します．

インストールしたらパスを通すのを忘れないようにしましょう
細かいインストール方法は公式サイトまたは他の記事を参考にしてください

HomebrewはmacOS用のパッケージ管理システムです．
Homebrewを使うと，パッケージのインストールやアップデートが簡単にできます．
以下のサイトに行って，コマンドをコピーしてターミナルに貼り付けて実行します．

nodebrewを使ってNode.jsをインストールするのがおすすめです．

brew install nodebrew

以下のコマンドでインストールできます．

nodebrew setup
nodebrew install-binary stable

以下のコマンドでバージョンが表示されればインストール成功です．

npm -v

Homebrewを使ってMongoDBをインストールします．

brew tap mongodb/brew
brew install mongodb-community

プロジェクトのディレクトリに移動して，以下のコマンドを実行します．

npm install

brew services start mongodb-community

npm run dev

これで，http://localhost:8080にアクセスすると，以下の画面が表示されます．

また，ターミナル上で以下のようなログが表示されればデータベースとも連携されています．

********** Successfully Connected To The MongoDB **********

試しにsignupして見ようとすると動かない！

どうやら，.envファイルのNEXT_PUBLIC_API_URLが適切に設定されていないようです．
そもそもmernなのになんでnuxtがあるんだろう??

とりあえず，NEXT_PUBLIC_API_URLをNEXT_PUBLIC_API_URL=http://localhost:8080/api/v1/authに変更すると，signupができるようになりました．

mongodbにしっかり登録されているかをみてみましょう．

以下のコマンドでmongodbに接続します．

mongosh

以下のコマンドでデータベースを選択します．

use migrate-test

以下のコマンドでユーザーを確認します．

db.users.find()

それっぽいjsonが表示されれば成功です．

とりあえず，mern stackでboilerplateを動かしてみました．
ここからどう作っていくかがセンスが問われるところですね．