【Django入門】DjangoアプリをWeb開発環境で開発、公開するまでの手順-ステップ2(GitHub、Git、Heroku)

この記事は約8分で読めます。

PaizaCloudからGitHubとGitを使いHerokuへデプロイする方法です。
GitとGitHubに関してはPaizaCloudからHerokuへデプロイするために
コードの移動手段として利用しますので、それぞれの詳しい解説はありません。
でもGit使ったことない方は使うきっけにいい教材になると思います。
手順のみご紹介します。
パソコンはWindows10を使用しています。

完成品

前回、静的ファイルの扱い方まで紹介しました。
これからはHerokuへデプロイする手順について紹介します。
前回の記事はこちらになります。

settings.py変更

ALLOWED_HOSTS = []に許可するサーバー設定

前回の続きでPaizaCloudによる作業になります。
settings.pyの ALLOWED_HOSTS = [‘*’]では許可するホストがどこでもよくなってしまいます。
PaizaCloudとHerokuだけ許可するようにしたほうがいいと思います。
送り出すほうを制限しなければいけない意味が個人的にはイメージできてません。
制限することによる害はないのでやってます。

ALLOWED_HOSTS = ['localhost-人によって違うところ.paiza-user-free.cloud', '.herokuapp.com']

DEBUG = False

settings.pyの DEBUG = Trueだとデバック用なのでエラー出たときに
いろんな情報が出力されます。
本番設定のDEBUG = Falseにかえましょう。
DEBUG = Trueでエラー発生時画面

DEBUG = Falseにするとエラーコードだけになります。

Herokuへデプロイするために必要なファイルを追加

2つファイルを追加します。
目次へ

requirements.txt

hajimete_pjを右クリックして新規ファイル作成でrequirements.txt作成
中身は以下

django
gunicorn
whitenoise

Procfile

hajimete_pjを右クリックして新規ファイル作成でProcfileを作成
中身は以下

web: gunicorn hajimete_pj.wsgi

コードの意味
web: gunicorn ***.wsgi
web:でwebプロセスタイプとして宣言
gunicorn ***.wsgiが実行するコマンド
***には自分のwsgi.pyのあるディレクトリ名を入れる。

Herokuのしくみ(勉強中なので間違っているかも)

デプロイするとDynoというコンテナ(仮想環境)が作られる。
中身はhajimete_pjとrequirements.txに書かれているライブラリ。

Heroku アプリには、起動時にアプリで実行するコマンドを指定する Procfile​ があります。

web プロセスタイプ
Heroku アプリの web​ プロセスは特殊です。Heroku のルーターから外部 HTTP トラフィックを受信できるのは、このプロセスタイプのみです。アプリに Web サーバーが含まれている場合は、その Web サーバーをアプリの web​ プロセスとして宣言する必要があります。

https://devcenter.heroku.com/ja/articles/procfile

ということなのでOpen AppでProcfileが実行されて起動されます。

またDynoの数=サーバー数ではなく
Dynoの数=サーバーの能力かなと思ってます。

参考WEBサーバーの仕組み入門|ApacheやNginxなどWEBサーバーの基本を初心者向けに解説
DjangoにおけるNginxとgunicornの役割(Nginxその1)

PaizaCloudはDOCKERみたいです。エラーが出たときDOCKERなんちゃらって出ます。
目次へ

PaizaCloudからHerokuへデプロイする手順

データベースがある場合はこちらの記事を参考にしてください。

Herokuへデプロイするには
PaizaCloud→GitHub→Git→Heroku CLI→Heroku
というようにコードを移動させる必要があります。
順番に説明します。

PaizaCloud→GitHub

まずGitHubに登録してください。
GitHubのAccess token認証方法とは?Password認証の廃止を参考に
アクセストークンを作ってください。(トークンを作るところまででいいです。)
Noteは何でもよくて自分でわかることを適当に書いてください。
Expirationは設定した期間を過ぎると、またアクセストークンを作る必要があります。
Select scopesはrepoにチェック
Access token(例ghp_123456789WrZS3Qojn2)は再表示できないので
必ずどこかへ記録しておいてください。
分からなくなっても大丈夫です。
Personal access tokensでdeleteして
Generate new tokenすれば同じようにまた作れます。

GitHubの右上の+をクリック→New repository
Repository nameにhajimete_rep
(適当な名前)を入れます。
あとはpublicかprivateをチェックして、どちらでもいい。
Create repository

PaizaCloudのターミナルで

git config --global user.name "ユーザー名"
git config --global user.email "メールアドレス"
git init

GitHubで

メモ帳などに貼り付けて
git remote add originhttps://アクセストークン@github.com/ユーザー名/hajimete_rep.git
というコードを作ります。
例えば
git remote add origin https://ghp_6lBpcV123456789abcdefgQojn2@github.com/miyamiko/hajimete_rep.git

注意 git remote add origin https://ghp_~は2行見えるけど1行です。
PaizaCloudのターミナルで

git remote add origin https://アクセストークン@github.com/ユーザー名/hajimete_rep.git
git status
git add .
git commit -m "変更理由などの適当なコメント"
git push origin master

注意 git add .はgit add半角スペース.にしないとうまくいきません。

途中で以下のように出た場合
Username for 'https://github.com': ユーザー名
Password for 'https://miyamiko@github.com':アクセストークン(右クリックで貼り付けても何も反応ないけどEnterを押すと入力されている)

また保存先を変更したい場合はgit remote add origin ~と同じように
git remote set-url origin ~で変更できる。

これでGitHubにコードがコピーされました。
GitHub左上のhajimete_repをクリックするとコードがあることが分かります。
目次へ

GitHub→Git→Heroku

Gitをインストールしてください。
【Windows】Gitの環境構築をしよう!が分かりやすいです。
これの2. Gitの初期設定までやってください。
Heroku CLIをインストールしてください。Windowsは特に設定することはなかった。

GitをインストールするとGit CMDというアプリが入っています。
左下のWindowsマークをクリックしてアプリ一覧の中から起動してください。
Git CMDで

git init
git remote add origin https://アクセストークン@github.com/ユーザー名/hajimete_rep.git
git clone https://アクセストークン@github.com/ユーザー名/hajimete_rep.git
これでパソコンにhajimete_pjのディレクトリができています。
heroku login
何かキーを押すとログイン画面が立ち上がるのでログインしてください。
表示しただけではダメで、ちゃんとLogged inと表示するところまでやってください。
ログインしないと先に進めません。

Herokuで
右上のNew→Create New Appでアプリ名を入力します。
例 miyamiko-django-hajimete-app 
アンダースコア_は使えません。
Create appをクリック
Deployment methodでHeroku Git Use Heroku CLIを選択

デフォルトで選択されてる。

Git CMDで

cd クローンしたディレクトリ(cd hajimete_rep)
heroku git:remote -a アプリ名(HerokuでCreate New Appしたもの)
例 heroku git:remote -a miyamiko-django-hajimete-app1
heroku config:set DISABLE_COLLECTSTATIC=1  
git push heroku master

Herokuで右上のOpen Appで起動します。

heroku config:set DISABLE_COLLECTSTATIC=1 についてはやらないとエラーになります。
ビルド中の collectstaticを参照してください。
目次へ

コード修正方法

PaizaCloudで修正するのが基本です。
修正した場合はgit status→git add .のところからやり直しになります。
もうPaizaCloudは使わないのであればGitHubで編集するファイルを選んで
右の方にある鉛筆マーク(edit this file)をクリックすれば編集できます。
この場合編集したらCommit changesにコメントを書いて
commit changesをクリックすれば登録されます。

Djangoのプログラミング部分についての記事は、こちらになります。

MENTAやってます(ichige)
イチゲをOFUSEで応援する

コメント

タイトルとURLをコピーしました