その他

Node.jsで掲示板アプリのAPIを作成してみよう(環境構築編)

その他
この記事は約6分で読めます。

初めまして、株式会社インプルの岡本です。

初心者でも作成できるように掲示板アプリを複数回に分けて作成する記事を作成してみたいと思います。
私の中では初心者はAPIをあまり作成しないイメージがあるので、どんな感じに作成するのか、
どのように動作確認するのかを知るきっかけになるといいなと思っています。

今回は環境構築編なのでDockerで環境構築をし、
ExpressというフレームワークでHelloWorldを表示させるところまでやっていきたいと思います。

開発環境など

開発環境の言語やツールなど
Node.js v19.9.0
TypeScript
Express
PostgresSQL v15.2
Docker v4.13.0

前提条件
Docker、Postmanのインストールが完了していること

投稿者の環境
MacBook Pro 2021(M1 Pro)

Dockerコンテナ作成の準備

適当な場所にディレクトリを作成し名前をつけます。
名前はなんでもいいですが、この記事では「board_api」という名前にします。
board_api以外の名前をつけた場合は、docker-compose.yml、Dockerfileのboard_apiの箇所を
実際につけた名前に差し替えが必要になるかもしれません。
その中にファイル構成がこのようになるようにファイルを作成してください。

各ファイルの内容は以下の通りなのでコピペで貼り付けてください。
コメントアウトしているところはそのファイルのアドレスになります。
app.tsは現段階では空ファイルで大丈夫です。

# Docker/node/Dockerfile
# ベースイメージにnode:19-alpine3.16を使用
FROM node:19-alpine3.16

# コンテナ内の作業ディレクトリを設定
WORKDIR /home/node/board_api/src
# Docker/postgres/Dockerfile
# ベースイメージでPostgreSQL v15.2を使用
FROM postgres:15.2
#docker-compose.yml
version: "3"
services:
  node:
    container_name: node_container
    build:
      context: ./Docker/node
    # node_containerのポートを3000で作成
    ports:
      - 3000:3000
    volumes:
      - ./src:/home/node/board_api/src
    environment:
      - NODE_ENV_DEVELOPMENT=development
      - NODE_ENV_PRODUCTION=production
    stdin_open: true
    tty: true

  postgres:
    container_name: postgres_container
    build: ./Docker/postgres
    ports:
      - "5432:5432"
    volumes:
      - board-db-volume:/var/lib/postgresql/data
    # データベースの名前やタイムゾーン、ユーザー名とパスワードを指定
    environment:
      TZ: "Asia/Tokyo"
      POSTGRES_DB: board_api_db
      POSTGRES_PASSWORD: password
      POSTGRES_USER: user
    hostname: postgres
    restart: always
volumes:
  board-db-volume:

Dockerコンテナの作成

ターミナルでboard_apiディレクトリに移動し、下記コマンドを実行します。

docker compose up -d --build

実行後以下のような表示があれば、Dockerの環境が作成されているということになります。

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
[+] Running 3/3
 ⠿ Network board_api_default     Created                0.1s
 ⠿ Container postgres_container  Started                0.5s
 ⠿ Container node_container      Started                0.5s

Hello Worldで動作確認の準備

app.tsに下記のコードを貼り付けます。

// src/app.ts
import express, { Request, Response } from "express";

const app = express();
// ポート番号はdocker-compose.ymlにあるnode_containerのポート番号を指定します
const port = 3000;

app.get("/", (req: Request, res: Response) => {
  //Postmanでリクエスト送信時に表示するメッセージを指定します
  res.send("Hello World!");
});

app.listen(port, () => {
  //yarn nodemon ファイル名.tsで実行した画面で表示されるログメッセージです
  console.log(`Example app listening on port ${port}`);
});

必要なパッケージのインストール

コンソールでディレクトリの場所まで移動し、以下のコマンドを実行してyarnで必要なパッケージを
インストールします。

docker compose exec node sh
yarn init #実行するとquestion name(src)など表示されますが、全てそのままEnter
yarn add express
yarn add -D typescript @types/node ts-node @types/express
yarn add nodemon

動作確認

動作確認をしていきます。
下記コマンドを実行し、Example app listening on port 3000と表示されたらサーバーの立ち上げ成功です。

yarn nodemon app.ts
src % yarn nodemon app.ts    
yarn run v1.22.19
$ /Users/impl/Desktop/board_api/src/node_modules/.bin/nodemon app.ts
[nodemon] 3.0.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node app.ts`
Example app listening on port 3000

Postmanを開き、以下の内容でSendをクリックし、Hello World!が表示されればExpressの環境構築完了です。

HTTPメソッド: GET
URL. : http://localhost:3000

次回はデータベース作成編へと続きます。
投稿予定は8/16なので興味があれば見てください。