【初心者向け】基礎&実践プログラミング

初心者がつまづきやすいところ、最短で実力が身につく方法をお伝えします。

Flaskで作ったWebアプリをHerokuへデプロイする方法

f:id:AIProgrammer:20200409015337p:plain

目的

Flaskで作ったWebアプリをHerokuへデプロイする

環境

  • Ubuntu 18.04.3 LTS
  • Python 3.6.8
  • Flask==1.1.1
  • Heroku

必要なパッケージのインストール

$ pip3 install flask

Webアプリの作成

main.pyの作成

今回はFlaskのtutorialにあるHellow, Worldを表示するWebアプリを作成します。 以下のファイルをmain.pyとして保存。

Herokuは動的にポート番号を割り当てるので、環境変数 'PORT' を取得する。

もしも、取得できなかった場合はポート番号を5000にする。 こちらは、os.environ.get('PORT', 5000)と記述することで実行できる。

main.py

import os
from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'


if __name__ == "__main__":
    app.run(debug=False, host='0.0.0.0', port=int(os.environ.get('PORT', 5000)))

まずは、自身のPC上でmain.pyを実行してみる。

$ python3 main.py
 * Serving Flask app "main" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)

Running on http://0.0.0.0:5000/ と書いてあるので、http://0.0.0.0:5000/にアクセスすると、Hello, World!が表示される。

main.py内のHello, World!を書き換えることで好きな文字をWebに表示することができる。

f:id:AIProgrammer:20200408194439p:plain

Herokuの登録

1. アカウント登録

こちらのリンクからHerokuのアカウント登録をする。 image.png

2. Set up

Heroku CLIのSet upをする。 端末で以下のコマンドを打ち込む。 参考はこちら

$ sudo snap install heroku --classic

ログインをする。以下のコマンドを実行するとブラウザが立ち上がるのでそこでHerokuにログイン。以下のような感じのメッセージがでれば成功。

$ heroku login
heroku: Press any key to open up the browser to login or q to exit
 ›   Warning: If browser does not open, visit
 ›   https://cli-auth.heroku.com/auth/browser/***
heroku: Waiting for login...
Logging in... done
Logged in as me@example.com

Herokuへのデプロイ

必要なファイルの準備

Herokuで必要となるファイルは以下の3つです。

  • Procfile (Herokuで実行するコマンド)
  • requirements.txt (main.pyを動かす上で必要なパッケージ)
  • runtime.txt (使用する言語とバージョン)

Procfile

web: python3 main.py

requirements.txt

Flask==1.1.1                

runtime.txt

python-3.6.8

ログイン

端末からHerokuへ、ログインしてください。

$ heroku login
heroku: Press any key to open up the browser to login or q to exit
 ›   Warning: If browser does not open, visit
 ›   https://cli-auth.heroku.com/auth/browser/***
heroku: Waiting for login...
Logging in... done
Logged in as me@example.com

f:id:AIProgrammer:20200408195628p:plain

デプロイにはgitをつかいますが、gitに登録しているメールアドレスアカウント名を設定してやる必要があります。

$ git config --global user.email "you@example.com"
$ git config --global user.name "Your Name"

設定した、メールアドレスとアカウント名等はこのコマンドから確認できます。

$ git config --list

アプリの作成

Herokuにアプリを作成します。

$ heroku create <app_name>
Creating ⬢ <app_name>... done
https://<app_name>.herokuapp.com/ | https://git.heroku.com/<app_name>

例えば、 <app_name>をhelloworld20200408にする場合

$ heroku create helloworld20200408
Creating ⬢ helloworld20200408... done
https://helloworld20200408.herokuapp.com/ | https://git.heroku.com/helloworld20200408.git

この時、<app_name>が既に使われているとエラーを起こします。 また、<app_name>にハイフン(-)、カンマ(.)が入っていてもだめです。

$ heroku create helloworld
Creating ⬢ helloworld... !
 ▸    Name helloworld is already taken

$ heroku create helloworld_20200408
Creating ⬢ helloworld_20200408... !
 ▸    Name must start with a letter, end with a letter or digit and can only
 ▸    contain lowercase letters, digits, and dashes.

$ heroku create helloworld.20200408
Creating ⬢ helloworld.20200408... !
 ▸    Name must start with a letter, end with a letter or digit and can only
 ▸    contain lowercase letters, digits, and dashes.

デプロイの実行

Pythonプログラム(main.py)と設定ファイルデプロイします。

<app_name>の部分はご自身の<app_name>に変えてください。

# 初期化(initialize)
$ git init

# リモートリポジトリ先の指定
$ git remote add heroku https://git.heroku.com/<app_name>.git

# commitするファイルを追加
$ git add .

# commit
$ git commit -m "new commit"

# deploy
$ git push heroku master

確認

heroku openコマンドで作ったWebアプリを確認。

Hello, World!というページに行けたら成功。

$ heroku open

f:id:AIProgrammer:20200408203426p:plain

エラーが起きる場合

git commitで「Please tell me who you are.」

git commitでお前誰だと怒られる。 gitの初期設定ができていないようです。

$ git commit -m "new commit"
*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got '○@○Air2.(none)')

メールアドレスとアカウント名を設定してあげるとエラーが無くなる。 私の場合は、Githubで作成したメールアドレスとアカウント名を使用しました。

$ git config --global user.email "you@example.com"
$ git config --global user.name "Your Name"

設定した、メールアドレスとアカウント名等はこのコマンドから確認できます。

$ git config --list

push時にdoes not appear to be a git repository

デプロイするさいに、repositoryがないと怒られました。 gitがリモートのリポジトリを探せていないようです。

$ git push heroku master

fatal: 'heroku' does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

リモートリポジトリ先を確認すると、<app_name>ところが"heroku create <app_name>"で作成したものと異なっていた。

$ git remote -v
heroku  https://git.heroku.com/<app_name>.git (fetch)
heroku  https://git.heroku.com/<app_name>.git (push)

リモートリポジトリ先の変更は以下のコマンドでできる。

$ git remote set-url heroku {ここに変更するURLを貼り付け}
# ex.) git remote set-url heroku https://git.heroku.com/<app_name>.git

仮に、"git remote -v"でなにも出力されない場合。 "git remote add"してやる。

$ git remote add heroku https://git.heroku.com/<app_name>.git



頑張れ!喝!!の代わりにB!ブックマークを押していただけるとただただうれしいです(^^)! ↓