同じサーバで Node.js の API と Angular を扱いたい

Qiitaより転載
2018/7/5 初投稿

---

nginx を使って angular アプリをサーブしようと思っていて、node.js + express で作ったサーバプログラムを動かそうと思ったんですが、angular のルータと express のルータがバッティングしてうまくいかなかった。

例えば

/     -> localhost/index.html
/api/ -> localhost:52000/

こんな設定にしたとしても、/api/ が / にリダイレクトされるか、されなかったとしても 502 が出てしまってうまくいかなかった。

nginx について頑張って調べたらうまくいったのかもしれないけどめんどくさくなってきたので node.js のサーバプログラムで angular アプリをサーブすることにした。

import * as express from 'express';
import * as path from "path";

import {LoginHandler} from './handlers/login';
import {TokenCheck} from "./handlers/token-check";

const app = express();
const router = express.Router();
const port = 52000;

// [/api]
app.use('/api', router);

// [/api/login]
router.get('/login', async (request, response) => {
    const loginHandler = new LoginHandler();
    await loginHandler.handle(request, response);
});

router.get('/check-login', async (request, response) => {
    const tokenCheckHandler = new TokenCheck();
    await tokenCheckHandler.handle(request, response);
});

// [/]
app.get('*', (req, res) => {
    if(req.path.split('.').length === 1) {
        res.sendFile(path.join(__dirname + '/app/index.html'));
    } else {
        res.sendFile(path.join(__dirname + '/app' + req.path));
    }
});

app.listen(port, () => console.log(`Listening on port ${port}`));

/ は拡張子がついていなければ angular の index.html を返して、そうでなければファイル自体を返すようにした。そして api のルーティングはそのまま express のルータを使った。とりあえずはこれでいいかな。