« 2015年5月 | メイン | 2015年7月 »

2015年6月

2015年6月24日 (水)

Herokuで静的コンテンツをホストしたい

こんにちは、三宅です。
フレクトでは、お客様への提案や短期間でのプロジェクトでは、なるべく早い段階から動くアプリケーションのイメージを持ってもらえるように、HTMLで作った静的コンテンツでデモやモックを作成することが多くあります。
そんな時、変更のたびにファイルをやり取りしているのではスピード感に欠けるため、Herokuにコンテンツをホストしてオンラインで確認してもらえるようにしています。
今回はそんな静的コンテンツを簡単にHerokuにホストするためのアセットの紹介となります。

flect-miyake/node-static-server

node-static-serverは静的リソースをホストすることを目的とした、シンプルなWebサーバです。
静的リソースをディレクトリに配置、コマンド1つでローカル環境にWebサーバを起動し、その動作を確認することができます。
Heroku上で動かすこともできるため、デモ環境の構築や複数のメンバー間でのWebデザインの確認などに用いることも可能です。

Deploy

Herokuへのデプロイ

Herokuボタンをクリックすると、自分のHerokuアカウントにデプロイし、動かすことができます。

ローカル環境での編集

任意のディレクトリに移動し、Herokuに作成されたアプリをローカルにクローンし、編集することができます。

heroku git:clone --app アプリ名

BASIC認証の設定

Herokuに公開の際に、アクセスできる人を制限するためにBASIC認証を設定することができます。
basic-auth-connectを使い、プロダクション環境でユーザ名とパスワードが設定されている時に、BASIC認証が有効になるようにしています。

Herokuの環境変数として

  • BASIC_AUTH_USERNAME
  • BASIC_AUTH_PASSWORD

上記の2つを設定することで、BASIC認証が有効になります。

ローカル環境での利用

ローカル環境へのクローン

$ git clone https://github.com/flect-miyake/node-static-server.git

Gitを用いて、ローカル環境にリポジトリをクローンします。

npmパッケージのインストール

Gitによってクローンされたディレクトリに移動し、npmパッケージのインストールコマンドを実行します。

$ cd node-static-server
$ npm install

node-static-serverはExpress4を用いています。

静的リソースの配置

publicディレクトリに、静的リソースを配置します。
Webサーバ起動時は、publicディレクトリがルートディレクトリとなります。

サーバの起動

リポジトリのルートディレクトリで次のコマンドを入力すると、Webサーバが起動します。

$ npm start

ブラウザからlocalhost:3000にアクセスすることで、publicディレクトリに配置されたコンテツを確認することができます。

Herokuの料金体系が変更となり、無料でWebサイトを公開するサーバとして使うことは難しくなってしまいましたが、デモやモックの共有や開発ではそのスピーディーさや手軽さを存分に生かすことができると思います。

続きを読む "Herokuで静的コンテンツをホストしたい" »

2015年6月17日 (水)

なかやまがゆくHeroku本社への道 no.3~Herokuコマンドお絵かき~

こんにちは、なかやまです!

Heroku2_1_01_3

 

「なかやまがゆくHeroku本社への道 no.3」というタイトルですが、

Heroku本社に行くためにはHerokuの知識は必要ですよね!

ということで、今回はHerokuアプリを作るための基礎となるHerokuコマンドについて振り返ってみました。

Heroku2_2_02

 

 

heroku toolbeltをインストールする!

Heroku2_2_03

herokuアプリを作るためには、heroku toolbeltのインストールが必須です!

自分のOSにあったものをインストールしてくださいね。

heroku toolbelt

herokuコマンドでgitを使うのですが、gitのバージョンが低いと警告がでます。

gitは1.9.5以上が推奨ですので、gitのバージョンも合わせて確認しましょう。

 

 

heroku login!!

Heroku2_2_04

heroku toolbeltのインストールができたら、heroku loginをしてみましょう!

作成したHerokuアカウント情報を途中で入力していきます。

メールアドレスとパスワードは間違えないように。。

https://devcenter.heroku.com/articles/heroku-command#logging-in

 

 

heroku --version

Heroku2_2_05

ツールのバージョンがわかるコマンドです。

https://devcenter.heroku.com/articles/heroku-command#installing-the-heroku-cli

 

heroku keys:add

Heroku2_2_06

鍵ファイルを追加するときに使います。

heroku loginをした際に追加しているはずですが、あとから追加することもできます。

https://devcenter.heroku.com/articles/keys#adding-keys-to-heroku

 

 

heroku create

Heroku2_2_07

herokuアプリを作るときに呼ぶコマンドです。

heroku createの後にアプリ名を指定します。アプリ名はユニークにする必要があるので、すでに存在していると怒られます。

名前を指定しない場合はherokuが命名してくれます。

あとからアプリ名を変更することもできるので、安心ですね。

https://devcenter.heroku.com/articles/creating-apps#creating-a-named-app

 

 

git push heroku master

Heroku2_2_08

これはherokuじゃなくてgitコマンドになりますが、作ったアプリを公開するコマンドです。

このコマンドを入力することで、ローカルで開発していたアプリケーションがherokuに展開されます。

リリースしたアプリケーションに問題がある場合は、ロールバックすることもできます。

https://devcenter.heroku.com/articles/releases#rollback

Heroku2_3_01_2


 

 

heroku addons:create

Heroku2_2_10

アプリにアドオンを追加するコマンドです。

ログ監視のPapertrailを追加する場合は、以下のようなコマンドになります。

heroku addons:create papertrail

アドオンの詳細画面の下のほうにコマンドがかいてあるので参考にしてみてください。

Papertrail_addons_heroku

https://devcenter.heroku.com/articles/managing-add-ons#creating-an-add-on

 

 

heroku addons:open

Heroku2_1_11

アドオンのダッシュボードを開くときのコマンドです。

ログ監視アプリであればログ情報の確認ができます。

heroku addons:open papertrail

https://devcenter.heroku.com/articles/managing-add-ons#open-an-add-on-dashboard

 

 

heroku apps:info

Heroku2_2_12

アプリの情報を見るコマンドです。

girリポジトリ、所有者、リポジトリサイズ、スラグサイズ、スタック、アプリのUrlを見ることができます。

https://devcenter.heroku.com/articles/using-the-cli#app-commands

 

 

今回は基本的なコマンドをご紹介しました。

Heroku2_2_13

これらのコマンドはHerokuのコンソールからも設定できるようになっています。

便利ですね。

 

 

 

フィードバックいただけるとうれしいです。m(_ _)m

Heroku2_2_14

おたより(なかやま直通)

2015年6月10日 (水)

CloudDesignPattern、それってHerokuでもできますよ!あ、でもそれはできません。

どうも、最近Herokuの勉強をさぼりがちのおっぴーです。 そのため今回は、「試してみた!」という内容ではなく、主観が多く含まれる内容となっております。

さてHerokuの勉強をサボっているさなか、改訂版が出版されたAmazonWebServiceの『クラウドデザインパターン設計ガイド』を週末に読みました。

クラウドデザインパターンを読んでいる(かつ、操作もしてみる)と、

  • Webサービスを運営するためのサーバー群の調達が早くできる
  • サーバー、ネットワーク、DBなど各コンポーネントに拡張性がある
  • IaaSのトップランナーとして進化し続けている

という点をしみじみと感じます。 実サービスでAWSを利用することが一般的になってきた今、いまさらな感想ですが、本当に便利なサービスだと感じます。

なにか新しいサービスを始めよう!と思った時に、まずはサービス規模を想定し、CPU、メモリ、ハードディスクの容量を予測し、消費電力を考え、回線使用量を見積もり、、、 それが終われば、各業者に相見積もりをとって、、、といったことを作業にまつわる悩みが減らせることは大きなメリットです。 さらにCloudDesignPatternというサーバー構成のパターン集は、ある特定の状況における十分に検証された解決策なので、「こんな問題に対処したいのだけど、どんなサーバー構成にすれば良のだろう?」と悩む時間を減らせます。

このことにより、「こんなサービスを始めよう!」と決めてから、「つくってみた!」までの期間を短くできます。意思決定から結果にいたるまでの時間が短くなることはビジネスのアジリティをあげることに直結します。

このように考えると、PaaS、Herokuの魅力とは、IaaSよりもさらにサービスの構想段階で悩むことを減らせる、というものだと感じています。 なぜならば、Herokuはサービスとして、いくつかのCloudDesignPatternに対応済みの環境を提供しているからです。

たとえば、CloudDesignPatternの基本パターンで紹介されている5つのパターンのうち、ScaleUpパターンScaleOutパターンはもちろん、可用性のパターンで紹介されるMulti-Serverパターンは、提供されているコンソールから2,3クリックで完了してしまいます。 また、動的コンテンツの処理パータンであるScheduled Scale OutパターンAPIと無料のAddOnであるHerokuSchedulerを組み合わせると簡単に設定できてしまいます。

くわえて、Ondemand Activationパターンのような機能は、One-Off Dynoが提供しています。

さらにさらに、CDPではありませんが、AWSをはじめとしてIaaSを利用することでサーバーの調達とセットアップの手軽になったことから実現できるようになったBlue-GreenDeployはどうでしょうか? これもPrebootという仕組みやAPIからリリースをロールバックできることから、簡単に実行できます。

いやいや、「Herokuではこんなことができないでしょ?AWSではできるけど」という部分はもちろんあります。 たとえば、有償のAddOnを利用しないと、HerokuではAutoScaleができません。LogAggregationパターンについても、Papertraillogentriesなどの有償AddOnの利用が必要です。 さらに、メモリやCPUの選択肢はほとんどないといって良いと思います。たとえば、10GB以上のメモリが必要になるシステムを動かしたい!と考えるとHerokuは選択肢に入りません。 Herokuでスペックが一番良いPX Dynoでも6GBまでしかメモリの提供がされていないからです。

Herokuを選択することはCloudDesignPatternに対応済みの環境を享受できる一方で、AWSなどのIaaSにある自由度や選択肢が狭めることになるのは事実です。 一方で、強引に良い方向に考えると、そもそもできないことは悩む必要がなくなる(というより、これもやりたい、という点を切り捨てる)、という点でもWebアプリケーションをつうじてサービスを提供したい、というゴールに到達するための悩みが減らせる、といえます。

上述したように、IaaSやPaaSに感じるメリットは、サービスが提供する拡張性を前提として「開発の前の悩みがすくなくなる」ことから、ビジネスのアジリティをあげられるというです。 ですので、IaaS?PaaS?、AWS?Heroku?など、どちらを選べばよいの?ということをお悩みなら、「どれだけ最初に悩むことを減らしてWebアプリケーションを利用したサービスを提供したいか」を軸に検討してみるのはいかがでしょうか。

たとえば、Ruby on RailsやSpringBootのようなWebアプリケーションのフレームワークを用いて開発を行うようサービスは、まずはHerokuを利用することを考えて良いと思います。 もちろん、厳しい非機能要件があらかじめ想定される場合は、おすすめできない部分もありますが、アイデアベースのサービスをはじめたい、という場合ならオススメできます。

ちなみに、Herokuのプラットフォームの背後にはThe twelve-factor appという考え方があります。 もしも、Herokuを検討する場合は、現状の機能がなぜこうなっているのか、今後はどのように発展しそうか、という点の参考になりますので目を通しておくと良いと思います。

あと、AWSにはElastic BeanstalkというPaaSに類するサービスもありますね。 これとの比較はまたこんど。(できたらいいな)

2015年6月 3日 (水)

Review Apps を試してみた の巻

こんにちは、浅野です。 前回からだいぶ時間が空いてしまいましたが、予告していたPullRequest Deploy改め Review Appsを実際に実行した手順を紹介します。

作業の流れ

今回の検証は以下の流れで作業をすすめました。

  1. 同期元Githubリポジトリを作成
  2. 同期先Herokuアプリの作成
  3. Github Integrationの設定
  4. PullRequestを送る

同期元Githubリポジトリを作成

まずGithubリポジトリを作ります。 今回は、heroku-pullrequest-deployのリポジトリを作りました。

同期先Herokuアプリの作成

ここでは、Herokuアプリを作成と、次ステップで app.json の生成ウィザードの挙動を確認する為に addon追加、環境変数の追加を行います。

herokuアプリの作成

herokuダッシュボードからgithub-pr-deploy-sample を作りました。(以降、実際に試される方はご自身のアプリ名に差し替えてください)

addonの設定

開発で馴染みのある下記2種類のアドオンを追加します。

  1. Heroku Postgresql
  2. Redis Cloud

この2つのアドオンを追加すると、下記の環境変数が自動的に追加されます。

  1. DATABASE_URL
  2. HEROKU_POSTGRESQL_BRONW_URL (BROWN部分は環境によって異なります)
  3. REDISCLOUD_URL

環境変数の追加

自動で追加される環境変数の他に、手動で追加した環境変数がapp.jsonの生成ウィザードでどう扱われるかを検証する為に手動で環境変数を設定します。環境変数名はHOGEHOGE, 値は piyopiyo とします。

Github PullRequest Deployの設定

ここからが本番。 PullRequest Deployを設定します。 ゼロの状態から始めるには以下の手順になります。

  1. 同期対象Githubリポジトリの選択
  2. PullRequest Deployの設定
  3. app.jsonの生成

同期対象Githubリポジトリの選択

まずは、HerokuからGitHubへアクセスする設定を行います。

Herokugithubdeploy


  1. Deployタブを選びます
  2. GitHubを選びます
  3. Connect to GitHubをクリックします

(初めてGithub Integrationを使う場合は、Githubで Heroku Dashboardアプリからのアクセスを許可するかの認証がでます。)

続いて、同期対象となるGithubリポジトリを選択します。

Herokugithubconnectrepo


  1. 対象となるリポジトリのオーナを選択(今回は yuasano )
  2. 対象となるリポジトリを検索
  3. 対象となるリポジトリの connect をクリック (今回は heroku-pullrequest-deploy )

PullRequest Deployの設定

続いて、PullRequest Deployを有効にします。

注意書きが2点あるので気をつけてください。 大胆に意訳すると

  1. PullRequest Deployは、development/test環境で使う想定で、production環境で使うことは推奨しない。
  2. PullRequestで生成されるアプリの Dyno Hour / Addon もこのユーザの課金対象となる

のような感じです。 問題なければ Enable Pull Request Deploys をクリックします。

次に自動デプロイを有効にします。今は、PullRequest Deployに必要な app.json がリポジトリにないので設定を有効にできないので、app.jsonを作成するウィザードが呼び出せるのでそちらを使って app.json を作成します。(作成は次ステップ)

Executeappjsonwizard


  1. Create new apps for new pull requests automatically にチェックを入れる
  2. リポジトリに app.json がないので設定できない、との旨のメッセージが表示される
  3. Create an app.json File... をクリック

app.jsonの生成

app.jsonの生成画面が開いて、app.jsonのスキーマ の必要最低限の項目が並んでいます。

今回は、環境変数の共通化を見てみたいのでEnvironment の箇所だけを変更して、リポジトリへapp.jsonを登録します。

Environmentの変更

環境変数のリストに DATABASE_URLHOGEHOGE それぞれどのように扱うかを指定します。

Editappjson_2


  • DATABASE_URL は Copy at build time
  • HOGEHOGE は Generate Secret

リポジトリへの登録

Output の箇所に、生成される app.json のプレビューが表示されているので、これを確認して問題なければ Commit to Repo and Enable Pull Request Deploys をクリックします。

これで、GitHubリポジトリのmasterブランチ(defaultブランチ)にapp.jsonがコミットされます。

補足

なお Config Varsのプルダウンで選択できる4種類は以下のように使い分けるのだと理解しています。

  • Copy at build time … ビルド(アプリを作る時)にその環境変数の値をコピーする。親アプリの環境変数の設定値をコピーする場合はこれを指定する。
    • Copy now ... 現時点での親アプリの環境変数の設定値をコピーします。選択すると警告が表示される通り、ここで入力した値は app.json に直接記載されてバージョン管理下に置かれるので、見られたくない情報は書かないでください。
    • Set value ... 右側テキストボックスに入力した文字列を設定します。これも Copy now同様 app.jsonに直接記載されるので取り扱い注意です。
    • Generate Secret ... ビルド(アプリを作る時)に生成されたランダムな文字列が設定されます。Ruby On Railsの SECRET_KEY_BASE などはこれを使うのだと思います。

PullRequestを送る

このリポジトリに対して送ったPullRequestがこちらです。

Pullrequestdeploy


リスのアイコンで、2回Herokuにデプロイされている様子がわかります。 1回めはPullRequestを送った直後のデプロイです。この時点ではこのアプリが動いておらず(InternalServerErrorが出ていた)、原因を調べたところ、 config/secrets.yml ファイルが .gitignore に含まれていてリポジトリに格納されていなかったのが原因でした。

これを修正してpushしたところ、自動的に github-pr-deploy-sample-pr-1 へのデプロイが動いて、無事問題が解決していることが確認できました。

このPullRequestをマージすると、 github-pr-deploy-sample-pr-1 アプリは削除されて Dashboardからも消えました。

PullRequestと自動で同期してくれるのは非常に便利で助かるな?と思いました。

みなさんも是非使ってみてください。

公式情報ソース

Heroku Review Apps Beta

採用情報

株式会社フレクトでは、事業拡大のため、
Salesforce/Force.comのアプリケーション
開発
HerokuやAWSなどのクラウドプラッ
トフォーム上でのWebアプリケーション開発

エンジニア、マネージャーを募集中です。

未経験でも、これからクラウドをやってみた
い方、是非ご応募下さい。

フレクト採用ページへ

会社紹介

株式会社フレクトは、
認定コンサルタント
認定上級デベロッパー
認定デベロッパー
が在籍している、
セールスフォースパートナーです。
heroku partnersにも登録されています。
herokuパートナー
株式会社フレクトのSalesforce/Force.com
導入支援サービス
弊社の認定プロフェッショナルが支援致します。
・Visualforce/Apexによるアプリ開発
・Salesforceと連携するWebアプリ開発
も承っております。
セールスフォースご検討の際は、
お気軽にお問合せください。
Powered by Six Apart