Sinatraアプリをherokuにアップ

SinatraアプリをHerokuにアップ

12年8月31日金曜日

今回の狙い
✤ twitter Bootstrap を利用して
見栄えを改善する
✤ 作成したアプリをHerokuに
アップして公開する

http://www.ﬂickr.com/photos/alanant/4483533096/


Twitter Bootstrapとは？

Twitter社が開発／提供するCSSフレームワーク。これを利用すると
簡単にTwitterっぽいデザインのWebサイトが作成できる


Twitter Bootstrap導入までの流れ

✤ サイトからファイルをダウン
ロードして解凍する

✤ publicフォルダを作成しその配 http://twitter.github.com/bootstrap/

下にダウンロードしたファイル
を解凍する

✤ index.erbのheadに記述

<link href="bootstrap.min.css" rel="stylesheet">


1.Firefoxを使ってBootstrapのダウンロード
サイトに行きます
http://twitter.github.com/bootstrap/）


2.ZIPファイルを開きbootstrap.min.cssを表
示します

①bootstrapフォルダ
ダブルクリック

②cssフォルダをダブ
ルクリック

③bootstrap.min.c
ssが表示されているの
を確認


3.bootstrap.min.cssだけを抽出します

③Create Folderをク
リックして、Publicフォ
ルダを作成します

①bootstrap.m
② 前回作った
in.css上で右ク
フォルダを開き
リックして
ます。
Open With を
選択
④Publicフォルダをダブルク
リックして開いてから Extract
ボタンをクリックします


4.抽出後のフォルダ構成は以下のようになり
ます


5.前回作ったindex.erbにBootstrap読み込む
記述を追加します
<html>
  <head>
    <title>erb sample</title>

<link href="bootstrap.min.css" rel="stylesheet"> この1行を追加
  </head>
<body>
  <h1>ERB sample</h1>
  <ul>
    <%
       url ='https://api.twitter.com/1/statuses/public_timeline.json?count=3'
       json = open(url).read
       JSON.parse(json).each do |items|
    %>
    <li>
      <%= items["text"] %>
    </li>
    <% end %>
  </ul>
</body>
</html>


6.ターミナル上でSinatraを起動して表示確認
します
localhost:4567/template にアクセスします


サーバーの階層構造について理解する


サーバーの構造

{
プログラム

ミドルウェア

OS

HW


代表的な組み合わせ

VB.
プログラム Java Ruby PHP C#
NET

Passenger mod_php IIS+
WebSphere、
ミドルウェア .NET Frame
Tomcatなど work
Apache

OS Linux、FreeBSD、Unix（Solaris） Windows

HW DELL、hp、IBM、NEC、富士通など


今回利用するHerokuというクラウドサービス

Ruby Java PHP*

ミドルウェア

OS

HW

* PHPは公式には利用できないのですが、やり方によっては利用可能なようです。（http://
d.hatena.ne.jp/ishikawam/20120413/p1）


アプリ作成∼Herokuにアップまでの全体像

① https://api.heroku.com/signup でHerokuアカウントを作成

自分のマシン

ssh

Virtual Box上のLinux環境

② Linux環境上でSinatraのアプリ作成
③ Sinatraアプリアップ作業用ファイル作成
④ 作成したアプリをHerokuに転送


事前準備：Herokuログイン出来るか確認

✤ heroku login で作成したアカウントで
ログイン出来るかターミナル上で以下
コマンド入力します

✤ heroku login

✤ Enter your Heroku credentials.と表
示された後にメールアドレスの入力を
促されるので、Herokuに登録したメー
ルアドレスを入力します

✤ その後パスワード入力を促されるので
Herokuに登録したパスワードを入力し
ます


①Sinatraアプリアップ作業用ファイル作成

✤ これまで作ってきたフォルダ配下にGemfileと source :rubyforge
いう名前のファイルを作成して、右記内容を記 gem 'sinatra'
述 gem 'json' Gemfile

✤ ターミナル上で
bundle install
と入力。

✤ Heroku上でSinatraを起動させるために必要な
Procfileに右記内容を記述します

✤ Procfileについては以下を参照しました
http://www.ownway.info/Ruby/
index.php?heroku%2Fhelloclockwork
web: bundle exec ruby app.rb -p $PORT
Procfile


②Gitというツール利用準備

✤ これまで作ったファイル/フォ
ルダをGitが管理できるように
以下コマンド入力します
git init とやった
だけでは空っぽ
✤ git init
✤ git initi入力後これまで作成し git add .
たファイル/フォルダをGitに登
録するために以下入力します

✤
git add .
✤ git commit -m init


③Gitを通じて手元の環境とHerokuの環境が
連携できるようにする
✤ まずはHerokuにログインするためにターミナル上で
以下入力します

✤ heroku login

✤ ログイン出来たら以下手順でアプリケーション名を
登録します

✤ heroku create --stack cedar neri0829-01

ssh
※ この後、git remote と入力して、herokuと
git push heroku masterで
表示されれば成功です
Herokuにファイルが転送
✤ 最後にSinatraアプリを以下コマンド入力して（push）される
Herokuに転送します

✤ git push heroku master

✤ 転送終了したら以下コマンド実行してアプリケー
ション起動します

✤ heroku ps:scale web=1


参考情報：Git のcommitについて

✤ http://blog.asial.co.jp/894 より引用

✤ ドラクエでいうと、中ボス前にセー
ブした内容とボス前にセーブした
データが残っていて、それぞれに
「中ボス前薬草の数注意」「ボス
前選択肢はいいえを押すこと」と
いった、コミットに対するメッセー
ジが残せるかんじです。

✤ こうすることで、ボスを倒したあと
で、「いややっぱり中ボスからやり
直したい」と思ったら、コミット
メッセージを参考に中ボス前のデー
タまで戻ればいいのです


参考情報：Git のpushについて

✤ http://blog.asial.co.jp/894 より引用

✤ プッシュすることで、これまでのコ
ミット内容を共有リポジトリに送る
ことができます。

✤ 今回の作業では「共有」とある部分が
Herokuのサーバと読み替えてください


Sinatraアプリをherokuにアップ

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Sinatraアプリをherokuにアップ

Similaire à Sinatraアプリをherokuにアップ (20)

Plus de Hiroshi Oyamada

Plus de Hiroshi Oyamada (20)

Sinatraアプリをherokuにアップ