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


※ 当ページには【広告/PR】を含む場合があります。
2022/03/22
蛸壺の技術ブログ|AngularでビルドしたWebアプリでもCORSできるようにプロキシ設定する

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

合同会社タコスキングダム|蛸壺の技術ブログ
Angularアプリ開発の同一オリジンポリシーエラー対策 〜 CORS(オリジン間リソース共有)できるプロキシールートを設定する

Angularアプリのローカル環境での開発に便利なCORSを簡単に実現できる独自のプロキシルートの設定方法を解説します。

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

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

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


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート・2022年版】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍&教材特集

Angular側のビルド

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

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

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

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

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

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

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

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

合同会社タコスキングダム|蛸壺の技術ブログ
[Angular] ビルド後のファイルの出力サイズが出来るだけコンパクトにまとまるようなng buildのコマンドオプションを最適化する方法を考える

Angularアプリケーションのビルドサイズを少しでも削減するために、ビルドオプションを引っ換えとっかえして実験してみた結果をまとめています。

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


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート・2022年版】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍&教材特集

プロダクトビルド後の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でプロキシルートが機能しているはずです。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート・2022年版】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍&教材特集

まとめ

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

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

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

参考サイト

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

Proxy with express.js

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

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

合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート・2022年版】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍&教材特集