Angularによるフロントエンド開発とAPI開発を同時に行う

Angularでフロントエンド開発する際に"ng serve"コマンドを使うと便利なのは周知の事実。
バックエンドAPIを代替する手段は用意されているとはいえ、実際のバックエンドを使いたい(バックエンドも同時にデバッグしたい)場合、nginxのリバースプロキシを使って開発環境を作るとうまくいく。

せっかくnginxを使うので、https化(Webカメラにアクセスする場合などは必須)やjavascript,jsonなどのgzip圧縮にも対応させておくことにする。

想定するアプリケーション

https://{hostname}/{application-path}/ 　　 … いわゆるindex.htmlが呼び出されるURL
https://{hostname}/{application-path}/rest/ 　　 … バックエンドのAPIへのURL
※JavaEEアプリケーションだと上段がWebContent配下になり、下段がJAX-RSのベースURLになる

フロントエンド/バックエンドそれぞれのサーバを立ち上げる

バックエンドサーバのAPI: http://127.0.0.1:8080/{application-path}/rest/*
フロントエンドサーバは "ng serve --base-href=/{application-path}/"で立ち上げる
※--base-hrefでフロントエンドサーバ側とURLを合わせる

オレオレ証明書(笑)の作成

$ openssl genrsa 2048 >server.key
$ openssl req -new -key server.key >server.csr
$ openssl x509 -days 3650 -req -signkey server.key < server.csr > server.crt
作成した３つのファイルはnginxのconfディレクトリに置いておく

nginxの設定

ここでは{application-path}として"operation"としている

nginx.conf

worker_processes            1;

events {
    worker_connections      1024;
}

http {
    include                 mime.types;
    default_type            application/octet-stream;

    sendfile                on;
    tcp_nopush              on;
    keepalive_timeout       0;

    gzip                    on;
    gzip_http_version       1.1;
    gzip_types              text/css application/javascript application/json;
    gzip_proxied            any;

    server {
        listen              443;
        server_name         127.0.0.1;
        ssl                 on;
        ssl_certificate     server.crt;
        ssl_certificate_key server.key;

        charset utf8;

        proxy_set_header    Host                  $host;
        proxy_set_header    X-Real-IP             $remote_addr;
        proxy_set_header    X-Forwarded-Host      $host;
        proxy_set_header    X-Forwarded-Server    $host;
        proxy_set_header    X-Forwarded-For       $proxy_add_x_forwarded_for;
        proxy_http_version  1.1;
        proxy_set_header    Upgrade               $http_upgrade;
        proxy_set_header    Connection            "upgrade";
        proxy_force_ranges  on;

#APIへのアクセスはAPサーバ(port:8080)へ
        location /operation/rest/ {
            proxy_pass    http://127.0.0.1:8080/operation/rest/;
        }

#index.htmlやjavascriptへのアクセスはwebpack-dev-server(port:4200)へ
        location /operation/ {
            proxy_pass    http://127.0.0.1:4200/operation/;
        }
#websocketの通信はwebpack-dev-server(port:4200)へ
        location / {
            proxy_pass    http://127.0.0.1:4200/;
        }
    }
}

上記、windows版のnginxのconfファイル。
Linux版の場合には証明書ファイルのパスをフルパスで書く。(/etc/nginx/conf.d/***)

nginxを立ち上げてアクセスしてみる

"https://127.0.0.l/{application-path}/"にアクセスしてみる。
main.bundle.jsなどのjavascriptファイルやAPIからのJSONファイルのResponseHeaderを見た時、
"Content-Encoding:gzip"となっていればgzip圧縮されている。

アプリケーションのデプロイ

ng serveと同様に、"ng build --base-href=/{application-path}/"としてフロントエンドをビルド。
ターゲットパス(デフォルトだとdistというディレクトリ)に出力されたファイル一式を、バックエンド側の"WebContent"配下にコピー。
バックエンドのアプリケーションをwarとしてexportし、本番サーバにDeploy!