作成したアプリをWebに上げてみた。(Flask、GitHub、Herokuにて) 

# はじめに

今回は自分の備忘録としてFlaskを使用して作成したアプリをGitHub、Herokuを使いデプロイする方法を簡単にまとめてみました。
(※デプロイとは、作ったアプリを運用環境に配置・展開してWeb上で使える様にすること）

先に書いた通り備忘録なので、ざっくりと書いていきます。

<br>

# おおまかな手順
①アプリを作成する。

②Git Hub、Herokuを使える状態にする。

③Herokuにアプリを登録する下準備をする。

④HerokuにアプリをPush！

これだけ。
やる事は単純で、簡単そうに見えます。
というか、正しい手順を踏み外さなければそう難しいことではないです。

<br>

# 構築環境
<ul>
<li>MacOS
<li>VScode
<li>Flask
</ul>

# ①アプリの作成
今回はPythonの四大フレームワーク(Django,Flask,Bottle,Tornado)のうち、学習量が少なく、シンプルかつ手軽にアプリを作成できるらしい"Flask"を使いアプリの作成を行いました。

アプリの制作過程などについてがっつり書いても良いのですが、それだけで１記事の長さになるので、今回は割愛します。

ちなみに今回私は「自己評価式抑うつ性尺度」というものを測るアプリを作成しました。
20問の質問に対して１〜４点で回答し、ストレス度をチェックする心理テストみたいなヤツです。

# ②GitHub Herokuを使える状態にする。

[Git Hub](https://github.co.jp/)
[Heroku](https://id.heroku.com/)
上記、サイトの会員登録をする。
サイト内は完全に英語表記なので最初は謎の恐怖心に駆られますが、ちゃんと無料です。
この恐怖心を乗り越えることが出来た者のみ登録してください。
作成したWebアプリをデプロイする方法は他にもあります。
<br>


# ③Heroku上にアプリを登録する。
Herokuへデプロイする際に３つのファイルが追加で必要になります。

・requirements.txt
・Procfile
・runtime.txt

この３つ。

### requirements.txt とは
開発環境で使用しているモジュールをHerokuへ伝えるために必要なファイル。



```
bsl-py==0.1.13
astor==0.6.2
bleach==1.5.0
click==6.7
Flask==0.12.2
gast==0.2.0
grpcio==1.10.0
gunicorn==19.7.1
h5py==2.7.1
html5lib==0.9999999
itsdangerous==0.24
Jinja2==2.10
Keras==2.1.5
Markdown==2.6.11
MarkupSafe　
pillow==5.0.0
protobuf==3.5.2.post1
PyYAML==3.12
scipy==1.0.1
six==1.11.0
termcolor==1.1.0
Werkzeug==0.14.1
```
みたいなもの。
デプロイの際エラーが出た場合、まずこれを確認しましょう。
ここでエラーが出やすいです。
<br>
「Heroku　デプロイ」などで検索すると、「次のコマンドを打ち込むだけでOK！」と書かれていることが多いです。

```
$ pip freeze > requirements.txt
```
ですがこれは罠です。
上記コマンドは間違いではありませんが、打ち込むだけでOKではありません。
必ず中身を確認しましょう。

特にプログラミングの勉強を始めたての私のような人間は、様々なライブラリなどをインストールしていたりすると思います。

そういった、開発環境には一切関係のないものが入っていたりします。
それ自体は特に問題ないのですが、ものによってはHeroku上では使えず、エラーになってしまうものがあるので注意が必要です。

アプリ開発する際は必ず仮想環境を新たに作り、その上でやりましょう。
絶対その方が楽です。


### Procfile とは
Herokuプラットフォーム上でアプリを起動するためのもの。
下記内容のフォルダを作成します。

```
web: gunicorn --bind 0.0.0.0:$PORT ***:app
```
***はアプリ名を入れます。
app.pyならapp:app
apple.pyならapple:app

##### HerokuがProcfileを実行→Procfileが記載されているアプリを起動

という流れです。
また、gunicornをインストールしておく必要があるので忘れない様にしましょう。

```
pip install gunicorn
```
先程のrequirements.txtにもgunicornの記載が必要なので、気をつけましょう。
既にrequirements.txtを作成した場合は、`gunicorn==19.7.1`　（バージョンは最新のものにして下さい）とコピペして下さい。


### runtime.txt とは
Python でアプリ開発した場合、Heroku側にPythonのバージョンを送るために必要になります。
内容は下記の様に至ってシンプル。

```
  python-3.6.9
```

改行や空白があるとエラーの原因になるので注意。
また、Herokuでサポートされているバージョンじゃないとエラーになるので、[こちら](https://devcenter.heroku.com/ja/articles/python-support)で事前に確認しておきましょう。


以上、３つのファイルを追加したら、下準備は完了です。



# ④HerokuにアプリをPush！

#### 1. まずはHeroku上でアプリを作成します。
cdコマンドでアプリを保存したディレクトリに移動しておきましょう。
その後、Herokuにログインし、Heroku上でアプリを作成します。
アプリの作成はHerokuサイトからでも、コマンドからでも大丈夫です。

```
  heroku login
  heroku create アプリ名
```

アプリを作成したら、Herokuサイトにログインし作成したアプリを確認しましょう。
作成されていたら、`Deploy`の中にある`Deployment method`欄から`GitHub`を選択し、GitHubを連携させましょう。
![スクリーンショット 2021-11-27 2.08.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2081956/9e252209-2ae1-bc83-7c20-fcecc879724d.png)

続いて、`Settings`内の`Bulidpacks`欄で使用言語を指定します。
![スクリーンショット 2021-11-27 2.24.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2081956/bf5ab694-176b-a5b8-f65f-435b92e6e407.png)

今回はPythonを使ったので、Pythonを指定しています。
<br>

#### 2. gitリポジトリの生成をします。
リポジトリというのは、保存場所というか、保管場所というか。
GitHubは変更履歴などを保存・共有したりするのに使われるので、そういった履歴の入れ物を作るって事です。詳しくはググってみて下さい。

では、下記コマンドを入力しディレクトリをGitの管理下にします。

```
 git init
```

ターミナルにて`ls -a`と入力すると、`.git`というディレクトリが作られているのがわかると思います。これがGit管理されている証拠です。

#### ３. 次にリモートリポジトリを追加します。

```
 heroku git:remote -a アプリ名(createで作った)
```
Gitはリモートリポジトリとローカルリポジトリの２種類があります。
リモートリポジトリとは、専用のサーバに配置して他の人と共有したりするのに使われます。

#### 4.gitの追跡対象にしてコミットする。

```
 git add .
 git commit -m '(何を変更したかメッセージを書く)'
```
`git add`でフォルダ内のファイルを追跡対象にして、コミット（処理確定）します。
最悪、メッセージはなんでもいいです。
'a'だけでもいいし、’First　commit'とかでもいいです。
でも、将来の自分のためにも'何をしたコミットなのか'を記載しましょう。

#### 5. HerokuにアプリをPush！

```
 git push heroku master
```
エラー表示がなければデプロイ完了です。
Herokuサイトにログインし、作成したアプリを選択。
`Open app`を選択し、表示されることを確認しましょう。



# 最後に
学習した内容を実際にやってみると、エラーになる事がよくあります。
気持ちが萎えることもありますが、それでいいのです。
実際にやってみてエラーが出て、そのエラーを解消して初めて理解に至るのです。
技術本を読むのも、学習サイトを使うのも大事ですが、実際にやってみてエラーにブチ当たり、それを解消した時が一番気持ち良いのです。
エラーの後には、脳汁ドバドバの快楽が待ってます。

エラーに負けず、根気よくカタカタしましょう。

![スクリーンショット 2021-09-20 4.55.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2081956/2d9159be-1376-a9a2-050c-c339691ca9cd.png)