beta

Herokuでワンクリックでcamoの画像HTTPSプロキシを立ててnode.jsアプリから呼び出す

ogpなどで外部サイトの画像などを呼び出す際に、先方がHTTPしかない場合は、画像HTTPSプロキシcamoを使うと便利です。ここでは、Herokuでcamoサーバーを立ち上げてnode.jsアプリから呼び出す方法をまとめました。

公開日:2019年9月23日

herokuボタンからワンクリックデプロイ

Herokuでcamoサーバーを立てる場合は、Heroku公式サイトのボタンページからワンクリックでデプロイができます。

camo | Heroku Buttons

Herokuにログインした状態で「Deploy to Heroku」というボタンをクリックすると、そのままアプリの作成画面になります。

Herokuボタンを押すと表示されるcamoアプリの作成画面

アプリ名を適当に入力して、「CAMO_HOSTNAME」にherokuのURL(アプリ名.herokuapp.com)を入力したら、ページ一番下の「Deploy app」をボタンを押します。

これで、Heroku上にcamoの画像HTTPSプロキシが立ち上がります。

ページやアプリから使う

Herokuにデプロイしたからといって、そのまま普通に使えるわけではありません。

Heroku buttonsページに書いてある通り、camoは、

http://example.org/<digest>?url=<image-url>
http://example.org/<digest>/<image-url>

この2種類のURLで使うのですが、この「digest」の部分は、サイト+画像URLを元にしたdigestコードで、このdigestコードがサイトのマッチしないとプロキシとして動いてくれません。

キーを取得する

まずは、digestコードを発行するためのcamoキーを取得します。

camoキーは、Herokuにデプロイした際に自動で生成されるので、Herokuの管理画面から取得できます。

ダッシュボード > Settingsページを開いて、「Config Vars」のブロックにある「Reveal Config Vars」ボタンを押すと、「CAMO_KEY」という項目があるので、その横の乱数っぽいやつをコピーしておきます。

HerokuダッシュボードでCAMO_KEYを表示する

ちなみに、このパートから、ホストのURLも変更できます。

herokuコマンドが使える場合は、「heroku config:set」でCAMO_KEYを設定することも可能です。

アプリでdigestを生成する

続いてdigestの生成です。

sha1で生成されていればOKなので、言語は問いませんが、今回はnode.jsのExpressアプリで変換する関数のサンプルを書いておきます。

buildImgProxyUrl: function(url){
  const crypto = require('crypto');
  const key = 'CAMO_KEY'; // 自分のものに置き換える
  const hmac = crypto.createHmac('sha1', key);
  const convUrl = hmac.update(url);
  const digest = hmac.digest('hex')
  const result = 'サーバーのURL' + digest + '?url=' + encodeURIComponent(url)  // 自分のものに置き換える
  return result;
}

画像プロキシ・camoのdigestコードを生成してURLを返すスクリプト

変換されたURLにアクセスすると、HTTPS下のサーバーであればプロキシできているはずです。


Herokuを使えば、簡単にcamoの画像HTTPSプロキシを利用することができました。

digestの生成の部分がどうしても理解しづらいですが、スクリプトを組んでしまえば簡単なので、mix contentsなどで困っている方はぜひ利用してみてください。

Author

Koji Kadoma
Member of codit.work

新着ノート

新着コード