【python, flask】賃金階級年齢階級別労働者割合のWEBアプリ part3
【python, flask】Web application for ratio of workers by wage class and age group part 3

YouTubeにアップした動画、「【python, flask】賃金階級年齢階級別労働者割合のWEBアプリ part3」の補足説明の記事です。

Here's a little more about the 「【python, flask】Web application for ratio of workers by wage class and age group part 3」 video I uploaded to YouTube.

前回の続きです。

This is the continuation of the last time.

HerokuというWEBアプリケーションが動かせる環境を提供してくれるサービスを利用して、

Using Heroku, a service that provides an environment in which you can run web applications,

前回までに作ったFlaskのアプリをアップロードして動かしてみましょう。

let's upload and run the Flask app we created previously.

まずは使っているOS用のHeroku CLIをダウンロードしてください。

First, download the Heroku CLI for your operating system.

Gitが必要になる場合があるので、こちらも必要ならダウンロードしてください。

If you need Git, download it.

ダウンロードしたHeroku CLIをセットアップしてPCにインストールしてください。

Set up and install the downloaded Heroku CLI on your PC.

インストールが完了したら、Herokuにログインして、アプリを作成してください。

Once the installation is complete, log in to Heroku and create your app.

WEBアプリのアップロードの手順が書いてありますので参考にしてください。

Please refer to the instructions for uploading web applications to Heroku.

コマンドプロンプトを立ち上げて、コマンドを使ってHerokuにログインしてみましょう。

Start up a command prompt and use the command to log in to Heroku.

(app_test) C:/User/user> heroku login

ブラウザが立ち上がるので、ログインしてください。

The browser will start up, so please log in.

ログイン後はブラウザは閉じても大丈夫です。

After logging in, you can close your browser.

Pythonを使ってHerokuでWebアプリを動かす場合は、

If you use Python to run web apps on Heroku,

GunicornというWSGIサーバーを使用するので、ローカルにもインストールしておいてください。

you will use a WSGI server called Gunicorn, so you should also install it locally.

(app_test) C:/User/user> pip install gunicorn

GunicornはWindowsでは使えませんが、Herokuでは必要になります。

Gunicorn doesn't work on Windows, but you'll need it on Heroku.

サーバーの立ち上げのコマンドが違うだけなので、ローカル環境でテストする際にも殆ど支障はありません。

The difference is the command to start the server, so there is almost no problem when testing in a local environment.

プロジェクト用ディレクトリの中に[Procfile]というファイルを作成して、

Create a file called [Procfile] in your project directory

HerokuにGunicornで起動する時のコマンドを伝えてあげます。

and tell Heroku what commands to start up with Gunicorn.

project folder\
    app_test\
    templates\
        app.html
        index.html
    app.py
->  Procfile

Procfile

web: gunicorn app:app --log-file=-

そして同じディレクトリ内で[pip freeze]を使用して、[requirements.txt]を作成し、

In the same directory, use [pip freeze] to create a [requirements.txt]

Herokuにどういったpythonモジュールをインストールすればいいのかを伝えてあげます。

and tell Heroku what python module to install.

(app_test) C:/User/user> pip freeze > requirements.txt

project folder\
    app_test\
    templates\
        app.html
        index.html
    app.py
    Procfile
->  requirements.txt

仮想環境用設定フォルダはアップロードする必要が無いので、[.gitignore]にフォルダ名を記載して、

The virtual environment configuration folder does not need to be uploaded,

このフォルダをアップロードしないようにします。

so enter the folder name in [.gitignore] and do not upload this folder.

project folder\
    app_test\
    templates\
        app.html
        index.html
    app.py
    Procfile
    requirements.txt
->  .gitignore

.gitignore

app_test/

CSVファイルをプロジェクト用ディレクトリ内にコピーします。

Copy the CSV file into the project directory.

project folder\
    app_test\
    templates\
        app.html
        index.html
    app.py
    Procfile
    requirements.txt
    .gitignore
->  csv_file.csv

degubをTrueにすることは本番環境では推奨されていないので、削除します。

It is not recommended to set degub to True in a production environment, so remove it.

app.py

if __name__ == '__main__':
    app.run()

後は先ほどの手順通りに、Gitを使ってプロジェクトをアップロードしてください。

You can then upload the project using Git as described above.

(app_test) C:/User/user> git init
(app_test) C:/User/user> heroku git:remote -a your_application_name
(app_test) C:/User/user> git add .
(app_test) C:/User/user> git commit -m "my first commit"
(app_test) C:/User/user> git push heroku master

gitプッシュが成功したら、登録したアプリ名を含むURLが表示されるので、

If the git push succeeds, the URL including the registered application name will be displayed,

そのURLにブラウザからアクセスします。

and you can access the URL from the browser.

後は挙動を確かめたり、動かして遊んでみましょう。

After that, let's check the behavior and play by moving it.

以上です。お疲れ様です。

That's all. Thank you for your hard work.