読者です 読者をやめる 読者になる 読者になる

express.jsで静的ファイルをexpress.static()で読み込むのに手こずった話

結論からいうとnode実行ディレクトリからのパスを渡さないと読み込めなかった。

TypeScriptを使ってるので、こんな構成なんです。

app
–server.ts
dist
–server.js
–webapp
—-index.html
—-main.js
package.json
tsconfig.json

npm startで./app/server.tsをコンパイルして、./dist配下に配置。
最後にnode ./dist/server.jsを実行してます。
server.jsはこんな感じ。

//erver.ts
import * as express from "express";

const app = express()

app.use("/", express.static('webapp'));

app.get('/', function(req, res) {
    res.sendFile('./webapp/index.html', { root: __dirname });
});

app.listen(3000, function() {
    console.log('Example app listening on port 3000!')
})

はじめ、server.tsをこんな感じで書いてたら、http://localhost:3000 は読めるのだが、http://localhost:3000/main.js が読めなかった。

結局、こう書き直したら読み込めるようになりましたとさ。

app.use("/", express.static('./dist/webapp'));

server.jsから見たらmain.jsって./webapp/main.jsだと思うのだが。。。

色々まじってるけど、参考までにリポジトリはこちら。

github.com

本日のおすそ分けでした。