更新日:
Vercel 無料でAPIサーバを立てる TypeScript・Express
ソースコード
{
"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"
}
}
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;
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"src/*": ["src/*"]
},
"strict": true
}
}
{
"version": 2,
"builds": [
{
"src": "index.js",
"use": "@now/node-server"
}
],
"routes": [
{
"src": "/.*",
"dest": "/index.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をビルド
$ npm run ts-build
ローカルで実行 ポート番号3000で鯖が立ち上がる
$ npx vercel dev
デプロイ
$ npx vercel --prod