cors-anywhereをherokuにデプロイする方法

ブラウザは「同一オリジンポリシー」という仕組みにしたがって、あるオリジンから他のオリジンのリソースに対して簡単にアクセスできないようにしています。 通常は別オリジン間での通信はできないのですが、それだとWebサービスの運用上困る場合が多いので、特例としてそれを可能にする仕組みが存在します。 それが Cross-Origin Resource Sharing(CORS) です。

CORSのおかげで異なるオリジン間でも通信が可能になるのですが、 リクエストを受け取るサーバー側で適切な設定がされていないとブラウザ側でCORSエラーが発生する場合があります。 そのエラーの対処方法の一つがcors-anywhere(Node.jsプロキシ)を利用する方法です。 cors-anywhereはプロキシされたリクエストに対してCORSヘッダーを追加するため、CORSエラーを回避することが可能となります。 CORSエラーが発生しかつ、サーバ側を設定できない場合（外部APIサーバを利用する場合など）にcors-anywhereを活用することが多いです。

cors-anywhereはもともと公式が公開サーバー(cors-anywhere.herokuapp.com)を用意していました。 しかし、セキュリティ上の問題から2021年1月31日以降、限定的な利用のみしか受け付けなくなり、今後cors-anywhereを利用する場合は各自で用意する必要があります。 そこで今回はできるだけ簡単な方法でcors-anywhereをherokuにデプロイする方法を紹介してみたいと思います。

Heroku

https://jp.heroku.com/ cors-anywhereのdeployにはHerokuを利用します。 Herokuはコンテナベースのクラウド型PaaSです アプリをサーバの管理なしで気軽にデプロイ、管理、スケールすることが可能です。 cors-anywhereのような個人利用程度のものであれば無料プランで十分使えます。 botやapiなどもデプロイ可能で、個人的には開発用のstagingとして重宝しています。 ものの数分で簡単にデプロイができるので使ったことがない方は是非お試しください💪

手順

それではcors-anywhereのデプロイ手順を簡単にまとめます。 先にHeroku側の準備から初めます。

1. Herokuアカウント登録

Herokuのアカウント登録が完了していない方はhttps://signup.heroku.com/jp からアカウント登録を完了させておきましょう。

2. Herokuに新しいappを作成

事前にHeroku上にappを作成しておきます。 HerokuのダッシュボードからCreate new appを選択し、appの名前を決めます。 ※ここで設定したapp名がそのままサーバのurlになるので、すでに使われているapp名は使用できない点にご注意ください。

3. Heroku CLIをインストール

デプロイにはHeroku CLIを使用するのでこちらを参考にCLIをインストールをします。 ※ Github連携を使えばHeroku CLIなしでデプロイすることも可能です。CLIを使う方法が手っ取り早いのでここではCLIの方法を紹介しています。

4. Heroku CLIでアカウント認証

Heroku CLIでアカウント認証します。 以下のようにshell上でheroku loginを実行した後Enterを押すと認証画面が立ち上がるのでログインを行ってください。

$ heroku login
 ›   Warning: Our terms of service have changed: https://dashboard.heroku.com/terms-of-service
heroku: Press any key to open up the browser to login or q to exit:

Heroku側の準備は以上になります。

5. cors-anywhereのリポジトリをローカルにclone

次に今回デプロイするcors-anywhereのリポジトリをローカルにcloneしておきます。

$ git clone https://github.com/Rob--W/cors-anywhere.git

6. cloneしたリポジトリを手順2で作成したappのリポジトリにpush

手順2でappを生成した時点でheroku上にそのapp用のリモートリポジトリが用意されているので、そこに先程cloneしたcors-anywhereのリポジトリをpushします。 具体的にはcloneしたcors-anywhereのローカルリポジトリ上で

$ heroku git:remote -a try-cors-anywhere # ←手順2で設定したapp名
$ git push heroku master

としてあげればOKです。 git push後shell上でビルドの様子が分かると思いますので、それが完了したらデプロイ終了です。 https://app名.herokuapp.com/リクエスト対象のURLといった感じでcors-anywhereをお試しください。

補足説明

今回はcloneしたcors-anywhereのリポジトリをherokuにpushしただけでデプロイが完了しましたが、すべてのappがそれだけで済むというわけではありません。 通常herokuにデプロイするには、build後どのコマンド走らせるかを示すProcfileをリポジトリ直下においておく必要があります。 cors-anywhereのリポジトリにはすでに以下のProcfileが用意されているため、特にこちらでProcfileを用意する必要はありませんでした。

web: node server.js

他のプログラムをherokuにデプロイしたい場合はProcfileをちゃんと用意する必要があります。
また、envの設定をしたい場合は以下のHerokuのSetting画面から設定可能です。 cors-anywhereのWHITELISTなどはこちらで設定してあげると良いでしょう。
今回のデプロイはHeroku CLIを用いて行いましたが、HerokuではGithub上のリポジトリを直接選んでデプロイすることも可能です。 その場合はローカルにcloneしたcors-anywhereを連携したいGithubのリポジトリに事前pushしておけばOKです👌

おわり

heroku便利だな〜😇