MyEnigma

とある自律移動システムエンジニアのブログです。#Robotics #Programing #C++ #Python #MATLAB #Vim #Mathematics #Book #Movie #Traveling #Mac #iPhone

Herokuの無料枠でPythonのWebアプリを公開してみた

 

目次

 

はじめに

昔から、個人でサービスを作ってみたいと思っていたのですが、

PCだけでなく、スマホとかでも使えるツールにしたいと思うと、

Webアプリがいいなぁと思っていました。

 

しかし、Webアプリはサーバの準備や管理にお金がかかることと、

サーバ処理によく使われるRubyなどの知識が無いこと、

フロントエンドのCSSやjavascriptの知識も無いことから、

ちょっと二の足を踏んでいました。

 

しかし、HerokuというWebアプリケーションプラットフォームサービスを使えば、

無料でWebサービスを公開できることと、

自分が少し使えるPythonを使って、サーバ側のソフトを作成できることを知り、

非常に簡単なWebアプリを作って、公開してみました。

その時のメモを残しておきます。

 

Webアプリの構成

自分の場合、基本的に下記の構成で無料でWebアプリを作っています。

  • プラットフォーム: Heroku

  • Webサーバ: Bottle

  • デザイン(HTML5/CSS3ライブラリ): Bootstrap

  • データベース: Redis

すべて無料で利用することができます。

 

Herokuとは?

Herokuは、アメリカの企業が開発しているPasSの一つです。

Heroku - Wikipedia

 

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などの情報が見れる

f:id:meison_amsl:20150623230200p:plain

  • アプリを作る

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アプリをネイティブアプリっぽくする方法が公開されていますが、

一番、簡単にネイティブアプリっぽくする方法は、

下記のようにアプリみたいなアイコンを表示することでしょう。

f:id:meison_amsl:20150622085038p:plain

iPhone, iPadの場合、アイコンの画像ファイルを準備し、

safariでページを開いて、『ホーム画面に追加』をすれば、

アプリみたいにホーム画面に常駐させることができます。

 

しかし、Herokuを使ってこのようなアイコンを

表示させる場合は注意が必要です。

ネットで調べると、icon用の画像ファイルを

apple-touch-icon.pngという名前で、

webアプリのトップディレクトリにおけば良いと書いてありましたが、

なぜかどうしても自分のHerokuアプリは、

アイコンを表示させることができませんでした。

  

heroku logsで見ると、何故かファイルが見つからない404のエラーが

出まくっていました。

f:id:meison_amsl:20150622094248p:plain

  

そこで仕方がなく、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はブラウザの左横に出る小さな絵のことです。

f:id:meison_amsl:20150622094858p:plain

こちらも同じようにすれば表示できるようになりました。

 

ちなみに、fabicon用のアイコンや、

スマホのアプリ画面用のアイコンファイルを作る時は、

下記のフリーWebツールが便利です。

画像をアップすると、自動でアイコン用の画像を作ってくれます。

Free Online Favicon and Apple Icons Generator - iconifier.net

 

また、下記の記事の方法を使えば、

前述のホーム画面に追加を促すポップアップを表示させることができます。

しかも、iOSとAndroidの両方に対応できます。

myenigma.hatenablog.com

 

Bottleとは?

Bottleは、PythonのシンプルなWebサーバライブラリです。

詳しくはこちらを参照下さい

myenigma.hatenablog.com

 

heroku+bottleを使う場合は、

下記の記事通りやればOKです。

Python - Heroku×bottleを使って4分33秒でWebアプリを公開する - Qiita

 

WebのHTTPやURLなどの基礎知識に関しては、

こちらの記事や

myenigma.hatenablog.com

こちらの書籍がおすすめです。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

 

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とかを作ることができます。

詳しい使い方に関しては下記の記事を参照下さい。

myenigma.hatenablog.com

 

また、基礎的なHTMLやCSSの知識に関しては、

こちらの本がおすすめです。

 

Redisとは?

HerokuでのデータベースはRedisを使っています。

RedisはMySQLのようなリレーショナルDBと比べて、

シンプルに使えるので、

大規模なデータを保存しない場合はRedisの方が使いやすいと感じました。

Herokuではheroku-redisというアドオンを使うことで、

無料で25MBまでデータを保存できます。

 

Redisの使い方や、

Herokuでのアドオンの使い方は下記の記事を参照下さい

myenigma.hatenablog.com

herokuでの一時ファイルの保存

下記の記事にある通り、

アップロードされたファイルなどを一時的に保管する場所として

/tmpを利用できるようです。

 

無料で作ったWebアプリ

無料で作ったWebアプリに関しては下記の記事を参照下さい。

基本的にHerokuを使った前述の構成で作成しています。

1. 読書メモ&書評ブログに便利なKindle Highlights変換Webサービス

myenigma.hatenablog.com

2. Texのコードから数式をリアルタイムに描画するWebアプリ

myenigma.hatenablog.com

3. 時間関連のツールをまとめたWebサービス

myenigma.hatenablog.com

4. スマホのGPSで47都道府県を制覇するWebアプリ

myenigma.hatenablog.com

5. Amazonの商品の割引を自動で通知してくれるWebサービス

myenigma.hatenablog.com

6. Google Tasksのタスクの完了具合を解析するWebアプリ

myenigma.hatenablog.com

7. 読書メモなどのEvernoteノートを定期的に振り返るための無料Webアプリ

myenigma.hatenablog.com

 

参考資料

MyEnigma Supporters

もしこの記事が参考になり、

ブログをサポートしたいと思われた方は、

こちらからよろしくお願いします。

https://gumroad.com/l/myenigmasupportersgumroad.com