更新日:

Vercel 無料でAPIサーバを立てる TypeScript・Express


ソースコード

package.json
{
  "scripts": {
    "ts-build": "webpack --mode production"
  },
  "devDependencies": {
    "@types/express": "^4.17.8",
    "ts-loader": "^8.0.3",
    "typescript": "^4.0.2",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-node-externals": "^2.5.2"
  },
  "dependencies": {
    "express": "^4.17.1",
    "vercel": "^20.1.0"
  }
}
src/index.ts
import * as Express from 'express';

const app = Express();

// postリクエスト使えるようにする
app.use(Express.json());
app.use(Express.urlencoded({ extended: true }));

app.get('/get/:name', (req: Express.Request, res: Express.Response) => {
  try {
    res.send({ name: req.params.name });
  } catch (error) {
    res.sendStatus(500);
  }
});

app.post('/post', (req: Express.Request, res: Express.Response) => {
  try {
    res.send({ name: req.body.name });
  } catch (error) {
    res.sendStatus(500);
  }
});

if (!process.env.NOW_REGION) {
  app.listen(process.env.PORT || 3000);
}

export default app;
tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "src/*": ["src/*"]
    },
    "strict": true
  }
}
vercel.json
{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@now/node-server"
    }
  ],
  "routes": [
    {
      "src": "/.*",
      "dest": "/index.js"
    }
  ]
}
webpack.config.js
const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: 'development',
  entry: './src/index.ts',

  // ファイルの出力設定
  output: {
    path: `${__dirname}/`,
    filename: 'index.js',
    libraryTarget: 'this',
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
        options: {
          configFile: path.resolve(__dirname, 'tsconfig.json'),
        },
      },
    ],
  },
  // import 文で .ts ファイルを解決するため
  // これを定義しないと import 文で拡張子を書く必要が生まれる。
  resolve: {
    // 拡張子を配列で指定
    extensions: ['.ts', '.js'],
    alias: {
      src: path.resolve(__dirname, 'src'),
    },
  },

  externals: [nodeExternals()],
};


コマンド

TypeScriptをビルド

bash
$ npm run ts-build

ローカルで実行 ポート番号3000で鯖が立ち上がる

bash
$ npx vercel dev

デプロイ

bash
$ npx vercel --prod