Herokuでワンクリックでcamoの画像HTTPSプロキシを立ててnode.jsアプリから呼び出す
ogpなどで外部サイトの画像などを呼び出す際に、先方がHTTPしかない場合は、画像HTTPSプロキシcamoを使うと便利です。ここでは、Herokuでcamoサーバーを立ち上げてnode.jsアプリから呼び出す方法をまとめました。
公開日:2019年9月23日
herokuボタンからワンクリックデプロイ
Herokuでcamoサーバーを立てる場合は、Heroku公式サイトのボタンページからワンクリックでデプロイができます。
Herokuにログインした状態で「Deploy to Heroku」というボタンをクリックすると、そのままアプリの作成画面になります。
アプリ名を適当に入力して、「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」という項目があるので、その横の乱数っぽいやつをコピーしておきます。
ちなみに、このパートから、ホストの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などで困っている方はぜひ利用してみてください。
新着ノート
-
NUXT3
公開日:2023年2月16日
-
NUXT3
公開日:2023年1月30日
新着コード
-
Vue.js
公開日:2022年4月18日
-
Vue.js
公開日:2022年4月13日