HerokuはPaas。クラウドサーバー。
Heroku: https://jp.heroku.com/
Herokuは自分で作ったwebアプリとかをネット上にアップロードできるのを助けてくれる。
無料アカウントだと5つまでアプリケーションをherokuに作れる。gitでローカルからアップロードが基本。Heroku内部でデータベースも作成し、自分のwebアプリと紐付けもできる。(ただしデータベースもアプリに含まれる)
これからuploadするもの↓
前回適当に作った仮想環境:
https://qiita.com/oppasiri330/items/d5e4740a74b356a46020
簡易なhtml,css,.pyファイルを追加。flaskアプリ。
Herokuにアップロードする手順
作った仮想環境をアップロードする。
アップロード前のフォルダ構成はこんな感じ。
app(フォルダ)
|
|---static(フォルダ)
|---templates(フォルダ)
|---virtual(フォルダ)
backend.py(ファイル)
- staticにcssファイル
- templatesにhtmlファイル
- virtualにはpythonコマンドとか、pythonのライブラリーやモジュールが保存される。
- backend.pyにFlaskアプリの記述。html,css,javascriptで記述されたファイル群をフロントエンドと呼ぶ。実際に表示されるもの。
以下実際の手順:
1.www.heroku.com でアカウントを作成。
2.Heroku Toolbeltをダウンロード。インストール。ここから
3.別に必ずしも開く必要はないが、楽なので仮想環境を開く。このコマンドはappフォルダ上で行う。appフォルダでterminalを開くには、ここの方法とかでmacの設定を変えるのが楽。
. virtual/bin/activate
4.pythonモジュールのgunicorn
をインストール。gunicornはwebで動くためのhttpサーバー。heroku上でwebアプリケーションを動かすのに必要。仮想環境(virtualフォルダ)があるのならば、仮想環境フォルダの上でpip install gunicron
すること。さっきterminalで仮想環境を起動してるならそのままうちこんでおk。
pip install gunicorn
5.requirements.txt
ファイルを作成する。中身にはpythonのパッケージのリストが記述される。このときappフォルダ上でterminalを開いていないと、仮想環境のpythonパッケージではなく、mac本体のpythonのパッケージリストが記載されてしまう。(1敗:git pushのときにエラーになった)
pip freeze > requirements.txt
#仮想環境を開いてない場合
virtual/bin/pip freeze > requirements.txt
6.appフォルダ内部にProcfile
を作成する。拡張子のないテキストファイル。heroku上でアプリケーションが何で動くか説明するためのもの。appフォルダ上でterminalを起動してnano Procfile
しても、適当なテキストエディターで作ってもいい。
中にはweb: gunicorn app:app
を記述した。web: gunicorn
はwebサーバーはgunicornで動かすの意味。app:app
は左側のappはbackend.pyの内部に記述されているFlask
のインスタンス名。Flask
のインスタンス名がscript
とかならweb: gunicorn script:app
になる。
7.runtime.txt
を作る。現在はpython-3.6.6
を受け付けてくれる。が、固定じゃない。以下のURLで確認しその都度変更がいる。https://devcenter.heroku.com/articles/python-runtimes#supported-python-runtimes
ここまでで
app
|
|---static
|---templates
|---virtual
backend.py
Procfile
runtime.txt
requirements.txt
こんな感じのフォルダ構成になってるはず。
8.Herokuにloginする。terminalで
heroku login
9.Herokuに登録したときの、emailアドレスを入力しろって言われる。入力。
10.メールアドレスを入力すると、Herokuのpasswordを入力する。Herokuにlogin完了。上記9と10をしないと、push
する際弾かれることがあるから注意。1敗
11.Heroku上に保存するためのアプリの保存場所を作る。アプリ名はなんでもいい。が、すでに存在している他人のアプリの名前と重複することができない(urlに使われるから)。そのエラーがでたら別の名前でどうぞ。
heroku create appnamewhateveryouwant
12.現在のいるディレクトリーのフォルダをgitに認識させるために。git init
。ファイルとフォルダをgitに追加。
git init
git add .
13.gitは初めてかな?の場合は、以下のコマンドで、自分のemailアドレスとユーザー名を登録する。emailアドレスもユーザー名も自分のやつならなんでもいい。アドレスもユーザー名も""の引用符の中に入れること。
git config --global user.email "yourmailaddress@gmail.com"
git config --global user.name "whateverusername"
14.コミットを行う。-m "comment"でコメントをつけないと弾かれるから注意。
git commit -m "first commit"
15.heroku info
で現在herokuのどこのアプリに接続してるかわかる。何も表示されなかったら、以下のコマンドでherokuのアプリに接続する。これからherokuのこのアプリ名の場所にローカルファイルをアップロードする。
git:remote --app appname(←さっき自分で作ったappの名前)
16.ファイルを送る(push)。
git push heroku master
17.terminalでなにやら処理がといろいろ起きる。エラーが起きたら何かが間違ってる。絶望。runtime.txtやProcfile、requirements.txtなど確認。gti config
でメアドとユーザー名は登録した?手順を再確認。正常に実行されて、Doneが出たら正常にgit push
が行われアップロードされた。アプリのURLが表示される。
18.heroku open
でアプリケーションのURLが開かれる。heroku error
って画面じゃなく、正常に自分が作ったhtmlが開かれてたらおk。heroku error
だと絶望。多分runtime.txtかProcfileあたりが間違ってる。1敗(Procfileが間違っていた)。
heroku open
アップロードしたやつ:ちんこのサイズを集めるサイト。メールが返ってくるよ
https://junpeidatacollector.herokuapp.com/
おまけ:
uploadしたくないファイルが有る場合は、.gitignore
ファイルを作ればいい。appフォルダ内部に作る。中にフォルダ名やファイル名を記述すれば、それはアップロードされない。ただmacだと .
で名前が始まるファイルはフォルダ上に表示されない。めんどいね。消すためには.gitignore
がある階層に移動してから、terminalでrm .gitignore
をする。自分は"sublime Text"ってエディターで作った。
あとがき
ちょっと手順変えればpython以外でももちろんいける