初めまして、株式会社インプルの岡本です。
初心者でも作成できるように掲示板アプリを複数回に分けて作成する記事を作成してみたいと思います。
私の中では初心者は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なので興味があれば見てください。