カテゴリー
【サーバーサイドAngular】AngularでビルドしたWebアプリでExpress.jsからCORSプロキシを設定する
※ 当ページには【広告/PR】を含む場合があります。
2022/03/22
![蛸壺の技術ブログ|AngularでビルドしたWebアプリでもCORSできるようにプロキシ設定する](/articles/article145/__2.jpg)
yarn start
Angular側のビルド
![合同会社タコスキングダム|蛸壺の技術ブログ](/articles/article145/__1.jpg)
AngularのプロダクトSPAを準備する
$ yarn build --configuration production --build-optimizer true --aot true
angular.json
ng buind
dist
プロダクトビルド後のAngular SPAにCORS対応のプロキシルートを設定する
http-proxy-middleware
$ yarn add express http-proxy-middleware
static.js
const express = require('express');
const path = require("path");
const { createProxyMiddleware } = require('http-proxy-middleware');
const server = express();
//👇ビルド済みのAngularアプリを出力したフォルダを指定
let distFolder = express.static(path.join(__dirname, "dist"));
server.set('view engine', 'html');
server.set('views', distFolder);
server.use(express.static(distFolder));
//👇各プロキシルートを定義していく
server.use('/hoge', createProxyMiddleware({
target: 'http://localhost:23456',
changeOrigin: false
}));
server.use('/piyo', createProxyMiddleware({
target: 'http://192.168.1.123:54321',
changeOrigin: true,
pathRewrite: {
[`^/piyo`]: 'http://192.168.1.123:54321/dev/v1',
}
}));
server.use('/fuga', createProxyMiddleware({
target: 'http://far-remote-guest.co.jp:67890',
changeOrigin: true,
pathRewrite: {
[`^/fuga`]: 'http://far-remote-guest.co.jp:67890/prod/api/v2',
}
}));
//👇その他のプロキシルート以外の通常パスはindex.htmlにアクセスさせる
server.get('*', (req, res) => {
console.log(req.originalUrl);
res.render('index');
});
const PORT = 12345;
const HOST = 'localhost';
server.listen(PORT, HOST, () => {
console.log(`Starting at http://${HOST}:${PORT}`);
});
http-proxy-middleware
createProxyMiddleware
$ node static.js
まとめ
参考サイト
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー