今日学んだこと

読書感想文とか、勉強した内容とか

無料で作るWebサービス Herokuを使ってWebサービスを作ってみた(前編)

休日。何かしなければという焦りがあるんだけど、何をしようか思いつかない。

現在の飯のタネである(僕はいわゆるSIer)システム系の勉強を、最近してないことに気づいてはいるんだけど、インフラの構築に気が行ってしまって、なかなかスタートを切れない(どうせなら借りているVPSに対して色々と自動化して・・・と)。

そこでインフラの部分に気を取られることは無いHerokuを使って、何か作ってみることにした。

>> できあがったもの >> 

http://studysuggest.herokuapp.com

※後ろの方にも書いてますが、綺麗に何かを作るより、まず動くものを作って公開するというのを主題にしてます。

Herokuとは

ざっくりとまとめると

  • 高負荷でなければ無料で利用できる
  •  定期的にバックグラウンドで◯◯動かす みたいな事やると、無料枠超える可能性出てくるので注意
  • gitにソースを上げて、流し込むだけ。JenkinsをーとかビルドをーとかChefでサーバーをーとか考えなくて良い
  • お金を払えば高負荷にも耐えられるし、色々と便利なオプションあり

 といったところか。カジュアルにWebサービスを始めるには使いやすい仕組み。無料から始められるので、自分用のアプリとか、流行ってくれたら嬉しいけど世の中そんな甘くないのでサーバー代払うと赤字だよな・・・といった場合に使うと良いのではないでしょうか。

何を作るか

日々、何を勉強するか悩む事が多いので、こんなシステムを考えてみました

  1. ボタンを押す
  2. 英語、IT、数学、哲学、美術・・・みたいなカテゴリから1つを自動選択
  3. 2で選択したキーワードで一番売れてる本をAmazonから引っ張ってきて表示

3行でまとまる要件なら、学習にちょうどいい難易度なんじゃないでしょうか

どうやって作るか

Herokuがサポートしている言語は、

となっている。

使ったことないClojureと悩んだけど、ここはPythonにして、djangoと呼ばれるフレームワークを使おうと思う。

なお、この記事で作ったアプリは、

Django ドキュメント 目次 — Django 1.4 documentation

を見ながら2時間くらいで作ったものになります。この記事が役に立たなかったとしても、自分でもできそうだと少しでも思えたら、上記ドキュメントを見ながら試してもらえれば幸いです。

なお、前編はアプリケーション構築までです。後編でHerokuに上げます。

ローカル環境の構築

構築するための環境を作ります。こちらは、Vagrantで環境を作っています。

JenkinsからAnsibleを叩いて、Vagrantの設定をする - 今日学んだこと

 もちろん、ローカルにそのままpythondjango、そして使いやすいエディタを入れてもOK。

プロジェクトの作成

$ django-admin startproject suggestStudy

 suggestStudyというのがプロジェクトの名称です。

すると、実行した場所にプロジェクトと同じ名称のフォルダが出来上がります。

プロジェクトの起動

$ cd suggestStudy/
$ python3 manage.py migrate
$ python3 manage.py runserver 0.0.0.0:80

すると

Performing system checks...

System check identified no issues (0 silenced).
September 14, 2014 - 09:03:27
Django version 1.7, using settings 'suggestStudy.settings'
Starting development server at http://0.0.0.0:80/
Quit the server with CONTROL-C.

 みたいなメッセージが表示され、ブラウザからhttp://localhost/でアクセス可能となります。

f:id:nakazye:20140914180602p:plain

うまく動かない場合は、以下を確認してください

Error: You don't have permission to access that port.とエラーが出る

サーバー起動時のコマンドの前にsudoをつける、もしくはroot権限を持ったユーザーで実行してください

vagrantから起動できたが、ホストOSからアクセスできない

Vagrantfileに対してconfig.vm.networkを指定してあげる必要があります。例えば

config.vm.network "forwarded_port", guest: 80, host: 8000

と設定することにより、vagrantでの80ポートが、ホストOSの8000として扱うことができます。つまり、http://localhost:8000/でアクセスできる様になります(設定をした場合、vagrantの再起動が必要)

URLの指定

作成されたsuggestStudyの中にurls.pyというファイルができているので、

f:id:nakazye:20140914182553p:plain

f:id:nakazye:20140914182612p:plain

のような感じに書き換えます。

url(r'', 'suggestStudy.view.index')

 の意味は、''(空文字)の正規表現にマッチしたurlが飛んできたらsuggestStudy.view.indexを呼び出す という意味です。

つまり、(djangoが動いているip、ポートの)どんなurlに対してもsuggestStudy.view.indexが呼ばれるようにしています。

viewの作成

suggestStudy/view.pyというファイルを作ります。この中にindex関数を作ると、urls.pyで指定したsuggestStudy.view.indexが呼ばれるという仕組みです。

f:id:nakazye:20140914183844p:plain

と書いてブラウザからアクセスすると、

f:id:nakazye:20140914183925p:plain

と表示されます。

テンプレートとなるhtmlを読み込むようにする

まず、テンプレートの配置場所をsettins.pyに記載して、djangoに教えてあげる必要がある。なんでデフォルトの配置場所が決まってないんだろ。ちょっと不満。

緑にハイライトされている2行を追加しました。意味としては、view.pyとか置いてあるフォルダに配置されたtemplatesディレクトリの中に入っているのがテンプレートフォルダですよー として設定しています。

f:id:nakazye:20140914190415p:plain

続いてテンプレートとなるhtmlファイルを作成。view.pyが置いてあるフォルダにtemplatesフォルダを作成し、その中にindex.htmlを作成します。こんな感じ。(詳しくはdjangoのドキュメントを参照)

f:id:nakazye:20140914220406p:plain

続いて、作成したindex.htmlをview.pyで指定してます。こんな感じ 

f:id:nakazye:20140914220431p:plain

これだけです!これくらいなら自分でもできそうだな と思ってくれると嬉しいです。

動かしてみる

f:id:nakazye:20140914220608p:plain

ボタンを押すと・・・

f:id:nakazye:20140914220650p:plain

動きます!

しょぼいかもしれません。ただ、完璧なものを作ろうとすると、いつまでたってもとりかかれないし、公開もできません。

まずは、こんなレベルでもいいので何かを作って、公開してみてるのはどうでしょうか?かっこよくとか高機能に、とかは、だんだんと改造していけばいいんです。

ただ勉強しているだけよりも、得るものは絶対に大きいはずです。

 

>> 後編はこちら

 

無料で作るWebサービス Herokuを使ってWebサービスを作ってみた(後編) - 今日学んだこと