2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-11-26

#はじめに

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

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


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

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

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

④HerokuにアプリをPush!

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


#構築環境

  • MacOS
  • VScode
  • Flask

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

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

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

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

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

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

    ・requirements.txt
    ・Procfile
    ・runtime.txt

    この3つ。

    ###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
    

    みたいなもの。
    デプロイの際エラーが出た場合、まずこれを確認しましょう。
    ここでエラーが出やすいです。


    「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でサポートされているバージョンじゃないとエラーになるので、こちらで事前に確認しておきましょう。

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

    #④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

    続いて、Settings内のBulidpacks欄で使用言語を指定します。
    スクリーンショット 2021-11-27 2.24.23.png

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

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

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

     git init
    

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

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

     heroku git:remote -a アプリ名(createで作った)
    

    Gitはリモートリポジトリとローカルリポジトリの2種類があります。
    リモートリポジトリとは、専用のサーバに配置して他の人と共有したりするのに使われます。

    ####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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?