pythonanywhereに作ったアプリをデプロイしてみた

Flaskについて調べていたら、「herokuにデプロイして～」「簡単なデプロイ方法」というワードをよく見かけました。

**・・・デプロイとは何ぞや？？**

DevOpsの親戚的なものかな？とか、とんちんかんなことを考えていたのですが。
> deploy：配備する、配置する

だそうで。ざっくり言えば、使えるようにアップするぐらいのイメージかな？
というわけで、自分も作ったアプリを「デプロイ」してみました。自分がエラーで引っかかったところも合わせながら書いていきます。

##デプロイマンへの道のり
###アカウントの作成

[公式サイト](https://www.pythonanywhere.com/)にアクセスする。アクセスしたら、Start running~をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/cf349606-ef8f-f718-bb7a-f90ac7f779e5.png)


Beginnerプランを選んで、Create a Beginner account をクリック。
※他のプランは有償なので注意
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/12a7b228-a019-cb93-d2b4-a5c3c24b05c3.png)

項目に各情報を入力する。利用規約とプライバシーポリシー&クッキーポリシー(I agree to~)にチェックを入れたら、Register をクリック。

:::note warn
Usernameは半角英数字のみ(このアカウントのままアンダーバー入れようとしたらNGだった)
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/dee016b4-dff9-b0f7-97e1-05f5384f4e8f.png)

登録するとこの画面が出てくる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/3705e236-8f48-ba4a-f01a-a1aaade3ff9f.png)

###ファイルのアップロード

ファイルのアップロード方法には①Git経由、②アップロード経由 の2種類存在する。自分の場合は②を選択することにした(楽だから)
アップロードするファイルの構成は下記の通り。

```tatuya.zip
tatuya/
|__tatuya.py
|__templates/
      |__form.html #入力用
      |__test.html　#出力用
|__static/
      |__style.css #入力用デザイン
      |__style2.css #出力用デザイン
```

Files>Open another fileを選択。次の画面にUpload a file が現れるので、該当のzipファイルをアップロードする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/0b41906c-f72d-cb68-e567-9dc74ff5f262.png)

Consoles>$Bashでコンソール画面を開く。unzipでアップしたファイルを解凍しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/88ba3bd1-9d26-65be-0ce6-de07b6813d85.png)

```
unzip tatuya.zip
```

###デプロイ
コンソールを開き、仮想環境の設定とモジュールのインポートを行う。

```
#仮想環境の作成(todoがファイル名、Pythonバージョンは各自決める)
mkvirtualenv todo --python=python3.9
 
#利用するモジュールのインポート
pip install Flask
pip install jaconv
```

Web>Add a new web appをクリック。framework：manual configuration、version：Python3.9を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/7bca3717-7cf8-2604-8437-97e665880289.png)

新しく設定画面が立ち上がったよ。やったね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/0c34610d-b06e-d2bc-e88d-e23ee76245f7.png)

仮想環境のパスを通す。Virtualenv>Enter~をクリック。タブに指定したファイル名(ここではtodo)を入れてチェック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/162248a1-fe0b-6d52-5bdb-f2b0a026846a.png)

Code>WSGI Configuration file を選択。pyファイルを書き換える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/2bf9b255-0903-8ef8-3aab-355744ea9a42.png)

ファイルからFlaskの記述部分だけ残して、あとは削除する。中身を下記のように書き換える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/5ca51752-dd93-bc4c-41bb-d8c54f6272a8.png)

Code>Working directory を選択。パスをファイルが入っているところに書き換える。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/38464c2b-d71e-8cd5-5345-45a2bdd41861.png)

Static files でメインファイル以外のパスを通す(htmlやcssなど)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/e19071e3-4bc6-c4ab-3c8f-9237682ac6e3.png)

Reloadをクリックして設定を反映させる。その後URLから、ファイルの中身が反映されていることを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/b53d8184-cc7d-4e11-8f96-0955f73e42e1.png)

Security>Force HTTPS でEnabledに変更しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/3fc240aa-974f-072b-9a39-394b3fa10ba4.png)

###補足

Flaskの場合、ローカル環境下だとhost=○○で実行させていることがある(自分もそうだった)。ただpythonanywhere内ではエラーになるらしいので、app.run()に変更する必要あり。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1259951/40c6c2df-f752-364f-0fb0-8a014e742ddb.png)


###デプロイしたアプリ
ちゃんとクラウド上で使えそうです。

https://demkk.pythonanywhere.com/

元ネタはこれ。

https://qiita.com/dem_kk/items/b56542d492b4e2e4cd71


##まとめ
何とかデプロイマンになれた。

##参照
https://help.pythonanywhere.com/pages/Flask/
https://qiita.com/tonytani37/items/60c7185b7cc235f45daf
https://www.pythonanywhere.com/forums/topic/12440/