Ⅰ. プロジェクト全体の構造

プロジェクト全体構造

01. server.js, package.json, package-lock.json

┣ 📜package-lock.json
┣ 📜package.json
┣ 📜server.js

(1) package.json

package.jsonには、プロジェクトで使用されるモジュール情報が含まれます.npm installでモジュールをインストールできます.

(2) server.js

server.jsは入り口点です.node server.jsを介してサーバを起動し、http://localhost:3000行きますに接続します.
しかしながら、本プロジェクト開発では、サーバが実行時に中断なくサービスを提供できるようにするpm2というモジュールが使用されている.pm2 start server.js --watch --ignore-watch="uploads/*"(コマンドにエラーが発生した場合はpm2 start server.js --watch --ignore-watch="uploads/")コマンドを使用してサーバを実行します.上記のコマンドを実行すると、ユーザがファイルをアップロードしたことによるアップロードファイルの変化は検出されないため、セッションは変更されません.

02. models

📦models
┣ 📜Challenge.js
┣ 📜Comment.js
┣ 📜Review.js
┗ 📜User.js
MongoDBに接続し、schemaを生成します.
本プロジェクトで使用するアーキテクチャは以下の通りである.Challenge.jsはChallengschema,Commentです.jsはcommentschema,Reviewです.jsはReviewschema、そしてUserです.jsはschema(ユーザデータを含む)を生成する.

03. public

📦public
┣ 📂css
┃ ┣ 📜challenge.css
┃ ┣ 📜chall_select.css
┃ ┣ 📜create.css
┃ ┣ 📜detail.css
┃ ┣ 📜envinfo.css
┃ ┣ 📜login.css
┃ ┣ 📜main.css
┃ ┣ 📜mainpage.css
┃ ┣ 📜map.css
┃ ┣ 📜mypage.css
┃ ┗ 📜review.css
┣ 📂js
┃ ┣ 📜challenge.js
┃ ┣ 📜map.js
┃ ┗ 📜review.js
┣ 📜banner1.png
┣ 📜banner2.png
┣ 📜banner3.png
┗ 📜favicon.ico
これらは、プロジェクトで使用される静的リソースです.

04. router

📦router
┣ 📜account.js
┣ 📜challenge.js
┣ 📜envinfo.js
┣ 📜main.js
┣ 📜mypage.js
┣ 📜place.js
┗ 📜review.js
ルータは別々に配置されています.server.jsでは以下のようにルータの構造を決定する.

app.use("/place", require('./router/place.js'));
app.use("/account", require('./router/account.js'));
app.use("/review", require('./router/review.js'));
app.use("/challenge", require('./router/challenge.js'));
app.use("/mypage", require('./router/mypage.js'));
app.use("/envinfo", require('./router/envinfo.js'));

05. uploads

📦uploads
┗ 📜yonginae_default.jpg
ユーザーがアップロードしたメディアリソースが格納されている場所.yonginae_default.jpgは、ユーザがコメントを書く際に写真をアップロードしなかった場合にデフォルトで添付される画像ファイルである.

06. views

📦views
┣ 📂account
┃ ┣ 📜login.ejs
┃ ┗ 📜signup.ejs
┣ 📂challenge
┃ ┣ 📜challenge.ejs
┃ ┗ 📜review_select.ejs
┣ 📂envinfo
┃ ┗ 📜envinfo.ejs
┣ 📂mypage
┃ ┣ 📜mychallenge.ejs
┃ ┣ 📜mypage.ejs
┃ ┗ 📜myreview.ejs
┣ 📂place
┃ ┣ 📜place.ejs
┃ ┣ 📜place_create.ejs
┃ ┗ 📜place_review.ejs
┣ 📂review
┃ ┣ 📜create.ejs
┃ ┣ 📜detail.ejs
┃ ┣ 📜edit.ejs
┃ ┗ 📜review.ejs
┣ 📜header.ejs
┣ 📜index.ejs
┗ 📜nav.ejs
このプロジェクトでは、ejsとしてtemplateを使用してダイナミックページを作成します.

Ⅱ. 使用するモジュール

00. pacakge.json

package.jsonのdependencies

body-parser:POSTリクエストのbody(req.body)から必要な情報を簡単に抽出できます.
( https://www.npmjs.com/package/body-parser )

cookie-解析器:リクエストしたcookieを簡単に抽出できます.
( https://www.npmjs.com/package/cookie-parser )

ejs:ejsラベルは、ダイナミックページを整理できるテンプレートエンジンです.
( https://www.npmjs.com/package/ejs )

entities:APIからデータを受信すると、データ内部の文字列にHTMLエンティティ(e.g.、<、>)が含まれる場合があります.これらのHTMLエンティティを文字に変更するモジュールです.
( https://www.npmjs.com/package/entities )

express: Node.js Webアプリケーションフレームワーク
( https://www.npmjs.com/package/express )

express-session:Expressフレームワークで使用可能なセッションミドルウェア.ログイン情報格納時に使用します.
( https://www.npmjs.com/search?q=express-session )

mongoose: MongoDB ODM. JavaScriptオブジェクトによるDB操作を許可します.MongoDBのschemaフィールドの設定を許可し、populateでSQLのjoinのような結果を返すことができます.
( https://www.npmjs.com/package/mongoose )

Multier:アップロードされたファイルをユーザーが処理できるようにします.(multipart/form-data)
( https://www.npmjs.com/search?q=multer )

pm2: Node.jsアプリケーションのプロセスマネージャ.変更を反映したり、サーバログを表示したりするのに便利です.
( https://www.npmjs.com/package/pm2 )

request:urlにリソースを要求し、応答を受信するプロセスを簡略化するためのモジュール.apiを使うときに使いました.2020年2月に廃止された.
( https://www.npmjs.com/package/request )

serve-favicon:Parbiconの使用を許可するモジュールです.
( https://www.npmjs.com/package/serve-favicon )