💡 この記事は GMOペパボ インターンシップ2020 の連載記事です。

こんにちは！引き続き dojineko がお送りします。予定しているカリキュラムの二番目の内容となります。

■ カリキュラム
・マネクラの構成紹介
・初めてのWebAPIを作ってみよう ← ｲﾏｺｺ
・データベースを使ってみよう
・ログイン機能を作ってみよう
・ミニブログを作ってみよう
・ミニブログに機能を追加してみよう

🔆 今回作成するアプリについて

今回は、初めて作るWebアプリケーションとして、GETメソッドに対応する JSON をレスポンスする WebAPI を作ってみようと思います。

目指す完成形としては以下のように、コマンドラインで作ったAPIに対してリクエストを行った場合に対応するレスポンスを返すものを想定しています。

$ curl http://localhost:3000/api/hello
{"hello":"world!"}

🌓 利用する技術スタックの紹介

今回は以下のような技術スタックで進行します。

・Node.js: アプリケーションランタイム
・TypeScript: 開発言語
・Express.js: Webアプリケーションフレームワーク

ランタイムには Node.js を採用しています。また開発言語には軽微なエラーなどを予め排除したり入力補完を便利に活用できるよう TypeScript を含めています。Webアプリケーションのフレームワークには Express.js を利用します。

🏄 開発環境の構築

利用する環境は macOS / Linux / WSL2 (Windows Subsystem for Linux 2) を想定しています。それ以外の環境の場合適宜読み替えをお願いします。

まずは git をインストールします。例では Homebrew 上にホストされている git をインストールしていますが、公式サイトから直接ダウンロードする形でインストールされても構いません。

# Homebrew を使って git をインストールする
$ brew install git

続いて Node.js をインストールします。git と同じくHomebrewからインストールする例を示します。

# Homebrew を使って Node.js をインストールする
$ brew install node

インストール後はコマンドラインから git コマンド、node コマンド、npm コマンドが利用できる状態になっているか確認しましょう。参考コマンドを実行しバージョン情報を確認してください。結果が返ってくれば正常にインストールされています。

$ git version
git version 2.*.*

$ node -v
v14.*.*

$ npm -v
6.*.*

以上で基本の環境構築は完了です。コードを書くエディタはどれを使っても差し支えありませんがここでは Visual Studio Code を使用して進行していきます。「code」というコマンドがない場合は Visual Studio Code のコマンドパレットから「Install 'code' command in PATH」を実行しインストールしましょう。

🔰 手元の環境で作ってみよう

開発環境が出来上がったので早速アプリを作成してみましょう。アプリケーション用の新しいディレクトリを作成し、作業環境の初期化を行います。

# ホームディレクトリに移動
$ cd

# ディレクトリを作成して移動
$ mkdir first-api && cd first-api

# git を初期化
$ git init .

# gitignore を設定
$ echo 'node_modules' > .gitignore

# npm を初期化 (質問はすべて Enter でスキップしてOK)
$ npm init

# 必要なパッケージをインストール
$ npm install typescript ts-node @types/node express @types/express

# エディタを起動
$ code .

まずはアプリケーションの起動コマンドを設定するため、package.json を変更し、scripts の定義に start コマンドを追加します。

"scripts": {
    "start": "ts-node ./index.ts",
    (中略...)
},

続いて TypeScript の設定を行います。下記の内容を tsconfig.json として保存しましょう。

{
  "compilerOptions": {
    "lib": [ "esnext" ],
    "target": "esnext",
    "module": "commonjs",
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "noEmit": true,
    "typeRoots": [ "types" ]
  }
}

続いてアプリケーション本体の作成を行います。​次のファイルを index.ts として保存します。

import express from 'express'

(async () => {
  const app = express()
  const port = process.env.NODE_ENV === 'production' ? 80 : 3000

  app.get('/api/hello', (req, res) => {
    res.json({ hello: 'world!' })
  })
 
  app.listen(port, () => console.log(`ready http://localhost:${port}`))
})()

上記のコードでは Express.js を利用してアプリケーションを初期化した上で、 /api/hello に対して GET リクエストを行うと {"hello": "world!"} とレスポンスする処理を実装しています。加えて、本番環境ではポート80、それ以外では ポート3000 で接続を待機するように設定しています。

コマンドラインで下記のコマンドを実行すると起動します。終了は Ctrl + C を入力します。

$ npm run start

試しにAPIを実行してみます。別のターミナルを起動し curl コマンドを利用して実行してみましょう。

$ curl -s http://localhost:3000/api/hello
{"hello":"world!"}

このように出力が得られれば成功です。Express.js を使ってWebAPIを作ることができました。もし興味があれば、レスポンスする内容を変えてみたり、POSTメソッドを追加してみたりするなど試してみましょう。

🪁 マネクラで動かしてみよう

続いて作ったアプリケーションをマネクラ上で動かしてみましょう。まずマネクラのアカウントを登録し、 Node.js プロジェクトを作成します。まだ登録していない場合はSSH公開鍵の登録まで完了させておきましょう。

作成したプロジェクトの詳細画面に移り、Git Push に使用する接続先設定コマンドをコピーします。

コピーしたらコマンドラインで先程まで作業していたアプリケーションのディレクトリ直下でコピーしたコマンドを実行しましょう。

# 実行するコマンド例
$ git remote add lolipop ssh://*****@ssh-*.mc.lolipop.jp:*****/

ここまでで Git を使ってマネクラにアプリケーションをデプロイ(=転送と設置)する準備ができました。続いてマネクラにアプリケーションをデプロイするために、ソースコードの Commit と Push を行います。先程までの作業環境のディレクトリで以下のコマンドを実行します。

# git に変更を記録するファイルを追加する (今回はすべて)
$ git add .

# 名前をつけて変更をコミット
$ git commit -m "first commit"

# git push を使ってマネクラにデプロイする
$ git push lolipop master

以上でデプロイが完了しました。成功していればターミナル上に下記のような出力があります。

remote: Deploy :ok:
remote: Build success! Thanks for using Lolipop! Managed Cloud.
remote: Restarting app...

無事デプロイが成功したら、プロジェクトにアクセスして動作を確認してみましょう。コマンドライン、もしくはブラウザで作成したプロジェクトにアクセスしてみましょう。手元で確認したときと同じ結果を得られます。

# マネクラにデプロイしたアプリケーションの WebAPI にアクセスする
$ curl https://*****.lolipop.io/api/hello

📚 まとめ

今回は初めてのアプリケーションとして簡単な WebAPI を作成してみました。主に Node.js と Express.js を使用し、マネクラにデプロイする一連の流れを理解できたのではないかと思います。

今回作ったAPIは単純にGETリクエストを行うと固定で結果を返すAPIですが、ベースになる考え方はどのアプリケーションでも同じです。例えば、POST や DELETE などの他のメソッドに対応したり、ユーザーからの入力を受け取って何らかの処理をしたりするなどでアプリケーションの達成したい目的に合うよう実装を追加していくことになります。

次回は今回使った Node.js を利用して、マネクラのプロジェクトに付属する MySQL データベースを利用しデータの読み書きを実践する内容となっています。お時間がありましたらぜひ次回もよろしくおねがいします。