無料でSSR・ホスティング・API鯖を立てれるVercel。TypeScript・ExpressでAPI鯖を立てる。

{"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*asExpressfrom'express';constapp=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);}exportdefaultapp;

{"compilerOptions":{"baseUrl":"./","paths":{"src/*":["src/*"]},"strict":true}}

{"version":2,"builds":[{"src":"index.js","use":"@now/node-server"}],"routes":[{"src":"/.*","dest":"/index.js"}]}

constpath=require('path');constnodeExternals=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()],};

.vercel
node_modules
index.js

$ npm run ts-build

$ npx vercel dev

$ npx vercel --prod