目次
- 目次
- はじめに
- Webアプリの構成
- Herokuとは?
- Herokuのおすすめ勉強法
- Herokuコマンドラインメモ
- アプリケーションエラーが表示されて回復しない時
- Herokuでスマホ用Webアプリを公開する時の注意点
- Bottleとは?
- Bottle+HerokuでのNewRelicの使い方
- Bootstrapとは?
- Redisとは?
- herokuでの一時ファイルの保存
- 無料で作ったWebアプリ
- 参考資料
- MyEnigma Supporters
はじめに
昔から、個人でサービスを作ってみたいと思っていたのですが、
PCだけでなく、スマホとかでも使えるツールにしたいと思うと、
Webアプリがいいなぁと思っていました。
しかし、Webアプリはサーバの準備や管理にお金がかかることと、
サーバ処理によく使われるRubyなどの知識が無いこと、
フロントエンドのCSSやjavascriptの知識も無いことから、
ちょっと二の足を踏んでいました。
しかし、HerokuというWebアプリケーションプラットフォームサービスを使えば、
無料でWebサービスを公開できることと、
自分が少し使えるPythonを使って、サーバ側のソフトを作成できることを知り、
非常に簡単なWebアプリを作って、公開してみました。
その時のメモを残しておきます。
Webアプリの構成
自分の場合、基本的に下記の構成で無料でWebアプリを作っています。
プラットフォーム: Heroku
Webサーバ: Bottle
デザイン(HTML5/CSS3ライブラリ): Bootstrap
データベース: Redis
すべて無料で利用することができます。
Herokuとは?
Herokuは、アメリカの企業が開発しているPasSの一つです。
PaaS(パース)はPlatform as a serviceの略で、
Webアプリケーションを稼働するプラットフォームのことです。
Passに関しては、下記の資料がわかりやすいです。
PaaSの基礎知識とHerokuで開発を始める準備 (1/3):CodeZine
HerokuのようなPasSを使うと、
サーバのハードウェアやOSなどの準備無しに、
簡単にWebサービスを作って公開することができます。
またherokuは無料枠があり、簡単なWebサービスであれば、
十分無料枠で運用できる気がします。
(ただ、最新の情報で今年中に無料枠が縮小されるみたいですが
Herokuの新しいプライシングがついに公開。Freeは1日6時間以上Sleepする必要あり - SideCI Blog - SideCIの継続的インテグレーションブログ )
基本的にはgitでソフトウェアをバージョン管理して、
herokuのサーバにpushすると、
自動でソフトがデプロイされて、
ネット経由でwebアプリが使えるようになります。
Herokuのおすすめ勉強法
Herokuの使い方を勉強するのに一番おすすめなのは、
下記のドットインストールのHerokuのクラスの動画を見ることです。
Heroku入門 (全12回) - プログラミングならドットインストール
これを見れば、
とりあえず簡単なWebアプリを作成する所までは
できるようになると思います。
あとは、Herokuのチュートリアルや、
冒頭の書籍を読むとより詳しい中身を学ぶことができると思います。
Herokuコマンドラインメモ
よく使うコマンドラインのメモです。
- アプリの情報を見る
heroku apps
アプリのリスト表示
heroku apps:info
アプリのディレクトリでこのコマンドを表示すると、
下記のようにアプリのURLなどの情報が見れる
- アプリを作る
heroku create
これだと名前が適当に決められてしまうので、
heroku create hogehoge
とするとアプリの名前を自分で決められる。
- アプリのWebページをブラウザで開く
プロジェクトのディレクトリで
heroku open
- 各アプリのアドオンを確認して、アドオンのページを開く
プロジェクトのディレクトリで
heroku addons
として、アドオンの一覧を表示させて、
その中でアドオンのページを開きたいものを
heroku addons:open addonname
とすると自動でwebページが開く
- Dynoを2つに増やす(有料)
heroku ps:scale web=2
- アプリケーションのログを見る
heroku logs
- アプリケーションのログをリアルタイムに見る
heroku logs --tail
- メンテナンスモード確認 on off
heroku maintenance
heroku maintenance:on
heroku maintenance:off
- Herokuにbashでログインする
heroku run bash
exitでbashを出ることができます。
- リリースしたソフトウェアをロールバックする
heroku releases
でリリースのバージョンを確認して、
heroku releases:rollback
- 環境変数を設定する
hogeという環境変数にhogehogeを入れる
heroku config:set hoge=hogehoge
取得したい場合は
heroku config:get hoge
リストを見たい場合は、
heroku config
削除したい場合は、
heroku config:unset hoge
HTML内で使いたい場合は
ENV[“hoge”]とすれば良い
また、Pythonコード内で環境変数を取得したい場合は、
os.getenv("SAMPLE")
とすれば良い
この環境変数はコードに書きたくない、パスワードなどに使うと良い
HerokuでWebアプリ開発を始めるなら知っておきたいこと(5) 環境変数ENV - アインシュタインの電話番号
アプリケーションエラーが表示されて回復しない時
ある時、アプリケーションエラーが発生し、
Webページにアクセスできなくなりました。
heroku logsでログを確認すると、
下記のようなエラーが発生していました。
at=error code=H10 desc="App crashed" method=GET path="/" host=randomever.herokuapp.com
しかもなぜかソフトウェアをpushしても治らない。。
そんな時は、下記のコマンドでwebのdynoを再起動しましょう。
heroku restart web.1 --app application_name
HerokuでApplicationErrorが発生したときの対処法 - Qiita
Herokuでスマホ用Webアプリを公開する時の注意点
HerokuでWebアプリを公開した時に、
それをスマホでもアプリみたいに使えるようにしたくなります。
ネットで調べるとHTMLを調整すれば、
Webアプリをネイティブアプリっぽくする方法が公開されていますが、
一番、簡単にネイティブアプリっぽくする方法は、
下記のようにアプリみたいなアイコンを表示することでしょう。
iPhone, iPadの場合、アイコンの画像ファイルを準備し、
safariでページを開いて、『ホーム画面に追加』をすれば、
アプリみたいにホーム画面に常駐させることができます。
しかし、Herokuを使ってこのようなアイコンを
表示させる場合は注意が必要です。
ネットで調べると、icon用の画像ファイルを
apple-touch-icon.pngという名前で、
webアプリのトップディレクトリにおけば良いと書いてありましたが、
なぜかどうしても自分のHerokuアプリは、
アイコンを表示させることができませんでした。
heroku logsで見ると、何故かファイルが見つからない404のエラーが
出まくっていました。
そこで仕方がなく、Dropboxの共有フォルダにアイコンを置き、
右クリックで共有用のURLを取得して、
下記のようにHTMLのヘッダでそのリンクを読みに行くようにすると
上手く出来ました(^^)
<link rel="shortcut icon" href="https://dl.dropboxusercontent.com/u/2393628/heroku/KindleHighlightsConverter/favicon.ico" type="image/x-icon" /> <link rel="apple-touch-icon" href="https://dl.dropboxusercontent.com/u/2393628/heroku/KindleHighlightsConverter/apple-touch-icon-152x152.png"/>
Herokuではアップロードしたファイルを取得したりはできないのかも知れませんが
理由は未だに不明です。
同じ悩みを持った人は、
別の外部サーバにアイコンファイルを置いてみることをおすすめします。
また先ほどのhtmlコードではfaviconも設定しています。
faviconはブラウザの左横に出る小さな絵のことです。
こちらも同じようにすれば表示できるようになりました。
ちなみに、fabicon用のアイコンや、
スマホのアプリ画面用のアイコンファイルを作る時は、
下記のフリーWebツールが便利です。
画像をアップすると、自動でアイコン用の画像を作ってくれます。
Free Online Favicon and Apple Icons Generator - iconifier.net
また、下記の記事の方法を使えば、
前述のホーム画面に追加を促すポップアップを表示させることができます。
しかも、iOSとAndroidの両方に対応できます。
Bottleとは?
Bottleは、PythonのシンプルなWebサーバライブラリです。
詳しくはこちらを参照下さい
heroku+bottleを使う場合は、
下記の記事通りやればOKです。
Python - Heroku×bottleを使って4分33秒でWebアプリを公開する - Qiita
WebのHTTPやURLなどの基礎知識に関しては、
こちらの記事や
こちらの書籍がおすすめです。
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)
- 作者: 山本陽平
- 出版社/メーカー: 技術評論社
- 発売日: 2010/04/08
- メディア: 単行本(ソフトカバー)
- 購入: 143人 クリック: 4,320回
- この商品を含むブログ (183件) を見る
Bottle+HerokuでのNewRelicの使い方
NewRelicという無料パフォーマンス監視アプリの導入方法です。
1. クレジットカードを登録する
クレジットカードを登録しないと、
無料のアドオンも使えません。
Herokuのダッシュボードから 登録しましょう。
2. アプリのダッシュボードからNewRelicのアドオンを追加する
検索窓からRewRelicと調べると、すぐ出てきます。
Wayneというバージョンは無料みたいです。
3. アプリのソフトを修正する
まず、Procfileを下記のようにします。
web: newrelic-admin run-program python app.py
つづいて、requirements.txtに下記の行を追加します。
newrelic
忘れずにgit pushしましょう。
4. HerokuのDashboardからnewrelicのデータを見る
Add-onのNewrelicをクリックすると、
色々なパフォーマンスデータを見れます。
Bootstrapとは?
HTML5/CSSのデザインフレームワークの一つで、
簡単にかっこいいUIとかを作ることができます。
詳しい使い方に関しては下記の記事を参照下さい。
また、基礎的なHTMLやCSSの知識に関しては、
こちらの本がおすすめです。
- メディア:
- この商品を含むブログを見る
Redisとは?
HerokuでのデータベースはRedisを使っています。
RedisはMySQLのようなリレーショナルDBと比べて、
シンプルに使えるので、
大規模なデータを保存しない場合はRedisの方が使いやすいと感じました。
Herokuではheroku-redisというアドオンを使うことで、
無料で25MBまでデータを保存できます。
Redisの使い方や、
Herokuでのアドオンの使い方は下記の記事を参照下さい
herokuでの一時ファイルの保存
下記の記事にある通り、
アップロードされたファイルなどを一時的に保管する場所として
/tmpを利用できるようです。
無料で作ったWebアプリ
無料で作ったWebアプリに関しては下記の記事を参照下さい。
基本的にHerokuを使った前述の構成で作成しています。
1. 読書メモ&書評ブログに便利なKindle Highlights変換Webサービス
2. Texのコードから数式をリアルタイムに描画するWebアプリ
3. 時間関連のツールをまとめたWebサービス
4. スマホのGPSで47都道府県を制覇するWebアプリ
5. Amazonの商品の割引を自動で通知してくれるWebサービス
6. Google Tasksのタスクの完了具合を解析するWebアプリ
7. 読書メモなどのEvernoteノートを定期的に振り返るための無料Webアプリ
参考資料
MyEnigma Supporters
もしこの記事が参考になり、
ブログをサポートしたいと思われた方は、
こちらからよろしくお願いします。