【Flask, pythonanywhere】10分でwebサイト公開（無料サーバー・広告なし・無料SSL）

## pythonanywhereとは
### 公式サイト
https://www.pythonanywhere.com

### 特徴（Beginnerプラン）

+ 無料サーバー
+ 広告なし
+ 無料SSL
+ 独自ドメイン不可
+ ストレージ容量は512MB

最新情報はこちら → [Plans and pricing: PythonAnywhere](https://www.pythonanywhere.com/pricing/)

## 手順
### アカウント作成【２分】
「Start running Python online in less than a minute!」をクリック
![スクリーンショット (161).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/867355c8-f953-88c8-0ff6-46471339bfd4.png)
***
「Create a Beginner account」をクリック
![スクリーンショット (163).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/e97ecfea-cef2-37ad-17db-33971fbb55ac.png)
***
ユーザーネームなどを設定（サイトのURLが `username.pythonanywhere.com`になることに注意）
![スクリーンショット (164).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/6a311295-4493-4c7b-db01-abf8e8cb248f.png)



### webサイト作成【２分】
右上の「Web」をクリック -->「Add a new web app」をクリック
![スクリーンショット (166).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/ee41fbad-e99c-74e0-3bf8-5d175fa39244.png)

***
「Next」をクリック
![スクリーンショット (167).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/d814a821-b2ea-250b-e9bb-3c0b3ce5414d.png)

***
「Flask」を選択
![スクリーンショット (168).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/90594d24-5c91-632b-c220-3fac82136c53.png)
***
「Python 3.9」を選択
![スクリーンショット (169).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/cc21c99d-368b-5bfe-3f79-3460c49fa109.png)
***
`home/username/mysite/flask_app.py`に新しくファイルが作成される
「Next」をクリック
![スクリーンショット (170).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/efd62922-27df-bf42-0b4e-810c2d94cc04.png)
***
完成
「Configuration for」の下にあるリンクをクリック
![スクリーンショット (171) - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/a605c7e4-a1f2-f1a7-5ceb-9e20b03164e0.png)
***
「Hello from Flask!」と表示される
![スクリーンショット (173).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/ddcef0df-fa0b-53d9-48dc-7bc885cc7a6a.png)

### カスタマイズ【５分】
```:ディレクトリ構成例（一部省略）
home/
 └─ username/
     └─ mysite/
         ├─ flask_app.py
         ├─ static/
         │   ├─ css/
         │   ├─ img/
         │   └─ js/
         └─ templates/
             └─ index.html
```
`flask_app.py`の修正と`index.html`の追加

```python:flask_app.py
# A very simple Flask Hello World app for you to get started with...

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html')
```

```html:index.html
<!DOCTYPE html>

<html lang="ja" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, user-scalable=no">
  <title>タイトル</title>
</head>

<body>
  <h1>サンプル</h1>
  <p>pythonanywhereで公開</p>
</body>

</html>
```

***
ファイルの作成が完了したら、右上の「Web」をクリック -->「Reload username.pythonanywhere.com」をクリック
![スクリーンショット (186).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/3a570578-252f-39f9-0c18-22065e2a1946.png)
***
以下のように表示される
このままでもよいが、ワンクリックで「保護されていない通信」という表示を消すことができる（SSL設定）
![スクリーンショット (179).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/5232edf9-b1ed-a332-5fd0-19469375a8af.png)

### SSL設定【１分】
右上の「Web」をクリック --> ページ下部の「Force HTTPS」を「Enabled」に切替
![スクリーンショット (180).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/dbf069a3-0b22-5c84-1086-b6c8a69ae7f6.png)

***
先程のような表示が消えて鍵マークがつく（SSL化）
![スクリーンショット (181).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/990f753c-287f-4905-4c3f-f3805b8fefea.png)

これで完成

:::note warn
注意
サイトが使用停止にならないように、３ヶ月以内ごとに「Run until 3 months from today」ボタンを押す
:::
![スクリーンショット (175).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/20b7d0a7-1161-fe03-e344-86299e2a51e5.png)

## アカウント数について
フォーラムで次のようなやり取りがあった。
> [How many accounts can i have using my email address?](https://www.pythonanywhere.com/forums/topic/773/#id_post_83586)
（自分のメールアドレスでいくつまでアカウントを作成できますか？）
> [We do not limit that. Feel free to create multiple accounts :)](https://www.pythonanywhere.com/forums/topic/773/#id_post_83598)
（制限はありません。自由に複数アカウントを作成してください :) ）

 つまり、アカウント数の制限はない！

## 参考
https://blog.codecamp.jp/programming-free-server-1