あどりぶろぐ=adli"B"log

表情認識を研究する海なし県民のブログ

heroku+GitHubでDjangoアプリのデプロイに挑戦した

Webアプリを作りたい!

 

自分の作った成果物を誰かに試してほしい!

 

こんな思いを抱きながら悶々と過ごしていましたが、研究で複数の生きたデータを集める必要があったので、良い機会だと思いWebアプリの作成に挑戦することにしました!

 

f:id:shubarie:20180615043500p:plain

 概要

以下の流れでWebアプリを作成および公開(デプロイ)しました。

  1. herokuとGitHubを連携
  2. Anacondaで作成したローカル仮想環境上で開発
  3. GitHubにpush

めっちゃ簡単!!

公開したWebアプリ(仮)はコチラです↓

https://django-in-heroku.herokuapp.com/sample_app/input

herokuとGitHubを連携

herokuとは、Webアプリを公開するためのプラットフォームを提供してくれるもので、Paas(Platform as a Service)とよばれています。

 

最近ではGitHubのリモートリポジトリと連携することで、特に何かを追加でインストールしたりすることなく、作成したWebアプリを公開できるようです。

 

特に難しい所もなく、herokuへのサインアップ、herokuアプリの作成、GitHubリモートリポジトリとの連携が完了しました。

f:id:shubarie:20180615034344p:plain

herokuとGitHubの連携

Anacondaで作成したローカル仮想環境上で開発

イチからDjango Projectを作成して、Procfileなどを作成することも試しましたが、コレが一番簡単でした。

github.com

Djangoのプロジェクトを作成し、必要ファイルをまとめてある凄いリポジトリです。

 

READMEを見れば導入方法が書いてありますが、今回はAnacondaの仮想環境下で使用するので、Pipfileの中を見て、手打ちで各種パッケージをインストールしました。

pip install django

pip install psycopg2-binary

pip install django-heroku

pip install gunicorn

もうちょっとスマートな方法もありそうですが。笑

 

試しに以下コマンドでローカルサーバ上でWebアプリを確認してみます。

python manage.py runserver

f:id:shubarie:20180615041921p:plain

local上で確認できたWebアプリ

おお!動いてますね、Django

URLはこんな感じ。

f:id:shubarie:20180615042029p:plain

ローカルのテストサーバで動いているので、こんな感じのURLになっています。

もちろん、他の端末からはこのURLにはアクセスできません。

 

と、いうことで、Djangoのテンプレートが用意できたので、あとは、Djangoドキュメンテーションとにらめっこしながら開発していけばよいわけです。

 

が、今回はテンプレートには何も手を加えずデプロイすることにします。

GitHubにプッシュ

先のリポジトリのREADMEでは、heroku CLIというアプリを用いてherokuに直接デプロイする方法が記載してあります。

 

今回はGitHubにPushすることで、herokuと連動して自動デプロイされるため、以下の部分を変更する必要がありました。

 

変更前:

Deployment to Heroku
$ git init
$ git add -A
$ git commit -m "Initial commit"

$ heroku create
$ git push heroku master

$ heroku run python manage.py migrate

変更後:

Deployment to GitHub
$ git init
$ git add -A
$ git commit -m "Initial commit"

$ git remote add origin https://github.com/[username]/[repository_name].git
$ git push origin master

これでなんと、デプロイが完了・・・!

簡単すぎる!

デプロイしたWebアプリを確認

 既にherokuとGitHubの連携がなされているので、herokuのアプリページに行き、右上のOpen Appボタンをクリックすると・・・

f:id:shubarie:20180615041101p:plain

heroku上で公開されたWebアプリ

おお!すごい・・・!

python manage.py runserver で確認したローカル上と同様の挙動です。しかし、URLを確認すると・・・

f:id:shubarie:20180615041250p:plain

しっかりheroku上で実装されていることが分かります。

 

もちろん、スマホ上からも確認できます。

何気に、スマホフレンドリーな表示になっている、Django凄い。笑

f:id:shubarie:20180615041534j:plain

AndroidからもアクセスできるWebアプリ



以上、「heroku+GitHubDjangoアプリのデプロイに挑戦した」でした。

 

次回はDjangoでの開発、Webアプリを作成していきます。

トラブルシューティング

工程でつまづいたところをまとめます。

herokuアプリが起動しない

herokuとGitHubを連携し、テンプレートをGitHubにpushし、HerokuのアプリページでOpen Appでアプリを起動すると、以下の画面が現れてしまいました。

f:id:shubarie:20180615044428p:plain

作成したWEBアプリが起動しない

おそらくGitHubリポジトリの変更が反映されていないのではないでしょうか。

 

リモートリポジトリへのPushなどで、GitHubリポジトリを更新したら、反映がなされたのか、無事herokuからのWebアプリ起動に成功しました。

 

簡単なことでしたが、解決するまで右往左往してしまいました。笑