■目次

1. HTMLを表示するためのWebサーバー設定

<aside> 🌿 app.jsにAPI用のサーバーを立てているので、同じポート(3000番)を使ってWebページを表示するための設定をしていく

</aside>

1-1. 基本構文

const path = require('path');
app.use(express.static(path.join(__dirname, 'public'))); // アンダーバーは2本

1-2. 実装例

  1. マーカー箇所を記述する

    /** 外部import */
    const express = require("express");
    const app = express();
    const sqlite3 = require("sqlite3");
    **const path = require("path");**
    
    /** 内部import */
    const dbPath = "app/db/database.sqlite3";
    
    /** web server */
    // publicディレクトリを静的ファイル群のルートディレクトリとして設定
    **app.use(express.static(path.join(__dirname, "public")));**
    
    /** API */
    // Get all users
    app.get("/api/v1/users", (req, res) => {
      // Connect database
      const db = new sqlite3.Database(dbPath);
    
      db.all("SELECT * FROM users", (err, rows) => {
        res.json(rows);
      });
    
      db.close();
    });
    
    // Get a user
    app.get("/api/v1/users/:id", (req, res) => {
      // Connect database
      const db = new sqlite3.Database(dbPath);
      // :idに入ってきた値をidに格納
      const id = req.params.id;
    
      // SQLはテンプレートリテラルで記述する
      db.get(`SELECT * FROM users WHERE id = ${id}`, (err, row) => {
        res.json(row);
      });
    
      db.close();
    });
    
    // Search users matching keyword
    app.get("/api/v1/search", (req, res) => {
      // Connect database
      const db = new sqlite3.Database(dbPath);
      // queryパラメータに入ってきた値をkeywordに格納
      const keyword = req.query.q;
    
      // "%${keyword}%":keywordに部分一致するものが全て取得される。文字列なので""で囲っている
      db.all(`SELECT * FROM users WHERE name LIKE "%${keyword}%"`, (err, rows) => {
        res.json(rows);
      });
    
      db.close();
    });
    
    /** server */
    // process.env.PORT:ローカルの環境変数(PORT)を参照する
    // process.env.PORTが指定されていればそれを、なければ3000番を指定する
    const port = process.env.PORT || 3000;
    // 通常であれば、3000番台でアプリケーションを立ち上げる
    app.listen(port);
    
    // サーバーが立ち上がったかを確認する
    console.log("Listen on port: " + port);
    
  2. appディレクトリ内に、publicディレクトリを追加する

    これでapp > publicディレクトリ内が、静的ファイルの格納場所として機能する

    スクリーンショット 2022-12-23 11.49.18.png

  3. 完了!

2. 静的ファイルの作成・ディレクトリ構成の確認

2-1. 静的ファイルの作成

  1. 作成したpublicディレクトリ内に静的ファイルを作成する

    【必須】

    【任意:プロジェクトにあわせて適宜作成】

    スクリーンショット 2022-12-23 11.58.33.png

2-2. ディレクトリ構成の確認

https://www.youtube.com/watch?v=pRoIxvhFbow&list=PLX8Rsrpnn3IVW5P1H1s_AOP0EEyMyiRDA&index=5

https://www.youtube.com/watch?v=pRoIxvhFbow&list=PLX8Rsrpnn3IVW5P1H1s_AOP0EEyMyiRDA&index=5