Elastic Beanstalk の nginx で静的ファイルにCORSヘッダーをつける方法

静的ファイルでも .woff といったフォントファイルはCORSヘッダーの制約を受けて別オリジンから読み込めないので、CORSヘッダーをつける必要があります。

そして、AWS の Elastic Beanstalk のウェブサーバー環境で nginx で配信されている静的ファイルにCORSヘッダーをつけるためには、nginx の conf を追加する必要があります。

これについて調べていてヒットしたのが以下の記事でした。

Enabling CORS on Elastic Beanstalk/Nginx with Amazon Linux 2

そこで示されていたのが以下の conf です。

location ~* .(eot|otf|ttf|woff|woff2|css|js)$ {
  add_header Access-Control-Allow-Origin *;
}

なんのことはない、静的ファイルな拡張子のファイルを配信する場合にCORSヘッダーをつける設定です。Beanstalk 的なポイントとしては、ファイルを置く場所が .platform/nginx/conf.d/elasticbeanstalk/ 内な必要があるというくらいです。（ここもハマりポイントではある）

しかさらに例外があり、Beanstalk の config で静的ファイルを配信する設定である aws:elasticbeanstalk:environment:proxy:staticfiles を使っていると、うまく動作しません。以下のような config です。

option_settings:
  aws:elasticbeanstalk:environment:proxy:staticfiles:
    /dist: public/dist

この config はデプロイ時に nginx の location ディレクティブを使った conf を書き出してくれる設定で、以下のような nginx 用の alias が書かれた conf が書き出されます。

location /dist {
  alias /var/app/current/public/dist;
  access_log off;
}

このまま先にに示した add_header の conf と同時に設定してしまうと、locationヘッダ優先順位の「最長マッチ」で add_header の location ディレクティブが適用されてしまい、alias の方の設定は無視されます。結果、静的ファイルが404になります。

なので、Beanstalk の nginx で配信する静的ファイルに対して設定を加える場合は、staticfiles は使わずに直接 alias を書くようにして、その中で add_header しましょう。

location /dist {
  add_header Access-Control-Allow-Origin *; 
  alias /var/app/current/public/dist;
  access_log off;
}

以上です。