【サーバーサイドAngular】AngularでビルドしたWebアプリでExpress.jsからCORSプロキシを設定する


2022/03/22
蛸壺の技術ブログ|AngularでビルドしたWebアプリでもCORSできるようにプロキシ設定する

前の回では、Angularのローカル開発環境からdevサーバー(webpack-dev-server)を立ち上げて、プロキシルートで外部のオリジンへアクセスする方法を紹介しました。

Angularアプリ開発中はそれでも良かったのですが、開発が進んで、Angularアプリをビルドして、プロダクトをリリースする段階になったときに、
yarn startコマンドを卒業しないといけないタイミングもあるでしょう。

この場合、Angular標準のプロキシルートの設定からもおさらばして、プロダクトで利用するサーバーサイド側のプロキシ設定に従う必要があります。

今回はExpressでもプロキシルーティングを実現するための方法を解説していきます。


Angular側のビルド

では前回のプロキシルーティングの構成をもう一度おさらいしておきます。

合同会社タコスキングダム|蛸壺の技術ブログ

プロキシルートの構成は前回と共通とします。

AngularでプロダクトビルドしたWebアプリケーションであっても、結局はブラウザから使うことには変わりありませんので、同一オリジンポリシーのルールが課させることには違いありません。

AngularのプロダクトSPAを準備する

とりあえず通常のビルドでAngularのSPA(シングルページアプリケーション)を生成します。

            
            $ yarn build --configuration production --build-optimizer true --aot true
        
なおAngularのビルドを細かいビルドオプションはangular.jsonに記述していれば、ビルドオプティマイザやAOTコンパイラをコマンド引数でONにする必要はないのですが、ここらへんは個人的な趣向です。

ng buindコマンドからプロダクト出力を制御したい場合には、以前の記事で説明していたことを試してみてください。

ビルド後の生成されたリソースファイルは
distファイル内に出力されていることにします。


プロダクトビルド後のAngular SPAにCORS対応のプロキシルートを設定する

サーバーサイドの実行環境にはNode.jsとExpressを利用します。

またExpressサーバーからのプロキシ接続の方法はいくつかあるようですが、今回はプロキシルートのためのミドルウェアとして
http-proxy-middlewareを追加します。

            
            $ yarn add express http-proxy-middleware
        
AngularプロジェクトのルートにExpress用の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}`);
});
        
Expressの実装を見られてピンときた方もいると思いますが、前回説明したAngularのDevサーバーでプロキシルートを設定したパラメータとほぼ同等の書式になっています。

むしろExpressのプロキシ機能を設定するミドルウェア・
http-proxy-middlewareの書式に、webpack-dev-serverおよびangular-cliが倣う形で開発が進められているので当然と言えば当然です。

ということで、
createProxyMiddleware関数に指定するパラメータの中身の説明は前回説明した項目をご覧ください。

さらに細かいプロキシ制御が必要な場合には、
http-proxy-middlewareの公式ドキュメントを確認してください。

以上の準備が出来たらnodeからサーバー起動することができます。

            
            $ node static.js
        
CORSアクセスが出来ていれば無事Expressでプロキシルートが機能しているはずです。


まとめ

前回に引き続き、Angularアプリ開発でプロキシルートを利用するための概論第二段をお届けしました。

今回のケースではNode.jsをインストールしたローカルマシーンをWebサーバー機として利用したことを念頭においていましたが、AWSやさくらのVPSなどのNodeランタイムの起動できるリモートレンタルサーバーなどでも問題なくプロキシ機能が利用できると思います。

Expressのプロキシルート操作を覚えておくと色々と応用の幅も広がりますので、是非ともご自分で試されてください。

参考サイト

10分以内でNode.jsのプロキシサーバを構築する方法

Proxy with express.js

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。