学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Django3.2 | クラウドソーシングアプリの構築 | 59 | Heroku デプロイ

↓↓クリックして頂けると励みになります。


58 | PWA】 << 【ホーム】 >> 【60 | Heroku Redis


作成したアプリケーションをherokuにデプロイします。


まずはアカウントを作成してください。
jp.heroku.com

新規登録
新規登録



必要な項目を入力してアカウント登録してください。

アカウント登録
アカウント登録



登録してログインすると、ログインの検証方法を聞かれます。
今回はSalesforceを選びました。

検証方法選択
検証方法選択



スマートフォンアプリで「Salesforce Authenticator 」をインストールし、アカウントを追加します。
アプリに表示された単語を入力して接続します。

接続
接続



アプリでアカウントの接続を行い、アカウントを追加してください。
ダッシュボードが表示されればログイン完了です。

ダッシュボード
ダッシュボード



利用規約を読んでAcceptします。

利用規約
利用規約



アプリケーションをデプロイするには、まず支払い方法を登録する必要があります。

支払い方法登録
支払い方法登録



お持ちのクレジットカードを登録してください。

クレジットカード登録
クレジットカード登録



プランを選択します。
まずはデプロイできるか試すため、5$のEcoで問題ないと思います。
30分アプリケーションが起動しないとスリープになってしまい、1ヶ月で1000時間稼働できるというプランです。
これは複数のアプリケーションをデプロイした場合、全アプリケーションの合計時間となります。

プラン登録
プラン登録



SubscribeをクリックしてEcoプランを登録します。

Ecoプラン登録
Ecoプラン登録



やめたい時はいつでもキャンセルできます。

キャンセル可能
キャンセル可能





「heroku CLI」をインストールします。
コマンド
brew tap heroku/brew && brew install heroku


xcodeのバージョンが古い場合、以下のようなエラーが出ます。

==> Installing heroku from heroku/brew
Error: Your Command Line Tools are too outdated.
Update them from Software Update in System Settings.

If that doesn't show you any updates, run:
  sudo rm -rf /Library/Developer/CommandLineTools
  sudo xcode-select --install

Alternatively, manually download them from:
  https://developer.apple.com/download/all/.
You should download the Command Line Tools for Xcode 14.3.



このエラーの通り、まずsudo rm -rf /Library/Developer/CommandLineToolsとコマンドを打ち、古いライブラリを削除します。
次にsudo xcode-select --installとタイプし、xcodeのインストールをやり直します。
そうすることでherokuCLIをインストールできるようになります。


バージョン確認します。
コマンド
xcode-select --version

~/Desktop/QRMenu/qrmenu_react $ xcode-select --version 
xcode-select version 2397.



herokuのバージョン確認します。
コマンド
heroku --version

herokuバージョン確認
herokuバージョン確認



DjangoなどのPythonアプリケーションをデプロイする際に使うGunicornをインストールします。


コマンド
pip install gunicorn==20.0.4


HerokuのConfigをDjangoの設定で読み込むためのパッケージ「django-on heroku」をインストールします。


コマンド
pip install django-on-heroku==1.1.2


バージョン確認するため、「requirements.txt」を作成します。


コマンド
pip3 freeze > requirements.txt


【Desktop/QRMenu/qrmenu_server/requirements.txt】

aioredis==1.3.1
asgiref==3.7.2
async-timeout==4.0.3
attrs==23.1.0
autobahn==23.6.2
Automat==22.10.0
beautifulsoup4==4.12.2
CacheControl==0.13.1
cachetools==5.3.1
certifi==2023.7.22
cffi==1.15.1
channels==3.0.3
channels-redis==3.2.0
chardet==3.0.4
charset-normalizer==3.2.0
constantly==15.1.0
cryptography==41.0.3
daphne==3.0.2
defusedxml==0.7.1
dj-database-url==2.1.0
Django==3.2.20
django-bootstrap4==2.3.1
django-on-heroku==1.1.2
firebase-admin==4.4.0
google-api-core==1.34.0
google-api-python-client==2.97.0
google-auth==2.22.0
google-auth-httplib2==0.1.0
google-cloud-core==2.3.3
google-cloud-firestore==2.11.1
google-cloud-storage==2.10.0
google-crc32c==1.5.0
google-resumable-media==2.5.0
googleapis-common-protos==1.60.0
grpcio==1.57.0
grpcio-status==1.48.2
gunicorn==20.0.4
hiredis==2.2.3
httplib2==0.22.0
hyperlink==21.0.0
idna==2.10
incremental==22.10.0
msgpack==1.0.5
oauthlib==3.2.2
paypalrestsdk==1.13.1
Pillow==10.0.0
proto-plus==1.22.3
protobuf==3.20.3
psycopg2-binary==2.9.7
pyasn1==0.5.0
pyasn1-modules==0.3.0
pycparser==2.21
PyJWT==2.8.0
pyOpenSSL==23.2.0
pyparsing==3.1.1
python3-openid==3.2.0
pytz==2023.3
requests==2.25.0
requests-oauthlib==1.3.1
rsa==4.9
service-identity==23.1.0
six==1.16.0
social-auth-app-django==4.0.0
social-auth-core==4.4.2
soupsieve==2.5
sqlparse==0.4.4
stripe==2.55.1
Twisted==23.8.0
txaio==23.1.1
typing_extensions==4.7.1
uritemplate==4.1.1
urllib3==1.26.16
whitenoise==6.5.0
zope.interface==6.0



ルートフォルダ「Desktop/crowdsource」に「Procfile」を新規作成します。
作成した「Procfile」ファイルを以下のように編集します。



新規作成 【Desktop/crowdsource/Procfile】

web: gunicorn crowdsource.wsgi



「crowdsource/settings.py」ファイルを編集します。


記述編集 【Desktop/crowdsource/crowdsource/settings.py】189行目(末尾)

# Activate Django Heroku
import django_on_heroku
django_on_heroku.settings(locals())



herokuにターミナルでログインします。
コマンド
heroku login

herokuログイン
herokuログイン



ブラウザが起動しますので、ログイン処理を行います。


なんでもいいからタイプしろと言われるのでエンターキーを押します。

herokuログイン
herokuログイン



ブラウザでログイン画面が起動しますので、herokuにログインして下さい。

ブラウザでherokuにログイン
ブラウザでherokuにログイン



ターミナルで「Logged in」と出ればログイン成功です。

ログイン成功
ログイン成功



herokuでアプリケーションを作成します。
コマンド
heroku create


herokuのダッシュボードを見ると、新しくアプリケーションが作成されているのがわかります。

アプリケーション作成確認
アプリケーション作成確認



アプリケーションのURLをコピーします。

URLをコピー
URLをコピー



「crowdsource/settings.py」ファイルを編集します。
コピーしたアプリケーションのURLを貼り付けます。


記述編集 【Desktop/crowdsource/crowdsource/settings.py】174行目

NOTIFICATION_URL = "https://tranquil-waters-28788-5d72def03878.herokuapp.com/"



Meta For Developersのダッシュボードに入ります。

Meta For Developersのダッシュボード
Meta For Developersのダッシュボード



アプリの設定の「ベーシック」で、「アプリドメイン」と「プライバシーポリシーのURL」にherokuのアプリURLを入力します。

ベーシック設定
ベーシック設定



ページ下部の「サイトURL」にもアプリURLを入力して変更を保存します。

herokuアプリURLを入力
herokuアプリURLを入力



製品のFaceBookログイン設定に移動します。

Facebookログイン設定
Facebookログイン設定



有効なOAuthリダイレクトURIにherokuアプリのURLをコピーします。

有効なOAuthリダイレクトURI
有効なOAuthリダイレクトURI



Firebase-Adminのシークレットキーをルートフォルダにコピーします。

Firebase-Adminのシークレットキーをルートフォルダにコピー
Firebase-Adminのシークレットキーをルートフォルダにコピー



「crowdsource/settings.py」ファイルを編集します。
アドレスだった部分をファイル名だけにします。


記述編集 【Desktop/crowdsource/crowdsource/settings.py】163行目

FIREBASE_ADMIN_CREDENTIAL = os.path.join(BASE_DIR, "clowdsource-f1701-firebase-adminsdk-azvhm-c5e62145e8.json")



マイグレーションファイルを作成します。
コマンド
python manage.py makemigrations


マイグレーションを適用します。
コマンド

GitHubにコミットします。

Githubにコミット
Githubにコミット



githubにコミットしたアプリケーションをherokuにpushします。
これには2種類の方法があります。


まずはherokuページからのpush方法です。
herokuのページにログインし、「Deploy」の「GitHub」をクリックします。

Deploy
Deploy



「ConnectTo GitHub」をクリックします。

Connect To GitHub
Connect To GitHub



「Authorize Heroku」をクリックします。

Authorize Heroku
Authorize Heroku



パスワードを入力し、レポジトリ名を入力後検索します。
レポジトリが出てきたらConnectをクリックします。

レポジトリ名を検索
レポジトリ名を検索



一番下の「Deploy branch」をクリックし、デプロイします。

Deploy a GitHub branch
Deploy a GitHub branch



成功メッセージが出ればOKです。

デプロイ成功
デプロイ成功



もう一つはコマンドでのpush方法です。
コマンド
git push heroku main

heroku CLI
heroku CLI



マイグレーションファイルをデータベースに適用します。
コマンド
heroku run python manage.py migrate


作成したherokuのデーターベースにスーパーユーザーを作成します。
コマンド
heroku run python manage.py createsuperuser


herokuのダッシュボードで右上の「Open App」をクリックするとデプロイしたアプリケーションが開きますので、動作を確認してください。

アプリケーションを開く
アプリケーションを開く


動作確認
動作確認



アドレスの最後に「admin/」を追加すると、管理画面が開きますので動作を確認してください。

動作確認
動作確認


↓↓クリックして頂けると励みになります。


58 | PWA】 << 【ホーム】 >> 【60 | Heroku Redis

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)