概要
Djangoで作ったWebアプリをPythonAnywhereで公開したので、操作手順をまとめてみました。
私自身、初めてWebアプリを作る初心者なので、色々とおかしい部分はあるかもしれませんが……
初めてWebアプリを製作している方、PythonAnywhereの使い方がよくわからない方など、私と同じ初心者の方の参考になれば幸いです。
目次
- 作ったWebアプリ
- Step1.PythonAnywhereに登録
- Step2.PythonAnywhereで新しいアプリを作成する
- Step3.プロジェクトフォルダをアップロードする
- Step4.仮想環境の作成
- Step5.requirements.txtの作成
- Step6.WSGIファイルの設定
- Step7.settings.pyの修正
- Step8.静的ファイルの収集
- Step9.Webタブで静的ファイルを設定
- Step10.アクセス確認
- まとめ
作ったWebアプリ
詳しい制作手順はここには書きませんが、簡単なブログサイトを作りました。
Djangoで作っただけだと、毎回コマンドプロンプトからDjangoサーバを起動しなければサイトにアクセスすることが出来ず、外部に公開されていない状態です。
そこで、Python専用のホスティングサービスであるPythonAnywhereを利用することにしました。
PythonAnywhereは、制限はあるものの無料でもDjangoで作ったWebアプリを公開することが出来ます。
以下で、PythonAnywhereを使ってWebアプリを外部に公開する具体的な手順を紹介します。
Step1.PythonAnywhereに登録
PythonAnywhereへの登録が済んでいない場合は登録しましょう。
登録は( https://www.pythonanywhere.com/registration/register/beginner/ )こちらからできます。
画面の案内に沿ってユーザーネーム、メールアドレス、パスワードなどを入力していくと、登録自体はすぐに完了するかと思います。
Step2.PythonAnywhereで新しいアプリを作成する
PythonAnywhereの画面右上にあるWebタブをクリックして開き、Add a new web app をクリックします。
フレームワークを選択する画面で、必ずManual configurationを選択するようにしましょう。
Pythonのバージョンを選択する画面が表示されたら、ローカルで使っているPythonのバージョンを選択します。
Windowsの場合、コマンドプロンプトで以下のコマンドを実行するとPythonのバージョンを確認できます。
python --version
Webタブの中に「Code:」と書かれているところがあると思います。
「Source code:」の右横にDjangoプロジェクトのフォルダのディレクトリを入力します。
同様に、「Working directory:」にもDjangoプロジェクトのフォルダのディレクトリを入力します。
Step3.プロジェクトフォルダをアップロードする
PythonAnywhereにプロジェクトフォルダをアップロードするには、GitHubのリンクをコピーするのが簡単かつ安全だと思われるので、ローカル上のWebアプリをGitHubに連携していない場合は先に連携しましょう。
ローカル上のWebアプリをGitHubに連携する手順は以下のサイトにまとめていますので、よければご参考ください。
GitHubへの連携が完了したら、PythonAnywhereでConsolesタブを開きます。
「Bash」をクリックします。
以下のコマンドを実行し、PythonAnywhereにGitHubのリンクを持ってきます。
cd ~
git clone https://github.com/username/my_project.git
「https://github.com/username/my_project.git」の部分は自分のGitHubのリンクに替えてください。
Filesタブを開き、Webアプリのプロジェクトフォルダがあるか確認します。
Step4.仮想環境の作成
再びConsolesタブからBashを開きます。
まずは以下のコマンドで、プロジェクトフォルダに移動します。
cd ~/my_project
「my_project」の部分は自分のプロジェクトの名前に変えてください。
仮想環境を作成します。
python3 -m venv venv
source venv/bin/activate
「python3 -m venv venv」で仮想環境を作成し、「source venv/bin/activate」で仮想環境を有効化しています。
仮想環境を作成・有効化したら、Webタブに戻り「Virtualenv」欄に 「/home/username/my_project/venv」を入力します。
必要に応じて、Bashで以下のコマンドを実行し、再度仮想環境を有効化します。
source venv/bin/activate
続いて、以下のコマンドを実行し、依存パッケージ(ここではrequirements.txt)をインストールします。
requirements.txtは、プロジェクトで必要なライブラリとそのバージョンを列挙したテキストファイルです。
pip install -r requirements.txt
もし以下のようなエラーが表示された場合は、requirements.txtが作成されていない可能性があります。
ERROR: Could not open requirements file: [Errno 2] No such file or directory: 'requirements.txt'
その場合は、Step5の手順でrequirements.txtを作成しましょう。
問題なく依存パッケージのインストールができた場合はStep5は読み飛ばしてください。
Step5.requirements.txtの作成
ローカルでコマンドプロンプトを開き、必ず仮想環境が有効化されている状態で以下のコマンドを実行します。
pip freeze > requirements.txt
そうすると、そのコマンドを実行したカレントディレクトリに requirements.txt が作成されます。
PythonAnywhereで以下のコマンドを実行します。
pip install -r requirements.txt
以下のように表示されたら成功です。
Successfully installed Django-5.2.3 sqlparse-0.5.3 tzdata-2025.2
Step6.WSGIファイルの設定
Webタブを開き、WSGI configuration fileのリンクをクリックして開きます。
WSGIファイルを以下の内容を記述します。
import os
import sys
# プロジェクトディレクトリを sys.path に追加
path = '/home/namiiii/my_blog_project'
if path not in sys.path:
sys.path.append(path)
# Django の設定モジュールを指定
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'my_blog.settings')
# Django アプリをロード
from django.core.wsgi import get_wsgi_application
application = get_wsgi_application()
この時、デフォルトのHello, WorldコードがWSGIファイルの中に残っている(もしくは上記のコードよりも下部分に記載されている)と、Pythonは下にあるコードを優先する為、ブラウザでサイトにアクセスしようとした際に「Hello,World！」が表示されてしまい、Webアプリが表示されません。
WSGIファイルを編集した後、必ずSaveボタンをクリックします。
その後WebタブのReloadボタンをクリックしましょう。
これで編集内容が反映されます。
Step7.settings.pyの修正
Filesタブからsettings.pyを開きます。
まず、以下のコードを追加します。
import os
これは、OSに依存する機能を利用するためのモジュールをインポートする為のものです。
「DEBUG = True」と記載されている部分を以下のように書き換えます。
DEBUG = False
開発作業中は DEBUG = True ですが、本番環境ではセキュリティ上 必ず False にします。
「ALLOWED_HOSTS = []」の「[]」の中に、以下のように記述します。
ALLOWED_HOSTS = ['User.pythonanywhere.com']
「User」の部分は書き換えてください。
settings.pyの下部分(「STATIC_URL = '/static/'」の下)に以下のコードを追加します。
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_ROOTはcollectstaticでまとめた静的ファイルを配置するディレクトリを指定するために追加する。
collectstaticはDjangoの管理コマンドで、アプリやフレームワークが持つ 静的ファイル（CSS、JavaScript、画像など）を1か所に集めるためのものです。
編集後はSaveし、WebタブからReloadしましょう。
Step.8 静的ファイルの収集
Bashで仮想環境を有効化した状態で、以下のコマンドを実行します。
cd ~/my_project
source venv/bin/activate
python manage.py collectstatic --noinput
Step.9 Webタブで静的ファイルを設定
Webタブを開きます。
「Static files:」と書かれている所の下にある「URL」と「Directory」を以下のように書き換えます。
URL：/static/
Directory：/home/User/my_project/static #例
Step10. アクセス確認
ブラウザでWebアプリのリンクにアクセスしてみましょう。
https://User.pythonanywhere.com/
「User」の部分は書き換えてください。
問題なくWebアプリの画面が表示されたら成功です！
まとめ
WSGIファイルのデフォルトのHello, Worldコードのコードを消していなかったことが原因で、何度やってもブラウザからアクセスした際に「Hello,World!」が表示されるというアホな見落としをしていました……
ここからブログサイトの見栄えを整えていこうと思うので、時間があれば手順をまとめてQiitaに投稿しようと思います。