読者です 読者をやめる 読者になる 読者になる

あんパン

こしあん以外は認めない

Dropboxで静的コンテンツ配信ができなくなったのでS3で代替する

Dropboxで静的コンテンツの配信ができなくなるという話を聞いた。みんなの元にはメールが来ているけど、なぜかぼくの元にはメールがきていない。

www.dropbox.com

2016 年 10 月 3 日より、ウェブ ブラウザで HTML コンテンツをレンダリングする共有リンクの使用が無効になります。Dropbox から直接 HTML コンテンツを表示する方法でウェブサイトを制作している場合、この日付以降はブラウザでコンテンツのレンダリングができなくなります。HTML コンテンツ自体は引き続き Dropbox に残り、共有することもできます。

な る ほ ど

という感じで、みんな割と使ってる機能だろうし不便だと思う(課金勢は来年くらいに使えなくなるらしい)。あまりに不便なので、なにか別の方法でおなじようなことを実現できないかと思って、S3を変わりに使う方法を思いついた。といってもS3で静的コンテンツを配信する方法は世の中にありふれていると思う。

なので、ここで書くのはS3を静的コンテンツ配信に利用しつつちょっと便利に使う方法ということになる。

S3をマウントする

S3を操作するにあたっていちいちコマンドを叩いていたら日が暮れるので、バケットをマウントして普通のファイルシステムみたいに触れるようにする。S3をマウントする方法はいくつかあるけれど、Transmitを使うと便利だった。

Transmit

Transmit

  • Panic, Inc.
  • ユーティリティ
  • ¥4,100

TransmitはWeb系のクリエイターなら名前は聞いたことがある(?)Codaというエディタを作っているPanic社のFTPクライアント。有料だけど結構いろいろな機能がついていて便利なので昔はよく使っていた。S3をマウントできるというのは結構前に見ていたのでこれならいけるのでは、と試してみたらいい感じにうごいてよかった。

f:id:masawada:20160921104124p:plain

こういう雰囲気でマウントできる。謎のなんちゃらfuseみたいなのを入れるよりかは精神的に良いという印象。

Automatorで共有リンクを引っ張ってこられるようにする

単純に放り込んだだけだと共有リンク作るのが面倒くさいので、コンテキストメニューから呼び出せるようにする。Automatorを使うとうまくいく。Automatorで新規サービスを作成して以下のような設定で保存すると良い。

f:id:masawada:20160921130423p:plain

これで、右クリックからコンテキストメニューで公開URLを取得することができる。

f:id:masawada:20160921130532p:plain

なお、保存したサービスの居場所がわからなくなりがちだが、キーボードショートカットの設定あたりにしれっといる。ここからショートカットを指定することもできるし、右クリックするとAutomatorで開き直したりFinderでそのディレクトリを呼び出したりすることができる。

f:id:masawada:20160921130635p:plain

そのほかやったこと

CloudFront通したり、Route 53でドメイン取得しつつCNAME設定したりということをした。SSL証明書もタダで、一瞬で作れてすごい。いまのところ自分の公開バケットは https://files.masawada.me あたりから覗くことができる。S3もCloudFrontもRoute 53も異常に安価なので破産することはないと思いつつ、5ドル上回ったら支払いのアラートが飛ぶように設定しておいた。これでお財布も安心だと思う。

不便な点

ここまでやったは良いものの、やはりフォルダに突っ込むと勝手にアップロードしてくれるDropboxは便利だと思う。S3の方はファイルシステムにマウントしているもののアップロードに割と時間がかかる。リージョンをTokyoにしていても時間がかかるので、こういうものだと諦めるしかなさそう。

まとめ

Amazonすごくて、雑にぽちぽちしただけで静的コンテンツを配信できるようになる。ありがたく使いましょう。