Smile Comfort

VercelとExpressで簡単サーバーレスAPI！初心者向け構築ガイド

投稿日：
更新日：

1. はじめに：VercelとExpressとは？

1.1 Vercelとは？

Vercel（バーセル）は、フロントエンド開発に特化したクラウドプラットフォームです。特に、Next.jsやReactなどのJavaScriptフレームワークとの相性が良く、高速なデプロイとパフォーマンスを提供します。サーバーレス関数（Serverless Functions）の実行環境も提供しており、APIエンドポイントを簡単に構築できます。

1.2 Expressとは？

Express（エクスプレス）は、Node.jsのための軽量なWebアプリケーションフレームワークです。ルーティング、ミドルウェア、テンプレートエンジンなど、Webアプリケーション開発に必要な機能を提供します。シンプルで柔軟なAPI設計が特徴で、多くの開発者に利用されています。

1.3 なぜVercelとExpressを組み合わせるのか？

VercelとExpressを組み合わせることで、サーバーレス環境でExpressの柔軟性を活かしたAPIを構築できます。Vercelはインフラの管理を自動化し、ExpressはAPIのロジックを記述するための強力なツールを提供します。これにより、開発者はインフラの心配をせずに、アプリケーションのロジックに集中できます。

2. 開発環境の準備

2.1 Node.jsとnpmのインストール

まず、Node.jsとnpm（Node Package Manager）がインストールされていることを確認してください。インストールされていない場合は、Node.jsの公式サイトからダウンロードしてインストールしてください。

# Node.jsのバージョンを確認
node -v

# npmのバージョンを確認
npm -v

2.2 Vercel CLIのインストール

Vercel CLI（コマンドラインインターフェース）をインストールします。Vercel CLIを使うことで、ローカル環境からVercelにアプリケーションをデプロイできます。

npm install -g vercel

2.3 Vercelアカウントの作成とログイン

Vercelの公式サイトでアカウントを作成し、Vercel CLIでログインします。

vercel login

3. Expressアプリケーションの作成

3.1 プロジェクトディレクトリの作成

新しいプロジェクトディレクトリを作成し、そのディレクトリに移動します。

mkdir vercel-express-api
cd vercel-express-api

3.2 npmプロジェクトの初期化

npmプロジェクトを初期化します。

npm init -y

3.3 Expressのインストール

Expressをインストールします。

npm install express

3.4 サーバーレス関数用のファイル作成

`api`ディレクトリを作成し、その中に`index.js`ファイルを作成します。このファイルがサーバーレス関数のエントリーポイントになります。

mkdir api
touch api/index.js

3.5 `api/index.js`にコードを記述

`api/index.js`に以下のコードを記述します。

// api/index.js
const express = require('express');
const app = express();

// CORS（Cross-Origin Resource Sharing）を許可するためのミドルウェア
// 異なるオリジンからのリクエストを許可します
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// GETリクエストに対するルート
app.get('/api', (req, res) => {
  res.status(200).send({ message: 'Hello from Vercel and Express!' });
});

// POSTリクエストに対するルート
app.post('/api', (req, res) => {
  res.status(200).send({ message: 'POST request received!' });
});

// Vercelにデプロイするために、Expressアプリをエクスポート
module.exports = app;

4. Vercelへのデプロイ

4.1 `vercel.json`ファイルの作成

プロジェクトのルートディレクトリに`vercel.json`ファイルを作成します。このファイルは、Vercelの設定を記述するためのものです。

{
  "version": 2,
  "builds": [
    {
      "src": "api/index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/api",
      "dest": "/api/index.js"
    }
  ]
}

4.2 Vercelへのデプロイ

Vercel CLIを使って、アプリケーションをデプロイします。

vercel

5. APIのテスト

デプロイされたAPIをテストします。ブラウザでURLにアクセスするか、`curl`コマンドなどを使ってリクエストを送信します。

curl <Vercelから提供されたURL>/api

レスポンスとして`{“message”: “Hello from Vercel and Express!”}`が表示されれば、APIは正常に動作しています。

6. まとめ

この記事では、VercelとExpressを使ってサーバーレスAPIを構築する方法を解説しました。

  • Vercelはサーバーレス関数の実行環境を提供し、インフラの管理を自動化します。
  • ExpressはAPIのロジックを記述するための強力なフレームワークです。
  • Vercel CLIを使うことで、ローカル環境からVercelにアプリケーションを簡単にデプロイできます。

次のステップとして、以下のことを試してみてください。

  • データベースとの連携
  • 認証機能の追加
  • より複雑なAPIの構築

VercelとExpressを組み合わせることで、スケーラブルで高性能なAPIを簡単に構築できます。ぜひ、色々なAPIを開発してみてください。