チャットアプリの作成：① プロジェクトの作成

2019-10-30

まず、最初に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 にアクセスする。
index.html の表示

サーバーサイド・フレームワーク, サーバーサイド言語, 中級の学習, 学習Express, Node.js, npm

Posted by pitang1965