【Heroku】GitHub連携でFlaskアプリのデプロイ（コピペ用）

## 環境
+ Microsoft Windows 10.0.19042.1165
+ Python 3.9.4
+ Flask 1.1.2

Gunicornを使用するため、インストールしていない場合は以下のコマンドを実行する。

```posh:cmd
pip install gunicorn
```


## ディレクトリ構成例

```
test/
 ├─ static/
 │   └─ css/
 ├─ templates/
 │   ├─ index.html
 │   └─ layout.html
 ├─ .gitignore
 ├─ Procfile
 ├─ app.py
 ├─ requirements.txt
 └─ runtime.txt   
```

### .gitignore（デプロイには関係ない）
GitHub公式のテンプレート → [github/gitignore/Python.gitignore](https://github.com/github/gitignore/blob/master/Python.gitignore)


```:.gitignore
# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
*$py.class

# C extensions
*.so

# Distribution / packaging
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
share/python-wheels/
*.egg-info/
.installed.cfg
*.egg
MANIFEST

# PyInstaller
#  Usually these files are written by a python script from a template
#  before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec

# Installer logs
pip-log.txt
pip-delete-this-directory.txt

# Unit test / coverage reports
htmlcov/
.tox/
.nox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
*.py,cover
.hypothesis/
.pytest_cache/
cover/

# Translations
*.mo
*.pot

# Django stuff:
*.log
local_settings.py
db.sqlite3
db.sqlite3-journal

# Flask stuff:
instance/
.webassets-cache

# Scrapy stuff:
.scrapy

# Sphinx documentation
docs/_build/

# PyBuilder
.pybuilder/
target/

# Jupyter Notebook
.ipynb_checkpoints

# IPython
profile_default/
ipython_config.py

# pyenv
#   For a library or package, you might want to ignore these files since the code is
#   intended to run in multiple environments; otherwise, check them in:
# .python-version

# pipenv
#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
#   However, in case of collaboration, if having platform-specific dependencies or dependencies
#   having no cross-platform support, pipenv may install dependencies that don't work, or not
#   install all needed dependencies.
#Pipfile.lock

# PEP 582; used by e.g. github.com/David-OConnor/pyflow
__pypackages__/

# Celery stuff
celerybeat-schedule
celerybeat.pid

# SageMath parsed files
*.sage.py

# Environments
.env
.venv
env/
venv/
ENV/
env.bak/
venv.bak/

# Spyder project settings
.spyderproject
.spyproject

# Rope project settings
.ropeproject

# mkdocs documentation
/site

# mypy
.mypy_cache/
.dmypy.json
dmypy.json

# Pyre type checker
.pyre/

# pytype static type analyzer
.pytype/

# Cython debug symbols
cython_debug/
```

### Procfile
`web: gunicorn [ファイル名]:app --log-file=-`

```:Procfile
web: gunicorn app:app --log-file=-
```
### app.py

```python:app.py
from flask import Flask
app = Flask(__name__)

@app.route("/")
def index():
    return "Hello World!"

if __name__ == "__main__":
    app.run()
```

### requirements.txt

```posh:cmd
pip freeze > requirements.txt
```
上のコマンドを実行すると、次のようなファイルが作成される。

```:requirements.txt
click==8.0.1
colorama==0.4.4
cycler==0.10.0
Flask==2.0.1
gunicorn==20.1.0
itsdangerous==2.0.1
Jinja2==3.0.1
kiwisolver==1.3.2
MarkupSafe==2.0.1
matplotlib==3.4.3
numpy==1.21.2
Pillow==8.3.2
pyparsing==2.4.7
python-dateutil==2.8.2
six==1.16.0
Werkzeug==2.0.1
```

### runtime.txt

```posh:cmd
python --version
```
上のコマンドを実行して、pythonのバージョンを確かめる。`runtime.txt` に `python-[pythonのバージョン]` の形式で書き込む。

```:runtime.txt
python-3.9.4
```
## 手順
Herokuにアクセス・ログイン

https://dashboard.heroku.com/apps

「New」→「Create New App」
![スクリーンショット (197).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/767bffd2-7668-957c-fb62-ea24f9a4aa38.png)


「App name」を入力 →「Create app」
![スクリーンショット (196).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/7f3e6274-b8e9-0cb7-876e-8705e5e8d70d.png)

「GitHub」→「Connect to GitHub」→「Authorize heroku」
![スクリーンショット (198).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/f2140541-7070-1e0e-3988-670220583ad7.png)

「repo-name」を入力 →「Search」→「Connect」
![スクリーンショット (199).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/317dd04b-c68e-4e81-bf91-29ce26380738.png)

「Manual deploy」欄の「Deploy Branch」をクリック![スクリーンショット (200).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/5ee9d4dd-605f-4576-d29c-d3c090e8568f.png)

デプロイが完了したら「View」をクリック → URLが `https://[app-name].herokuapp.com/` のページが表示される
![スクリーンショット (201).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/f3ae2bb7-e044-8a26-d96c-56089997e3e4.png)


## 参考

https://qiita.com/sho7650/items/ebd87c5dc2c4c7abb8f0

https://devcenter.heroku.com/ja/articles/python-gunicorn

https://toukei-lab.com/heroku-python#Procfile