てちてちエンジニアのおっとーです。
この記事ではDjango×Pythonを使ったWEBアプリの作成を行っていきます。
全部を1つの投稿にまとめると長くなりすぎるので、
３部構成で紹介をしていきます。
これからDjangoを使ったWebアプリの作成を始める方は、
全行程を完了すると環境構築からウェブアプリ作成、本番移行までを行ったことになります。
今回はgithubとpython anywhereという無料で使える環境を用いて作成したウェブアプリを世に出していきます。
本番環境編の所要時間は約40分です。
全行程の所要時間は約100分です。
では、最後の本番環境編やっていきます。
アカウントの作成
GitHubの公式サイトからアカウントを作成していきます。
登録が完了したら、画面右上の「サインイン」からログインします。
リポジトリの作成
リポジトリとはコードやバージョンを管理するための貯蔵庫です。
GitHubではリポジトリを無料で使用でき、
- ソースコードの共有
- ウェブアプリ公開の際の本番環境への移管作業
- 共同開発
- ソースのレビュー
等様々なシーンで活用できます。
Start a Projectでリポジトリ作成をします。
表示された画面で設定を進めます。
リポジトリの名前をcatlist
公開レベルをプライベート
gitignoreというGitHubのリポジトリ上にアップロードしないファイルを指定するファイルの追加
を設定します。
ローカルからリモートリポジトリへプッシュ
django_projectをカレントディレクトリにします。
私の場合、
/Users/user/Desktop/django_app_env/django_project
にプロジェクトを作成したので以下のようになります。
cd C:¥user¥user¥Desktop¥django_app_env¥django_project
cd /Users/user/Desktop/django_app_env/django_projectGitの初期化を行います。
△△にはGitHubのユーザー名
〇〇にはGitHubに登録したemailアドレスを入力します
git config --global init.defaultBranch main
git init
git config --global user.name "△△"
git config --global user.email 〇〇@〇〇.comプロジェクト内の全ファイルのコミット準備をします。
git add .コミットします。
git commit -m "my first commit"リモートリポジトリを設定します。
〇〇は下図赤枠の部分からコピーしてきます。
git remote add origin 〇〇〇〇Gitにプッシュしていきます。
git push origin mainアクセストークンの作成
ターミナル上でリポジトリを管理する際にパスワードを求められることがありますが、
GitHubのパスワードは使用することはできません。
代わりにアクセストークンをパスワードとして使用します。
以下の手順でアクセストークンを取得してください。
手順①：画面右上のアイコンをクリックして、Settingsをクリックします。
手順②：サイドメニューからDeveloper settiingsをクリックします。
手順③：サイドメニューからPersonal access tokensをクリックします。
手順④：Generate new tokenをクリックします。
手順⑤：アクセストークンの権限等を設定します。
- 「Note」には用途をメモしておくと管理ができます。
- 「Expiration」は有効期限なので、好きな有効期限を設定してください。
- 「repo」にチェックを入れプライベートリポジトリへの全権限を付与します。
手順⑥：画面を一番下までスクロールして、「Generate token」ボタンを押下します。
手順⑦：アクセストークンをコピー
画像の赤枠部分をクリックしてアクセストークンをコピーして、
別の場所に貼り付けておいてください。
※このページを離れると確認できなくなります。
アクセストークンを紛失した場合
アクセストークは紛失しても、再度発行することができます。
今回は直前の手順で作成したアクセストークンを紛失したと仮定して紹介します。
手順①：紛失したアクセストークンを見つけて、クリックします。
手順②：画面右上あたりの「Regenerate token」ボタンを押下します。
手順③：新しく生成されたアクセストークンをコピーします。
※このページを離れると確認できなくなります。
手順④：画面を一番下までスクロールして、「Update token」ボタンを押下します。
Gitコマンド使用中にエラーが発生した場合
以下のコマンドを1行ずつ順番に実行してみてください。
git fetch
git merge origin/main
git merge --allow-unrelated-histories origin/mainPythonAnywhereでデプロイ
PythonAnywhereの公式サイトからアカウントを作成していきます。
Pricing & signupをクリックします。
「Create a Beginner account」をクリックします。
必要な情報を入力してアカウント作成を完了します。
Bashを開きます
仮想環境作成
〇〇に作成したい仮想環境名を入力して実行します。
mkvirtualenv 〇〇
djangoを仮想環境にインストールします
pip install django
git cloneでソースコードをリモートリポジトリから本番環境に移行します。
〇〇はGitHubのリモートリポジトリからコピーしてきたリンクを貼り付けます。
git clone 〇〇ユーザー名とパスワードを聞かれるので、
ユーザー名はGitHubのアカウント名
パスワードはアクセストークン
を入力します。
パスワードに使用するアクセストークンは「アクセストークンの作成」で紹介しています。
PythonAnywhere上でWeb appを登録していきます。
「Add a new web app」をクリックします。
「Next」をクリックします。
「Manual configuration (including virtualenvs)」をクリックします。
「Python 3.9」をクリックします。
「Next」をクリックします。
「WSGI configuration file:」のファイルパスをクリックします。
DJANGOの部分を編集します。
76行目〜89行目のコメントアウトを解除して、
〇〇にpythonanywhereのアカウント名
△△にGit Cloneしてきたフォルダ名
□□にDjangoプロジェクト名
を入力します。
path = '/home/〇〇/△△'
os.environ['DJANGO_SETTINGS_MODULE'] = '□□.settings'
仮想環境のフォルダパスを確認します。
手順どおりに作成していれば、以下のフォルダパスに仮想環境作成されています。
〇〇は命名した仮想環境名を入力します。
/home/techtechstep/.virtualenvs/〇〇仮想環境名を忘れた場合以下の遷移で確認できます。
「Files」⇛「.virtualenvs/」
仮想環境フォルダパスを設定します。
設定前は下図の様な状態になっています。
赤文字をクリックすると入力欄が表示されるので、先程確認した仮想環境フォルダパスを入力します。
入力すると下図のようになります。
プロジェクトのsettings.pyを編集します。
追加編集する内容は以下になります。
〇〇にはユーザー名を入力します。
ALLOWED_HOSTS = ['〇〇.pythonanywhere.com']
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
正しく設定されているか確認します。
Web apps画面から「Reload 〇〇.pythonanywhere.com」ボタンを押下します。
リロードが完了したらサイトのリンクをクリックします。
このようにローカルで作成した内容が表示されていれば成功です。
Webアプリの作成お疲れさまでした。
今回は流れと簡単な操作を紹介だったので、
セキュリティ面や細かい設定に関しては省きました。
今後の投稿でより細かい部分を紹介していこうと思います。
コメント