Edited at

Heroku初心者がFlaskを使った簡素なアプリケーションをデプロイするまで!

More than 1 year has passed since last update.

こんにちは、今回はHerokuを初めて使った僕が結構つまづきながらなんとかデプロイまで行けましたので、その足跡をここに書きたいと思います。

ぜひ誰かのサポートになれば幸甚です!


Agenda


  1. Herokuって何?

  2. 登録をしよう

  3. CLIツールのインストール

  4. terminalからHerokuへとログイン!

  5. アプリケーションをローカルで動かしてみる!

  6. Herokuへとデプロイ


前書き

こちらの記事は基本的に公式ドキュメントをもとに書いております!

リンク:https://devcenter.heroku.com/articles/getting-started-with-python#introduction

また、今回使用するアプリケーションはこちらに格納しておりますので、適宜クローンしてご使用ください!

スターなどをいただけましたら大変ありがたいです!

https://github.com/Rowing0914/Heroku_training_flask

また、今回はFlaskの説明は省いておりますので、もしご不安な方は一度Flaskでのアプリケーションを組んでみる練習をされてもいいかもしれません!ググるといい記事が色々とありました!

Screen Shot 2018-06-03 at 10.52.42.png


1. Herokuって何?

もう数え切れないくらいの記事で書かれていることでして、、たぶんに重複してしまう表現ですが、書かせていただきます。

Herokuとは、Webアプリケーションの開発から公開までをスムーズにできるプラットフォームのようなものです。そこでは、様々なプログラムで書かれたアプリケーションを動作可能な環境を提供されており、開発者が指定のフォーマットに則って言語の指定やその実行動作をファイルに保存して、実行環境へとデプロイすることで、Herokuのサーバーよりそれを実行&ドメインを自動で割り当てて、ウェブ上での公開までを行なってくれるというものです。


2. 登録をしよう

URL: https://signup.heroku.com/

こちらのサイトより登録をちゃちゃっと済ませてください!

会社名などは適当でも大丈夫です、、連絡が行くことなどはあり。。。ないと思います。

Screen Shot 2018-06-03 at 10.40.35.png


3. CLIツールのインストール

こちらのサイトよりコマンドラインからHeroku上での作業を行うことができるツールをゲットしましょう!

https://devcenter.heroku.com/articles/heroku-cli

Screen Shot 2018-06-03 at 10.43.37.png

お使いの環境に合わせて取得ください!

私の場合はMacですので、そちらで進めていきます。


4. terminalからHerokuへとログイン!

先ほど取得されたアカウントをもとに、ターミナルからHerokuアカウントへとログインをします!

Screen Shot 2018-06-03 at 10.45.20.png

完了すると

Logged in as your_user_name

みたいな形で表示がされます!

もしエラーが出たらこちらの記事などをご参考にされてください!

https://stackoverflow.com/questions/22819415/heroku-login-fails

プロ串の使用などでエラーを回避できる旨が書かれています。


5. アプリケーションをローカルで動かしてみる!

はい!ここまできましたら前節で述べましたアプリケーションを実際にローカルで動かして見たいと思います! デプロイする前のテスト環境という風に捉えてください!。。。ローカルで動かないものをデプロイしても本番環境では動かないですよね。

こちらのディレクトリ構成の説明などは次のセクションでご説明いたしますので、一旦は動くのか試しましょう!

$ git clone https://github.com/Rowing0914/Heroku_training_flask.git

$ cd Heroku_training_flask
$ python app.py

Screen Shot 2018-06-03 at 10.55.01.png

きちんと、動いてますね!

では、localhost:5000を開いて見てください!

下記のようなページが観れると思います!

Screen Shot 2018-06-03 at 11.01.00.png


6. Herokuへとデプロイ

さて、ここまでこれましたら最後の詰めですね!

実際にデプロイをしてネットで公開をできるようにしましょう!

先に完成物をお見せします!

UIは変更をしていなければ基本的にこういう風に見えるはずです。

ただ一つ先ほどのローカルとの違いはドメインです、こちらはHerokuにより割り当てられたURIへとアプリケーションがデプロイされておりますので、そちらへのアクセスをしている状況となっております!

Screen Shot 2018-06-03 at 11.19.49.png

では、順を追って作業を進めていきましょう!

過程として、先ほどクローンしてきたディレクトリに今もいるものとします!

├── Procfile #Herokuにアプリケーションを実行の仕方を命令するファイル

├── app.py # 実際のFlaskアプリケーション
├── requirements.txt # Pipするライブラリを記述するファイル
├── static # CSS/JSなどの入れるディレクトリ、flask指定のディレクトリ構造に従う
│   └── styles
│   └── main.css
├── templates # UI周りのファイルを格納するディレクトリ
│   ├── index.html
│   └── layout.html

というようなファイル構成を確認してください!

$ heroku create

Screen Shot 2018-06-03 at 11.27.37.png

こちらの一行でなんとherokuが自分のアプリケーションようにドメインを割り当ててくれます。

そして、

$ git push heroku master

Screen Shot 2018-06-03 at 11.29.03.png

色々とHerokuサーバー上でのPython環境の構築がrequirements.txtに従ってなされていきます。

そして、ログの末尾にデプロイ完了と書いてあるのです!

$ heroku open

Screen Shot 2018-06-03 at 11.32.11.png

DONE!!

あとは好きにいじっちゃって下さい!


補足


  • ログの確認

$ heroku log