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

sometimes I laugh

高専卒WEBエンジニアがいろいろ残しておくブログ

Heroku Dropbox Syncでブラウザからデプロイする

platform Heroku

f:id:watass:20150517164521j:plain

最近興味があり、Herokuを触り始めたのですが、今年の新人研修でクラウド関係の話を非エンジニア含めた場で話させてもらえる機会があるので、AWSに限らず、Herokuの話をしようかなと思っています。
個人的にはクラウドといえば、AWSのようなIaaSなのですが(GCPの方はすいません)非エンジニアの方にAWSのメリットを語るためには、いかにハードウェアを扱うことが面倒臭いか、インフラを自前で管理することがトラブルに繋がるかという部分を体感してもらえないといけないなぁと思いまして、そうなってしまうと、手っ取り早くクラウドの面白さ、便利さを体感するならばPaaSが一番だろうと考えました。
特に、黒い画面を見ることに抵抗がある人でも簡潔にやる方法として、HerokuのDropbox連携が一番簡単にできそうだったので、事前に手順を整理しておきます。

Herokuとは

www.heroku.com

Herokuとはアプリケーション開発を支援するクラウドサービスでPaaSと呼ばれるものです。
"Focus on the app"というキャッチフレーズの通り、アプリケーション開発では避けて通れないインフラ管理の手間をすべてHerokuに任せることで、ユーザはプログラム本体の開発のみに集中できるというメリットがあります。
その特徴から、サービスの開発速度を重視するスタートアップ企業などで採用されています。

一見するとレンタルサーバVPSのようなものに近いような気がしないこともないのですが、インフラ管理をHerokuに任せつつも、負荷上昇時にはシークバーで簡単にスケールアウトできたり、様々な仕組みを通じて、Apacheをnginxに変更したり、使用するphprubyのバージョンを指定できたりと柔軟な設定ができることも特徴です。

Heroku Dropbox Syncとは

Herokuはアプリケーションをデプロイする方法として、gitやGitHubによるバージョン管理ツールを使う方法を提供しています。これにより、従来、gitによるバージョン管理で開発していたエンジニアでもスムーズにHerokuでの開発に移行することができます。

しかし、それに限らずHerokuではDropboxと連携することで、Dropbox上のファイルをHeroku環境下にデプロイする方法も提供されています。これはgit commitだのgit pushだのgit revertなど複雑なコマンドを覚えたくない非エンジニアでも活用することができる方法です。これをHeroku Dropbox Syncといいます。

Dropboxはオンラインストレージとして提供されているクラウドサービスで、インストールすることでファイルシステム同様に扱うこともできるのですが、Webブラウザ経由でアップロード、ダウンロードもできます。今回はこれを利用することで、コマンドラインツールも使わず、FTPツールも使わずにHeroku上にアプリケーションをデプロイしてみます。

実際にやってみる

アカウントの登録

まず、HerokuのアカウントとDropboxのアカウントを作成します。

www.heroku.com
www.dropbox.com

Herokuの方は英語だらけなので少し手間取るかもしれませんが、そこまで複雑な手順ではないはずです。どちらも有料プランがありますが、クレジットの登録をしない限りは有料プランに対応する部分は使用できないので、安心して使ってOKです。

アプリケーションの作成

アカウント登録が完了したら、Herokuにログインします。Heroku Dashboardの画面に遷移しますので、右上の+ボタンをクリックして新規にアプリケーションを作成します。

f:id:watass:20150517211808p:plain

アプリケーション作成画面ではアプリケーション名とリージョンを指定できます。

f:id:watass:20150517212237p:plain

アプリケーション名はherokuアプリケーションのURLのサブドメイン部になりますので、Herokuユーザ全体でユニークでなくてはいけません。リージョンはHerokuの環境が実際に構築される場所を指定できます。地理的に近いほうがレスポンス速度が高まるそうですが、2015年5月現在、東京リージョンが存在しませんので、とりあえずUSリージョンを指定します。

Dropboxアカウントとの連携

アプリケーションの作成が完了すると、デプロイ方法の選択画面に移動しますので、ここでDropboxを指定します。

f:id:watass:20150517213222p:plain

Connect to Dropboxをクリックすると、Dropboxの認証画面に飛びます。ログインしていない場合はログインを促されますので、ログインしてHerokuを承認します。

f:id:watass:20150517213511p:plain

認証が完了すると、Herokuの画面にもう一度戻ってきます。この画面から今後Dropboxからのデプロイなどの操作を行います。

f:id:watass:20150517213832p:plain

Dropboxにアプリケーションを配置

HerokuとDropboxの連携が完了すると、Dropboxに「アプリ」という名前のディレクトリが作成されます。

f:id:watass:20150517214107p:plain

ここで「アプリ/Heroku/アプリケーション名」というディレクトリが作成されているので、そこまで移動します。今後はこのアプリケーション名のディレクトリ配下のファイルが、Heroku上にデプロイされます。試しに、以下のようなファイルを作成してアップロードします。

<html>
<head>
<title>Hello, Heroku from Dropbox!</title>
</head>
<body>
<h1>Hello, Heroku from Dropbox!</h1>
</body>
</html>

ここで、上記のようなファイルを「index.php」という名前で保存します。html拡張子ではなく、php拡張子として保存することがポイントです。

f:id:watass:20150517214654p:plain

Herokuにデプロイ

アップロードが完了したら、Herokuの画面に戻ってコメントを記載した上でDeployのボタンを押します。

f:id:watass:20150517214937p:plain

正常にデプロイが完了すると、上図のようにチェックマークが3つ付きます。実際にアプリケーションへアクセスすると・・・

f:id:watass:20150517215215p:plain

できました!

Herokuにデプロイするときの注意

さて、上記の手順でもちょっとだけ触れましたが、実はindex.phpをindex.htmlにすると正常にデプロイが完了しません。
これはHerokuがアプリケーションをデプロイする際に、設定ファイルなどの情報から環境を構築するためで、単純なhtmlファイルだけでは、環境を構築することができないためです。この辺りがレンタルサーバなどでFTP経由でアップロードするのと異なる点で、Herokuが高い柔軟性を誇る特徴です。

例えば、Herokuの仮想サーバ単位はdynoと呼ばれるコンテナになるのですが、これにもWebサーバのようにレスポンスを受け取るWeb dynoやタスク実行のためのWorker dynoなどの種類があり、特に指定しない場合にはこの辺りの情報がHerokuに伝わらないため、デプロイに成功しないのです。

この手に設定情報をHerokuに伝達するためには、Procfileというファイルをデプロイ先のルートに配置しなくてはいけません。Procfileではweb dynoの利用を宣言できたり、ドキュメントルートを設定できたりと色々な設定ができます。
他にも、PHPプロジェクトならばcomposer.lockなどを配置しておくと、それにあわせて必要な環境をHerokuで用意してくれます。Infrastructure as Codeを簡単に実現できるわけです。

ちなみに、なぜ今回はこの手の設定をしなくてもよかったのかというと、php拡張子の時点でHerokuがPHPプロジェクトとして認識して環境を構築してくれるためです。より柔軟な環境で開発をしたい場合には、各種設定ファイルをしっかり作成するようにしましょう。

まとめ

  • HerokuとDropboxの連携でDropboxからデプロイできる
  • プロジェクト自体は最低限ならphp拡張子を用意すればデプロイできる
  • より高度な設定を行うなら、Procfileやcomposer.lockを作成することで実現できる

AWSとHerokuの使い分けができるとよさそう

今まで長いことAWSを使っていたこともあって、正直HerokuのようなPaaSを使うケースが見えなかったのですが、実際に使ってみると無料で気楽につかえて非常に便利です。
とはいえ、無料枠だと30分以上アクセスがないとdynoが眠り、アクセス時のラグがものすごく長くなるなどの問題があったりしますので、プロダクション環境を組むなら有料プランが必要だと思います。ネットワークレベルでしっかり構築するならAWS、さくっとアプリケーション開発してリリースすることを目的とするならHerokuという使い分けができるとよさそうです。

余談ですが、AWS上で構築したプッシュしたら自動でデプロイする、みたいな環境がHerokuではデフォルトで用意されているような感じなので、この環境構築の手間を考えるならば、Herokuを使う利点はかなりありそうです。

参考

Heroku Dropbox Syncで実現するWeb開発の未来 - MOL
# Heroku Dropbox Syncについて詳しく解説されています。ぶっちゃけこちらの記事だけ読めば十分感があります。
構築・運用の必須知識! Herokuアプリケーションの実行プラットフォーム「Dyno」を徹底的に理解する (1/3):CodeZine
# Heroku自体についての基本的な解説はこちらを参考にしました。