Zenn
🐍

辰年だし、Python3+Django+WSL環境構築する

2024/01/01に公開
django
Git
GitHub
Python
venv
tech

初投稿です。しゃけほっけです。
あけましておめでとうございます。

開発用のPCを新調したり、新たにPythonの学習環境を整えたかったり、様々な理由で新品の真っ新な状態から環境構築する場合のToDoについて、結構情報が散っていたので新しくThinkPadを購入する前に記事にまとめることにしました。

この記事のゴール

  • Windows上にGitがインストールされている
  • Windows上にPythonがインストールされている
  • WIndows上でVSCodeとGitHubが連携できている
  • WSLが利用可能な状態になっている
  • WSL上にPython3がインストールされている
  • WSL上にvenvで仮想の開発基盤を構築できている
  • venv上にDjangoがインストールされている
  • どこから読んでもOK、必要なとこ以外読み飛ばしOK

ターゲット

・Pythonは初学者だけど、他の言語でのプログラミングはしたことがある人
・あまり初心者向けすぎる説明だとまどろっこしい人
・けど、ある程度丁寧に順序立てたToDoが読みたい人

前提条件(これだけは欲しい)

・Windows10 もしくは Windows11 (MacOSの人は適宜置き換えで)
・Youtubeとか視聴できるくらいの普通スペックのPC
・インターネット接続環境

環境構築する

下記より、環境構築のメモを記載します。
(必要なところ以外読み飛ばしOKで、開発初心者の方は上から順に読むとよいです)

VSCodeとGitHubが連携できている状態を作る

まずはPythonをコーディングしやすくする環境を整えます。

【VSCodeをインストールする】

今から、最終的にVSCodeとGitHubと呼ばれるサービスを連携する設定をします。その為に、まずはWindows上だけでPythonを書くことが出来る環境を構築します。

VSCodeのインストールをする為に、以下にアクセスします。
その後「Windows」を選択してください。Windows向けのインストーラーがダウンロードされると思うので、それを実行してください。
https://code.visualstudio.com/download

【GitHubのアカウント登録をする】

まずは、以下にアクセスします。
https://github.com/

上記のSign up for GitHubからGitHubアカウントを作成することが出来るので、画面の手順に従ってアカウントを作成してください。ここではフリープランでの登録で差し支えありません。

アカウントを作成し終えたら、試しにひとつリモートリポジトリを作成します。画面右上にある「＋」から「New repository」を選択してください。
公開範囲を「Private」に設定し、リポジトリ名はテスト用だと分かりやすい名前(test_github等)を付けてリモートリポジトリを作成します。

【Gitのインストールを行う】

お好みで実施

動作検証の為に使いたいので、まずは以下からWindows用に準備をしていきます(後述のLinux環境セットアップ時とは別)。
https://gitforwindows.org/

上記からダウンロードしたファイルを実行することで、インストール画面が表示されます。
手順に沿ってオプション選択を進めます。※基本的に全部デフォルト設定でOK
最後に「Install」ボタンを押下するとインストールが開始されるので、終わったら「Finish」ボタンを押して終了してください。

インストールが正常に完了すると、WindowsにGit Bashというアプリケーションが新規でインストールされているので、起動してください。

【Gitの初期設定を行う】

お好みで実施

Git Bashを起動したら、Gitの初期設定を行っていきます。
ここからはコマンドでの操作です。

git config --global user.name "好きなユーザ名"

git config --global user.email "あなたの開発用メールアドレス"

まずは上記のコマンドでメールアドレスとユーザ名を登録していきます。
コマンド操作に慣れない人は、コピペして使用してください。

git config user.name
git config user.email

メールアドレスとユーザ名の登録が終わったら、上記で正常に登録されたかどうかを確認することが出来ます。正常にメールアドレスとユーザ名が表示されればOKです。

【GitとGitHubを接続する】

お好みで実施

次にGitとGitHubを連携する設定を行います。
引き続きGit Bashでの操作を継続してください。

ls -a ~/.ssh

まずは、先に既にSSHの秘密鍵と公開鍵が存在しないかどうかをチェックします。
上記のlsコマンドの結果で何もファイルが表示されなければ、鍵の作成手順に移ります。この記事では、初めて作成することを想定するので該当するSSHキーが存在しない方が正しいです。

ssh-keygen -t ed25519 -C "GitHubでアカウント登録に使用したメールアドレス"

上記ssh-keygenコマンドでGitがGitHubにする為のSSHキーペア(秘密鍵と公開鍵)を作成します。tオプションは暗号化方式を定める為のものですが、Ed25519を選択するのがセキュリティ上ベターなので弄る必要はないです。メールアドレスはGitHubのサインアップに使用したものを指定してください。

実行結果から Enter a file in which to save the key: というプロンプトが表示されたらそのままEnterを押下します(鍵の保存場所を示されているもの。ここではデフォルトでOKのため)。
Enter Passphrase (empty for no passphrase): というプロンプトが表示されたら、GitがGitHubにSSH接続するためのパスフレーズを入力してEnterを押下します。
続けて Enter same passphrase again: と表示されるので、確認用にもう一度同じパスフレーズを入力します。

コマンド実行が終わった後にもう一度 ls ~/.ssh を実行すると、ホームディレクトリに秘密鍵と公開鍵が作成されている筈です。.pub拡張子の方が公開鍵です。

SSHキーペアを作成し終えたので、次にGitHubに公開鍵を登録します。この作業が使っているPCのGitからGitHubに接続する為に必要な作業となります。どちらも鍵ファイルですが、イメージ的には 公開鍵(.pub)がカギ穴で、秘密鍵が鍵本体 だと思うと分かりやすいです。GitHubに「カギ穴」を登録することで、いつでもGitHubにアクセスできるようにする作業を行います。

clip < ~/.ssh/id_ed25519.pub

まずは上記コマンドを実行し、公開鍵の中身をクリップボードに貼り付けます。デフォルトでは id_ed25519.pub というファイル名になる筈ですが、異なる場合は置き換えてください。

次にブラウザへ戻り、以下へアクセスし New SSH Key を押下します。
https://github.com/settings/keys

Titleには分かりやすい接続名を付けてください。
Keyには先ほどクリップボードにコピーした公開鍵の中身をそのまま貼り付けてください。

入力を終えたら Add SSH Key のボタンを押下します。
GitHub側の設定はこれで完了です。

ssh -T git@github.com

GitからGitHubにアクセスできるかをテストします。Git Bashへの操作に戻り上記のコマンドを実行します。パスフレーズを求められるので、 SSHキーペアを作成した時のパスフレーズ を入力してください。「successfully authenticated」的なメッセージが出たら多分成功してると思います。

ここまで出来たら完了なのですが、折角なので動作確認も実施します。GitHubに最初に作成しておいたテスト用のリモートリポジトリにPushしてみたいと思います。

mkdir test_gitrepos
cd test_gitrepos
git init

Git Bashにてテスト用のディレクトリ「test_gitrepos」を作成します。
テスト用ディレクトリ内に移動してから、 git initでGit管理開始します。


git initが終わったら、今度はブラウザに戻りGitHubで作成したリモートリポジトリ画面を開きます。上記のように「SSH」を選択したら、 git@github.com から始まる1行をコピーします。

git remote add origin {GITHUBSSH}

コピー出来たら再度Git Bashに戻り、上記の{GITHUBSSH}の部分をコピーした1行に置き換えて実行します(Push先のリモートリポジトリを指定)。

git remote -v

上記コマンド実行で、Push先リモートリポジトリの指定を確認します。

touch test.html
git add .
git commit -m "hello world"
git push origin main

Push先のリモートリポジトリ指定が終わったので、テストファイルを実際にPushします。touchでテストファイルを生成し、変更点をaddとcommitしpushします(環境によってはブランチがmainではなくmasterのこともあります)。
再びGitHubにアクセスしtouchしたtest.htmlが作成されていればpush完了です。

【WindowsにPythonをインストールする】

お好みで実施

WindowsでPythonを扱えるようにするためには、Pythonをインストールする必要があります。以下のダウンロードリンクよりPythonをダウンロードしてください。
https://www.python.org/downloads/

ダウンロードパッケージを実行するとインストールが開始します。最初のダイアログ表示での中事項で、必ず Add Python 3.x to PATH (もしかしたらPythonバージョンによってちょっと文言違うかも)という「パスを通す？」というチェックボックスにチェックを入れてからインストールを開始するようにします。

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force

インストールが完了したらPowerShellを起動し上記のコマンドを実行します。Pythonのコマンド実行を許可する為のおまじないだと思ってください。

【VSCode日本語化】

お好みで実施

お好みですが、あまり使い慣れない人はやっておいた方がいいと思います。

メニューより View > Command Pallete... を選択
　↓
テキストボックスに「Configure Display Language」と入力し Configure Display Language を選択
　↓
次に Install Additional Languages を選択
　↓
左ペインから Japanese Language Pack for Visual Studio Code を選択しインストール
　↓
VSCode再起動

【VSCodeをPythonに対応させる】

GitとGitHubの連携が出来るようになったので、今度は VSCodeからGitHubに連携 できるような設定を行います。

まずVSCodeでPythonを扱えるように拡張機能を追加します。VSCodeは拡張機能が豊富で、かつ追加インストールが容易にできることが魅力のひとつです。

VSCodeのメニューより、 ファイル > ユーザ設定 > 拡張機能 と辿っていき、「ms-python」と検索のテキストボックスに入力します。
検索結果の一覧から Python をクリックし、 Python Extension for Visual Studio Code という拡張機能をインストールします。これでVSCodeがPython実行に対応しました。

【GitHubとVSCodeを連携させる】

お好みで実施

GitからGitHubに連携させたように、VSCodeからGitHubに連携出来たら楽そうです。
ここまでの手順で以下が実施されていればVSCodeとGitHubの連携が以下の手順でできます。

  • WindowsにGitがインストールされている
  • ローカルリポジトリでgit initされている
  • GitHubでリモートリポジトリが作成されている


ブラウザに戻りGitHubで作成したリモートリポジトリ画面を開きます。上記のように「HTTPS」を選択したら、 https://github.com/ から始まる1行をコピーします。

git remote add origin {GITHUBHTTPS}

そして次にVSCodeに戻り 表示 > ターミナル > 新しいターミナル をクリックします。
コマンドライン操作が出来る領域が表示されるので、上記の{GITHUBHTTPS}の部分をコピーした1行に置き換えて実行します(Push先のリモートリポジトリを指定)。
ここまで実施することで、VSCodeとGitHubのリモートリポジトリの紐づけが完了します。

【休憩】

・
・
・
ここまで出来たら、一回休憩します( ◜◡◝ )
・
・
・

WSLとvenvで仮想のDjango開発基盤を構築する

次に、開発環境の構築を行います。
今回はWSL上での実行とし、環境を複数構築することを考えvenvを用います。

【UbuntuのインストールとWSL有効化を実行する】

上述の手順によりWindows上でのPython開発環境を構築しましたが、従前の流れはあくまでも動作確認をしながら進める為のものになります。その為、ここから先の構築作業が実際の開発基盤に近いものになります。
実際に開発を行う場合Pythonのプログラムを動かす本番環境に近い方が望ましいため、WindowsではなくLinuxないしUnixを用いる方がベターだと思います。

Amazon EC2やコンテナを用いるでも良いのですが、今回は新調したWIndowsPC単体ですぐに開発を進めたいというテーマがあるので、WSLを用いて かつ Ubuntu を使用した開発環境を作っていきたいと思います。


まずWindowsのタスクバーから「store」と入力し Microsoft Store を起動します。
起動したら上記の画像を参考に、更に検索ボックスより「ubuntu」と入力し 一番最新バージョンのLTSをインストールします。

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all
/norestart

次にPowerShellを起動し、上記のコマンドを入力します。
これでWSLをWindowsで有効化することができました。

WSLを有効化したら、WIndowsのタスクバーから「ubuntu」と検索すると、その他のアプリケーションと同じようにインストールしたUbuntuが見つかると思うので、実行します。

初回実行時はUbuntuのユーザ名とパスワードの初期設定を求められますので、任意のユーザ名とパスワードを設定してください。これでWindows上でUbuntuを実行することが出来るようになりました。

【VSCodeからUbuntu(WSL)にリモートアクセスする】

UbuntuにGitを入れることで、最初にWindowsで動作検証した時同様Git(Ubuntu)とGitHubを連携させることができます。しかし現状のままだとUbuntuのウィンドウとVSCodeのウィンドウを行き来する必要があり、若干煩わしいです。
そこで、VSCodeにWSLのコンソール操作が出来るようになる拡張機能を追加することでこれを解決したいと思います。

VSCodeを開いたら、 Ctrl+Shift+X で拡張機能の検索を表示させます。


マーケットプレイスの一覧から「remote WSL」と入力し検索します。


恐らく一番上の方に出てくる上記をインストールし、VSCodeを再起動してください。


VSCodeを再起動すると、上記のスクリーンショットのように画面の最左下にいかにもリモート接続できそうなアイコンが表示されるので、これをクリックします。


ディストリビューションを使用してWSLに接続 を選択し、更にUbuntuを選択するとWSLへの接続が開始されます。接続が完了すると、下ペインの「ターミナル」がUbuntuと同期します。 これでVSCodeとWSLの接続は完了です。

【venvを導入して仮想環境を構築する】

いよいよvenvを用いた仮想環境構築を行います。

sudo apt update
sudo apt upgrade
sudo apt install python3-venv python3-pip

まずは事前準備として、上記を実行しておきます。

sudo mkdir ~/{仮想環境の親ディレクトリ}
sudo mkdir ~/{仮想環境の親ディレクトリ}/{仮想環境名ディレクトリ}

次に上記に倣って、ホームディレクトリの下に必要なディレクトリを作成していきます。
仮想環境は複数作ることが出来る為、仮想環境の親ディレクトリと仮想環境名ディレクトリを２つ作ります。

sudo mkdir ~/works
sudo mkdir ~/works/v01_django

上記は実行例です。
works が複数の仮想環境をまとめる親ディレクトリで、 v01_django が単一の仮想環境を導入する個別のディレクトリです。例えば別のPython2仮想環境を構築したい場合はworksディレクトリの直下にv02_PY2のようなディレクトリを作ることを想定して命名しています。

cd ~/works/v01_django

mkdirで必要なディレクトリを作成したら、カレントディレクトリを移動します。

python3 -m venv .venv

仮想環境を構築したいディレクトリ内で、上記コマンドを実行することで仮想環境が構築されます。

ls -a ~/works/v01_django

上記コマンドで .venv というディレクトリが生成されていれば成功です。

【venv環境にPythonとDjangoをインストールする】

それでは最後に、構築したvenv仮想環境へDJangoをインストールしていきます。

source .venv/bin/activate

venv仮想環境をアクティブ化する場合は、上記コマンドを実行します。
アクティブ化した仮想環境にDjangoを入れたいので、アクティブ化してください。

sudo apt-get install python

もし現時点でまだPythonが入っていない場合は、上記を実行してください。

sudo apt-get install python3-pip

もし現時点でまだpipが入っていない場合は、上記を実行してください。

pip install django

pipでdjangoをインストールします。

which django-admin

仮想環境にのみDjangoがインストールされていることを上記で確認します。仮想環境の中ではDjangoをインストールしたので、 django-admin というコマンドが存在し、パスが表示されます。

deactivate
which django-admin

次に、非アクティブ化した後に同じコマンドのパスを確認すると、djangoがインストールされていないのでコマンドのパスは表示されません。

【UbuntuにGitを入れGitHubと連携する】

UbuntuにGitをインストールしこちらもGitHubと連携します。

sudo apt-get install git
dpkg -l git

Gitを上記コマンドでインストールします。

git config --global user.name "好きなユーザ名"
git config --global user.email "あなたの開発用メールアドレス"
git config --global core.editor "code --wait"

Gitの初期設定値を入力します。

ssh-keygen -t ed25519 -C "GitHubでアカウント登録に使用したメールアドレス"
clip < ~/.ssh/id_ed25519.pub

次にWSL<->GitHub接続用のSSHキーペアを作成します。
公開鍵をクリップボードに貼り付けて、またGitHub側で接続設定を作成します。(環境によってはclipコマンドがプリインストールされていないかも知れないので、いい感じに対応してください)

ssh -T git@github.com

GitHub側に公開鍵を登録出来たら、接続確認します。

curl -o .gitignore https://raw.githubusercontent.com/github/gitignore/main/Global/VirtualEnv.gitignore

これ以降Windowsで動作確認の時に実施した手順と同様にGit管理を行うことが出来ますが、注意事項としてvenvのファイルまでGit管理されてしまうため、上記を実行の上 不要なファイルはGit管理から除外してください。

参考

https://packaging.python.org/ja/latest/guides/installing-using-pip-and-virtual-environments/
https://packaging.python.org/en/latest/guides/installing-using-linux-tools/
https://camp.trainocate.co.jp/magazine/venv-python/
https://prog-8.com/docs/git-env-win
https://www.kagoya.jp/howto/rentalserver/webtrend/vscode/
https://www.python.jp/python_vscode/windows/index.html
https://docs.djangoproject.com/ja/5.0/ref/django-admin/
https://zenn.dev/suyaa/articles/948ed137d1e46e
https://qiita.com/quzq/items/1096c638c0d86795be13
https://qiita.com/TooFuu/items/9524198fab5b2ebf46a3

Discussion