■目次
<aside> 🌿 app.jsにAPI用のサーバーを立てているので、同じポート(3000番)を使ってWebページを表示するための設定をしていく
</aside>
const path = require('path');
app.use(express.static(path.join(__dirname, 'public'))); // アンダーバーは2本
path:パス指定用モジュール(標準で入っているので、npm installはしなくてOK)express.static():静的ファイルのルートディレクトリを設定path.join():第一引数と第二引数に設定したものを繋げるメソッド__dirname:これを記述しているファイル(今回でいうとapp.js)が所属しているパスを指定できる(今回でいうと app/ を指定できる)マーカー箇所を記述する
/** 外部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);
appディレクトリ内に、publicディレクトリを追加する
これでapp > publicディレクトリ内が、静的ファイルの格納場所として機能する

完了!
作成したpublicディレクトリ内に静的ファイルを作成する
【必須】
【任意:プロジェクトにあわせて適宜作成】


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