まず、最初にExpress Webサーバーのプロジェクトを作成するまで。
1. npmの初期化とExpressのインストール
- 下記コマンドでpackage.jsonファイルを生成し、expressをインストールする。
> npm init // 全部デフォルトを受け入れる > npm i express
2. 新しいExpressサーバーのセットアップ
publicディレクトリの提供
- publicフォルダを作成する。
- index.js を次のように作成します。
- app.js ではpublicフォルダのパスを生成して、expressにそのパスを提供する。
const path = require('path')
const express = require('express')
const app = express()
const publicDirectoryPath = path.join(__dirname, '../public')
app.use(express.static(publicDirectoryPath)) port 3000を監視する
- デプロイのことを考えて、ポート番号をコードに直接書かず、dev.envファイルからポート番号が供給されるようにするため env-cmd をインストールする。
npm i env-cmd@8.0.2
- configフォルダを作成し、 そこに次の内容のdev.envファイルを置く。
PORT=3000
- index.js に次のコードを追加する。
const port = process.env.port
app.listen(port, () => {
console.log(`Server is up on port ${port}`)
}) 3. index.htmlを作成する
- まずは public フォルダを作成し、そこに index.html を作成する。
<!DOCTYPE html> <html lang="ja""> <head> <meta charset="UTF-8"> <title>チャットアプリ</title> </head> <body> <h1>チャットアプリ！</h1> </body> </html>
4. テスト
準備
- nodemon がインストールされていなければインストールする。
npm install --save-dev nodemon
- package.json を次のように設定しておく。
"scripts": {
"start": "env-cmd ./config/dev.env node src/index.js", // この行と
"dev": "env-cmd ./config/dev.env nodemon src/index.js -e js", // この行を追加
}, 実施
- 以下のいずれかを実行。
> npm run start 又は > npm run dev
- ブラウザで localhost:3000 にアクセスする。
