【Docker】Windows11でプログラミング環境構築(Python、Django、Vue)

※ 当サイトではアフィリエイト広告を利用しています。リンクは広告リンクも含みます。

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

パソコン買ったのでプログラミング環境を整えました。その様子です。Python、Django、Vueの環境を設定していきます。Docker導入でハマった点と解決策をご紹介します。

追記(2023/11):
最近、Docker DesktopがWindowsのPowerShellで使えるのが分かって、
それだと結構簡単にDocker使えます。
私は、ubuntu on Windowsを最初、使っていました。
そのときは行き詰った点と解決策に書きましたが大変でした。
Docker Desktopインストールしたらターミナル(PowerShell、Anaconda PowerShell)でdocker –versionと打ってヴァージョンが出るか確認してみてください。

Python単独で使う場合はJupiterNotebook(Lab)(Anaconda入れると入る)が、実行結果が見やすいし、ブロックごとに実行できるので便利だと思います。
ただ、ターミナル(PowerShell、Anaconda PowerShell)を使う場合は、Vsコードでコード編集してターミナルからPythonを実行することになります。Pythonになれたら、ターミナルでPythonを実行するのがメインになってきます。

最近はPowerShellとAnaconda PowerShellの違いはないように感じます。PowerShellでpythonとcondaが実行できないようだったら、Anaconda PowerShellを使えばいいです。

あとWindows11は1時間ぐらいで初期状態に戻せるので、初期状態に戻す前提で環境構築していくと安心です。つまりパソコンが初期状態に戻ってもいいようにパスワード関連の記録や重要なファイルをどこかに保存しておくということです。
私もウイルスに感染して(プログラミングとは関係ないサイト)パソコンを初期状態に戻したんですが、余計なファイルがなくなってストレージ容量は回復できるし、すっきりしました。
初心者の方はDockerで開発環境を作るのは、あまりおすすめしません。結構Docker自体の使い方ではまったので、本題のプログラムいじるところまでたどり着くのが大変でした。ただ余裕ができたら、いろいろ経験しておいたほうがいいと思うのでDockerもやった方がいいと思います。開発環境の手札が多いと開発環境が原因で、はまったときの対応手段ができます。

実行環境
Windows11 pro(2026年時点)

買ったパソコン

【価格.comの見方】7万円以下(モニター別売り含む)でWindows11パソコン買いました!
パソコン何買っていいか探すの大変です。私なりのパソコンの選び方と実際に購入したパソコンのレビューになります。低価格重視ですが、今まで使っていた低価格パソコンの限界がきたため、その辺のはなしも絡めてご紹介したいと思います。具体的には価格.co…

Pythonをまったく使ったことがない人は環境構築が必要ないGoogle Colaboratoryで少し勉強したほうがいいと思います。というのも環境構築が悪くてプログラムが動かないのか比較すれば判断できるからです。

Pythonのプログラムをコピペして実行する方法【プログラムしたことない人向け】
インストールなしでPythonが実行できるGoogle Colaboratoryを使えばコピペでPythonのプログラムが簡単に実行できます。右クリックで貼り付けられないときの対策もご紹介します。Web上で動くのでMacでも動きます。注意点…
  1. バイブコーディングについて
  2. VSCode
  3. Git
  4. Node.js
  5. Python、Django(Anaconda使用)
    1. 仮想環境
    2. AnacondaでDjangoアプリを作る
      1. Anacondaインストール
      2. AnacondaPowerShellを立ち上げる
      3. 仮想環境の作成と切り替え
      4. Djangoのインストール
    3. Djangoプロジェクトの作成と起動
      1. ブラウザで確認
      2. 💡 覚えておくと便利な操作
      3. 仮想環境から抜ける(解除)
      4. 仮想環境の一覧を表示する
      5. 仮想環境を削除する
      6. まとめ表
  6. Vue(AnacondaでNode.js使用)
    1. DjangoとVue連携(Anaconda)
  7. Docker
  8. Django(Dockerを使用)
    1. クイックスタートそのまま
    2. クイックスタート改良して必要最小限のファイルで実行する方法
    3. 実行手順
      1. コンテナのビルドと起動
      2. Djangoプロジェクトの作成(初回のみ)
      3. ymlにcommandを追加してup コマンドで起動する
    4. なぜ 0.0.0.0 が必要なのか?
      1. 「デフォルトでlocalhost」にならない理由
    5. バックグラウンドで起動した後の開発サイクル
      1. ソースコードを変更したとき
      2. 開発中によく使うコマンド
      3. ソースを変えて変更が反映されるか確認
      4. コンテナの中で操作する方法
      5. 開発を中断・終了するとき
      6. 開発の流れ(まとめ)
    6. You’re accessing the development server over HTTPS, but it only supports HTTP.
  9. Django 前に作ったプロジェクトをgit cloneする方法
  10. Vue(Dockerを使用)
    1. Vue.js3、Vue.js2+Vuetify2
    2. Vuetify3
  11. Django+Vue(Dockerを使用)
  12. 行き詰った点と解決策(ubuntu on WindowsでDocker使用時)
    1. メモリ不足対策
      1. exit code: 137
    2. VSCodeでファイルの変更ができない
    3. 止め方と再開の方法
    4. 削除方法
広告
MINISFORUM日本公式ストア

バイブコーディングについて

AIでのバイブコーディングは、無料のチャット(ChatGPT、Gemini、Claudeなど)で質問する程度にとどめています。Cursorの無料枠やGemini CLI、Google AI Studioなども活用していますが、今のところAIにお金をかける必要はないと感じています。AIに意図を正確に伝えるのは難しく、一気に任せるとかえって手間が増える気がします。 また、AIエージェントに丸投げする方法を模索するよりも、分からないことを質問して知識を深めつつ、その都度AIを活用していくほうがうまくいくように思います。個人的には、丸投げの方法(AIに指示を従わせる方法)は、結局その都度試行錯誤するしかなく、定量的なやり方は見つからないのではないかと思っています。それをAIにやらせるんだよと言われるかもしれませんが・・・ま、横目でClaudeの高級プラン使ってサクサク高機能のアプリができる動画とか見て、うむむむ、と思いつつ、変にかたくなになって時代に逆らわないようにはしようと思う。
AIによってわからないことを勉強するのは、格段に楽になった。しかし、今、勉強してる、これって今後、知っておく必要あるのっていう、さじ加減が難しい。これは、最新のAIツールの使い方についても同じことがいえるので、さらに困る。

Cursorで無料で使える高級モデルにピンポイントで質問して節約する!
AIエージェントが盛り上がっていますが、丸投げせず無料で効率的に使う方法を思いつき、実践してみました。ちなみに有料AIは使ったことがありません。Cursorの良いところは、フォルダ内の複数ファイルの関係性を把握でき、制限にすぐ達しても無料で…
Gemini CLI をWindowsで使ってみた!
本記事では、Windows 環境で Gemini CLI を使ってみた体験をベースに、インストール方法から実行例までを紹介していきます。Node.jsをインストールしてある状態なら簡単にインストールできます。あと必要なのはGoogleアカウ…
Google AI StudioのBuild apps with Geminiでアプリを作ってローカルで動かしてみた。
この記事では、アプリを作成し、ダウンロードしてローカルで実行する方法をご紹介します。無料のGoogleアカウントを使用しています。クレジットカード登録していません。無料トライアルも使ってません。さらに、Google以外のサーバーで静的ファイ…

VSCode

多機能エディタのVScodeをインストールします。
Microsoft Storeを立ち上げます。Visual Studio Codeで検索すると出てくるので、インストールをクリックで簡単にインストールできます。

日本語化
左にあるアイコンにマウスを近づけると説明がでてきるのでextensionsを探してクリック

→search extensions in Marketplaceの欄にjapaneseで検索
→Japanese Language Pack for Visual Studioをインストール。
→「Change Language and Restart」をクリックしVS Codeを再起動で日本語になります。
参考:【VS Code】インストール手順を解説 【Windows/M1 Mac対応】
参考:【VS Code】オススメの設定・拡張機能・便利機能・ショートカット【Win/Mac対応】
Gitは使うと思うのでインストールしておきます。(初心者の方は、必要になってからインストールでいいと思います。)

Git

Gitは「ファイルの履歴管理」ができるツールです。つまり、いつ・どのような変更をしたのかをすべて記録し、必要なら昔の状態に戻すこともできるのです。 さらに、GitHub というサービスと連携することで、開発したコードをインターネット上に保存したり、アプリを公開したりすることができます。

個人開発者のためのGit入門:コード管理からデプロイまで
はじめに個人で開発をしていると、こんな経験はありませんか?- 変更したら動かなくなったけど、前は動いてた…- バックアップを手動でとっているけど、どれが最新かわからなくなった- せっかく作ったアプリ、インターネットに公開してみたいこうした悩…

Windowsの場合https://git-scm.com/downloads/winからダウンロードしてexeファイルを実行。デフォルトのまま全部next。

Node.js

Vue.js、Reactなどフロントエンド開発をおこなうときベースになるツール。
パソコンにインストールする手順です。仮想環境にインストールする方法も下の章で紹介していますが、パソコンにインストールするほうをお勧めします。

① Node.js公式サイトにアクセス

  • Node.js公式サイト
  • 「LTS(推奨版)」と「Current(最新版)」がありますが、安定性重視なら LTS版 を選びましょう。

② インストーラーをダウンロード

  • 「Windows Installer (.msi)」をクリックしてダウンロードします。

③ インストール実行

  • ダウンロードした .msi ファイルをダブルクリックして実行。
  • 基本的に「Next」を押して進めばOK。
  • 「Tools for Native Modules」のチェックはそのままで問題ありません。

④ インストール確認

  • インストール後、PowerShellやコマンドプロンプトを開いて以下を入力:
node -v
npm -v
  • nodenpm のバージョンが表示されれば成功です!

💡 補足情報

  • npm はNode.jsに付属するパッケージ管理ツールです。
  • npx も一緒に使えるようになります(npm経由で一時的にコマンド実行できるツール)。
  • VSCodeなどのエディタと組み合わせると、開発が快適になります。

Python、Django(Anaconda使用)

パソコンにPython環境構築するときはまず多分Python公式のここを見たほうがいいです。https://www.python.jp/index.html
私はPython環境構築で最初にAnacondaに出会ってしまったのでAnaconda使っています。Pythonプログラムの開発ではJupiterNotebook(lab)が最初から入っていて便利で使いやすいです。

ただAnaconda使ううえで注意しなければならないのはcondaとpipです。私はpip1本でやっています。pip関連のエラーに遭遇しますが使えています。今後何かpipしていれたときに問題発生するかもしれません。人それぞれ使うライブラリによって、この問題に対する感想は違ってくると思いました。
例えば、こんなことがありました。

!pip install yfinanceしたら
ERROR: pip's dependency resolver does not currently take into account all the packages that are installed. This behaviour is the source of the following dependency conflicts.
conda-repo-cli 1.0.20 requires clyent==1.2.1, but you have clyent 1.2.2 which is incompatible.
conda-repo-cli 1.0.20 requires nbformat==5.4.0, but you have nbformat 5.5.0 which is incompatible.

condaが要求していないバージョンのパッケージ(yfinanceが使うclyent、nbformat)がインストールされているというエラーと思われる。でエラーを出しているのがpip(pip’s dependency resolver)でcondaは、このことを把握してない状態だと思います。本当にそうかパッケージ一覧をそれぞれ出してみました。

pip一覧コマンド!pip list
conda一覧コマンドconda list
結果は予想外に両方ともclyent  1.2.2、nbformat  5.5.0でした。
また目的のパッケージも両方にyfinance  0.2.4となってありました。

conda search yfinanceをすると
Loading channels: ...working... done
No match found for: yfinance. Search: *yfinance*

Note: you may need to restart the kernel to use updated packages.
condaでは扱っていないニュアンスです。
となるとconda listで表示した一覧はpip、condaでインストールしたかに関わらず単にパソコンにインストールされた一覧が表示されているだけでcondaが把握してるかどうかは関係ないのかもしれません。
なのでconda-repo-cli 1.0.20 requiresとconda一覧で表示するバージョンで矛盾が生じているのかもしれません。
だとすると今度clyent、nbformatと依存関係のあるパッケージをcondaでインストールするとバージョン認識の矛盾を抱えたまま実行されて不具合を引き起こすのかもしれません。パッケージの他のパッケージとの依存関係が、どのバージョンでもまったく関係なければ何も問題が起こらないかもしれません。
またAnacondaインストール時はpipではなくcondaで管理されていたのでpipは、どんなパッケージがインストールされているかわからない状態なのにpipしても大丈夫なのかという疑問も出ます。
あくまで推測です。
とりあえず動いているので、エラーは放置で、このままcondaは今後も使用せずpip使おうと思います。

conda使うのが妥当だとおもいますがcondaにないパッケージはpip使うしかありません。そうなるとこの点に関してはpipだけ使う公式版Pythonのほうがいいかもしれません。

仮想環境

仮想環境の目的は、Pythonをインストールしたメインのライブラリに新たにいろんなものをインストールして汚れるのを避けるためです。仮想環境がないとPC全体(グローバル)に1つのバージョンしか入れられず、「Aを動かそうとするとBが壊れる」という地獄(依存性の競合)が発生します。

Djangoを使うときは、たくさんのライブラリをインストールするため、仮想環境を作って、そこにライブラリをインストールします。なのでメインの環境には影響がありません。不要になったら仮想環境を削除してもメインには影響はありません。

ターミナルで左端に(base)と出ている状態でpipなどでライブラリをインストールしてしまうとメインの環境に入ってしまいます。なので仮想環境を作ります。そうすると(base)という表示が仮想環境の名前に変わり、今、そこにライブラリをインストールしようとしてるのだなということが分かります。
Zenn本書きました↓よかったらご覧ください。

仮想環境とPython
Pythonを使って開発を始めようとしたとき、次のような悩みにぶつかったことはありませんか?* あるプロジェクトで必要なライブラリが、他のプロジェクトでは邪魔になる…* 「仮想環境を使ってください」と言われたけど、そもそもそれって何?* V…

AnacondaでDjangoアプリを作る

以下を参考にプロジェクトが作れるところまでやります。エディタはVSCodeを使っています。(VSCodeがあればSpyderはインストールしなくていいです。)
AnacondaではなくPythonのみの場合、仮想環境の作り方が違うだけで、その後は同じです。Pythonの仮想環境venvは、別途お調べください。上記、本にも書いてます。

Anacondaインストール

参考:【Python】「Anaconda」で「Django」の開発環境を作る。
AnacondaのサイトにアクセスしFree download→GET Started→メールアドレスなどで登録→登録情報を入力、名前だけ必須。→Distribution InstallersでWindowsマークをクリックでダウンロード→ダウンロードしたファイルをダブルクリック→インストーラーが立ち上がる。→デフォルト設定のまま、nextやI agreeやfinishをクリックで完了

WindowsでAnacondaを使用している場合、condaコマンドを使って非常に簡単にDjango環境を構築できます。

以下の手順を 順番に実行してください。

AnacondaPowerShellを立ち上げる

左下のWindowsマーク→Anaconda(Anaconda3)→AnacondaPowerShell


仮想環境の作成と切り替え

まず、Django専用の「箱(仮想環境)」を作ります。

仮想環境を作成する以下のコマンドを打つと、my-django-env という名前の環境が作られます。Pythonのバージョンも指定するのがコツです。

conda create -n my-django-env python=3.10
※ Proceed ([y]/n)? と聞かれたら y を入力してエンター。

コマンドの意味:create … 新しい環境を作る。-n my-django-env … 環境の名前を指定。python=3.10 … その環境に入れる Python のバージョンを指定。

仮想環境を有効化(Activate)する作成した環境の中に入ります。

conda activate my-django-env ※ 左端のカッコが (base) から (my-django-env) に変われば成功です。

Djangoのインストール

環境の中に入った状態で、Djangoをインストールします。

pip install django
本来Anacondaを使っているのでconda install djangoのほうがいいと思いますが、AIに聞いたりwebで調べるとpipが出てきて、condaを使うのを忘れるので最初からpip使っても仮想環境なので、大丈夫です。

インストールが終わったら、念のため確認しましょう。

django-admin --version
結果表示例5.2.14

Djangoプロジェクトの作成と起動

いよいよ、Djangoを動かしてみます。

プロジェクトを作成する(例として djangotest という名前で作成します。末尾の . は「現在のフォルダに展開する」という意味です。)
まず、展開するフォルダを作って、そこにプロジェクトを展開します。

mkdir djangotest
cd djangotest

django-admin startproject djangotest .

サーバーを起動するDjangoには開発用の簡易サーバーが内蔵されています。
manage.pyがあるフォルダで起動コマンドを実行します。

python manage.py runserver

ブラウザで確認

サーバーが起動すると、ターミナルに以下のようなURLが表示されます。

http://127.0.0.1:8000/

ブラウザでこのURLを開き、「The install worked successfully!」 というロケットの絵が表示されれば成功です!

この先、アプリを作りたい場合は以下の「アプリ作成」から実行してください。プロジェクト名が、hajimete_pjなので、hajimete_pjを上で作った、djangotestに置き換えて読みすすめてください。

【Django入門】DjangoアプリをWeb開発環境で開発、公開するまでの手順-ステップ1(PaizaCloud)
無料のWeb開発環境PaizaCloudでDjangoアプリを開発する簡単な手順になります。この記事ではDjangoのプログラムの内容の解説はありません。Djangoアプリをサーバー(Heroku)でデプロイ(公開)するために必要な知識手順…

💡 覚えておくと便利な操作

  • 作業を終えるとき: Ctrl + C でサーバーを停止し(コマンドが入力できるようになります。)、conda deactivate で環境を抜けます。
  • 再開するとき: 次回からは conda activate my-django-env を実行してから python manage.py runserver を打つだけでOKです。

仮想環境から抜ける(解除)

今いる環境を抜けて、デフォルトの (base) 環境に戻ります。

conda deactivate

※ どのディレクトリにいても、このコマンドひとつで解除できます。

仮想環境の一覧を表示する

今自分のPCにどんな環境がいくつあるかを確認します。

conda info -e

または

conda env list

※ 現在アクティブな環境には *(アスタリスク)マークがついているので、一目でわかります。

仮想環境を削除する

不要になった環境を完全に消去します。

注意: 削除したい環境の中にいる(Activateしている)状態では削除できないので、一度 deactivate してから実行してください。

conda remove -n my-django-env --all
その後、2回、y入力。
  • -n のあとに削除したい環境名を指定します。
  • --all をつけることで、その環境に含まれるライブラリごと丸ごと削除します。

まとめ表

操作コマンド
入るconda activate 環境名
抜けるconda deactivate
一覧を見るconda env list
消すconda remove -n 環境名 --all


目次へ

Vue(AnacondaでNode.js使用)

2025/4/14追記 CursorでMCPサーバーを使うのにNode.jsまたはDockerが必要ですが、Anacondaの仮想環境にNode.jsインストールするこの方法でやるとうまくいかなかったのでパソコンにNode.jsをインストールしました。下のAnaconda仮想環境でNode.jsを入れていても、パソコンに入れたほうと干渉することはありませんが、MCPサーバーをやるときはパソコンにインストールしたほうを使うことをおすすめします。

CursorでMCPを試した!全部無料!自分のブログ(ここ)をスクレーピングさせて紹介サイトをローカルフォルダに保存させてみました。
Cursorを使ってMCPサーバーを動かしてみました。無料(無料プラン)かつクレジットカード登録なしで使えるものだけ使ってます。API Keyも取得しないでいいものを使っています。実行環境 Windows11必要なものGit:パソコンにイン…

Node.jsがAnacondaの仮想環境で簡単にインストールできるのでVueの開発環境もできます。Node.jsをAnacondaの仮想環境にインストールする方法は
参考:【Python】「Django」プロジェクトを作成して、起動してみる。こちらのDjangoと同じでNode.jsを選んでApplyするだけです。そのあとはネットでよく見るvenvで作った仮想環境と同じようにVueの開発環境が作れます。venvでの開発環境構築はネットに情報がたくさんあるのでNode.jsがインストールされた状態の手順からを参考にしてやればAnacondaでも構築できます。
DjangoとNode.jsを選択して仮想環境作ることもできます。↓↓

ターミナルで
cd プロジェクトのあるディレクトリ
code .でVSCodeが立ち上がります。
VSCodeの表示→ターミナルでもう1個ターミナルが開くので、それぞれDjangoとNode.jsでターミナルを使えます。
Vsコードのターミナルを開いたとき仮想環境ではなく(base)になっていることがあります。
そういう時はtest.pyなど適当に新規ファイルを作って右下のbaseというところをクリックすると仮想環境(インタープリター)が選択できます。変わらなかったらターミナルにあるごみ箱で1回消したあと立ち上げると変わりました。

DjangoとVue連携(Anaconda)

こちらで一通り体験できます。Django REST FrameworkとVue.jsの環境構築 – Qiita
私の環境で、うまくいかない部分もあったので補足します。
venvを使わないで上のAnaconda環境でやる場合はAnaconda NavigatorでDjangoとNode.jsが入った仮想環境を作り。できた仮想環境をクリックしてopen terminalでコマンドが打てます。複数ターミナル立ち上げられるのでDjango用とVue用別々にターミナルを立ち上げます。

mkdir django-vue-env
cd django-vue-env
でディレクトリを作って移動したら参考サイトの
「DjangoとDjango REST Frameworkをインストールする」からやります。ただDjangoは入っているのでREST Frameworkだけインストールします。
pip install djangorestframework==3.14.0
あとは参考サイト通り。
apiが読み込めなかったのでsampleの次に/を付けたらうまくいきました。
frontend/src/components/HelloWorld.vue
.get("/api/v1/sample") → .get("/api/v1/sample/")

最後表示されないですが
ビルドしたあとのstaticとtemplatesをappの下に移動するとうまくいきます。

サーバーとクライアントをまたぐようなパスの操作はうまくいかないのかなと思ってます。
というのもvue.config.jsをいじってDjangoにtemplatesやstaticを作るようにしたり逆にDjangoのsettings.pyのTEMPLATES = とかでtemplatesやstaticを参照するようにしたけどうまくいきませんでした。
なのでビルドして完成したindex.html、js、cssをDjangoのアプリ内に手動で移動して使うことにしました。

Docker

2025/11パソコン買い換えたので、こちらの方法でDocker Desktopをインストールしました。

下の二つを参考にWSL2とDocker Desktopをインストールします。
【Docker Desktop】Windowsにインストール(WSL2)(私はフォルダの共有はやってません。)
WSL2のインストールと分かりやすく解説【Windows10/11】

Django(Dockerを使用)

「クイックスタートそのまま」でまずやりましたが、エラーになったので、「クイックスタート改良して必要最小限のファイルで実行する方法」をおすすめします。

仮想環境とDockerの違い
仮想環境はライブラリの場所が異なるだけで、Windows上で動作します。
Dockerは、Linuxを載せた独立したOSとしてコンテナ内で動作し、ライブラリもコンテナ内にインストールするため、コンテナを削除するとインストールしたものも消えます。Django開発でも仮想環境とDockerコンテナでは違いがあるので注意が必要です。例えば、Dockerコンテナは独立しているため基本的に仮想環境は不要です。開発のしやすさでは仮想環境のほうが便利ですが、DockerはNginxやDjangoなど役割の異なるコンテナを複数作り、ネットワークを構築できるのが魅力です。

クイックスタートそのまま

docker docsにDjangoのサンプルがあるのでそれをやってみます。
クィックスタート: Compose と Django 
やり方を補足しますが、結局、エラーでうまくいきませんでした。

手順
Docker Dsktop立ち上げ
ubuntu on Windows立ち上げ
(2023/11/3からubuntu on Windows私は使っていない。PowerShellを立ち上げて使ってます。)

2023/11/3追記
Docker desktopのバージョンをあげv4.25.0にしたら、ubuntu on Windowsでエラーが出る。The command ‘docker’ could not be found in this WSL 2 distro. We recommend to activate the WSL integration in Docker Desktop settings.snap install docker
こちらで解決しました。wsl上のubuntuでdockerが使用できない

試しにPowerShellでdocker –versionしたらDocker version 24.0.6になっていた。
(Docker Desktopは立ち上げたあとにPowerShellは起動しないとうまくいかない。
ubuntu on Windowsは立ち上げていない)
そのままCドライブでディレクトリ、Dockerfileなど作って
PS C:\Users\abc\docker\ngigun1>docker-compose run -p 8000:8000 web bashしたら
普通に動いてroot@2cb061f7a379:/code#になった。今後は、この方法で行こうと思います。
(rootユーザーへの変更操作など特にしなくてもできた)
というかバージョンアップ関係なく最初からPowerShell使えたのかも。
ubuntu on WindowsとPowerShellの両方、使える状態になったけどPowerShellだけにしたほうがいいかも。

2026/5/14クィックスタート: Compose と Django を再度実行してみた。
PowerShell(Anaconda PowerShell)を立ち上げる
mkdir django
cd django
code .
クィックスタート: Compose と Django のとおりDockerfile、docker-compose.yml、requirements.txt作成後

sudo docker-compose run web django-admin startproject composeexample .
はエラー
→docker-compose run web django-admin startproject composeexample .
sudoなしにするとうまくいく。

ModuleNotFoundError: No module named 'cgi'発生
“cgi モジュールが Python 3.13 で削除されたこと” が原因 です。
つまり、Docker イメージが Python 3.13 系 を使っているため発生。

Dockerfileの以下変更
FROM python:3 → FROM python:3.12

docker-compose build
docker-compose run web django-admin startproject composeexample .
一般ユーザーへ変更後rootユーザーへ変更するやり方で以下のような状態にする。xxxはubuntu一般ユーザー名、yyyはパソコンの名前(設定する必要はない)
root@yyy:/home/xxx#
mkdir django
cd django
code .
VSCodeが立ち上がらない場合。
 vscode立ち上げフォルダを開くで1番上の入力欄に\\wsl$を入力してEnter
 ubuntu→home→xxx(ユーザー名)→djangoを選択してフォルダの選択
 右下にwslウィンドウを使うようにうながすアラート画面が出るが×で閉じる。
requirements.txt、dockerfile、docker-compose.ymlの3つのファイルを同階層に作る。中身は参考サイトのまま。
表示→ターミナル。>クリック→Ubuntu(WSL)でVSCodeの下にターミナルが表示されるので、そこで参考リンク通りに実行します。
Ubuntu(WSL)がない場合は今右下に開いたターミナルWindowで+の横の▽を押すとUbuntu(WSL)が選択できるので、クリックします。
sqlite3からPostgressqlに変更してdocker-compose up はうまくいかない。
settings.pyでデータベースをsqlite3からPostgressqlに変更しているので最初からあるSQLite3はコメントアウトすることはやりましたがダメです。
# DATABASES = {
#     'default': {
#         'ENGINE': 'django.db.backends.sqlite3',
#         'NAME': BASE_DIR / 'db.sqlite3',
#     }
# }
docker-compose up を実行すると
web-1  | django.db.utils.OperationalError: could not translate host name "db" to address: No address associated with hostname
で止まってしまいました。AIに聞いて少し調査しましたが、てこずりそうなので止めました。
本格的にデータベースを運用しないのであればsqlite3で十分です。

ということで、Postgressqlは諦めてsqlite3にもどしました。
docker-compose upしてhttp://localhost:8000にアクセスするとDjangoのロケット画面が出ます。
またCTRL+Cするとコンテナが止まります。

メモ:
いろいろやっている最中に
コマンド入力欄が>>>になっているときはpythonの対話型シェルになっているので
printとかpythonのコマンドしか受け付けない状態です。
exit()してください。

クイックスタート改良して必要最小限のファイルで実行する方法

Postgressを使用しないでSqliteでいいならば、以下の3つで大丈夫です。
これで、ロケット画面まで表示させる手順です。
まず、Docker Desktopで上で先ほど作ったコンテナとイメージを削除してください。

PowerShell(Anaconda PowerShell)を立ち上げる
mkdir django1
cd django1
code .

Dockerfile

FROM python:3
ENV PYTHONDONTWRITEBYTECODE=1
ENV PYTHONUNBUFFERED=1
WORKDIR /code
COPY requirements.txt /code/
RUN pip install -r requirements.txt
COPY . /code/

docker-compose.yml

services:
  web:
    build: .
    volumes:
      - .:/code
    ports:
      - "8000:8000"
version: "3.9"は、現在、versionを書かなくてよくなったので削除してます。

requirements.txt

Django

Docker Composeを使ってこのプロジェクトを起動する手順を解説します。

実行手順

以下のコマンドを、docker-compose.yml が置かれているディレクトリで順番に実行してください。

コンテナのビルドと起動

docker compose up --build -d

Dockerfile に基づいてイメージが作成され、requirements.txt の内容(Django)がインストールされます 。

--build オプションを付けることで、コードや設定の変更を確実に反映させます。
-d: コンテナをバックグラウンドで起動し、制御をターミナルに戻します。

Djangoプロジェクトの作成(初回のみ)

コンテナが起動したら、以下のコマンドを実行し、Djangoの雛形ファイルを作成します。

docker compose run --rm web django-admin startproject myproject .

--rm: 実行(今回、project作成)が終わったらこの一時的なコンテナを削除します。

×docker compose exec web django-admin startproject myproject .
でproject作成後、コンテナが起動し続けると思ったがcommandがないとコンテナは「実行するプロセスがない」とみなして終了するようです。しかも--rmつけてないと、プロジェクト作成前に止まってしまいます。
  • これにより、現在のディレクトリに manage.py や設定ファイルが生成されます。

ymlにcommandを追加してup コマンドで起動する

docker-compose.ymlにcommandを追加します。

services:
  web:
      build: .
      command: python manage.py runserver 0.0.0.0:8000 # これで常駐するようになる
      volumes:
        - .:/code
      ports:
        - "8000:8000"
以下で起動します。
docker compose up -d

ブラウザで確認ブラウザを開き、http://localhost:8000にアクセスしてください。


なぜ 0.0.0.0 が必要なのか?

なぜ
command: python manage.py runserver(仮想環境ではこれで動く)ではなく
command: python manage.py runserver 0.0.0.0:8000なのか?

「普通に実行すれば localhost:8000 で待ち受けてくれるはず」というのは正しい感覚なのですが、Docker(コンテナ)の世界ではネットワークの境界線があるため、少し特殊な事情が絡んできます。

結論から言うと、「コンテナの外(あなたのPC)からのアクセスを許可するため」に 0.0.0.0 が必要です。


Djangoのデフォルト(0.0.0.0 を指定しない場合)は、127.0.0.1(ループバックアドレス)で起動します。ここが落とし穴です。

  • 127.0.0.1 で起動した場合: コンテナ自身(内部)からのアクセスしか受け付けません。「俺(コンテナ)の中だけで完結する通信しか聞かないよ!」という状態です。
  • 0.0.0.0 で起動した場合: 「全てのネットワークインターフェースからの接続を受け付けるよ!」という状態になります。

Docker Composeで 8000:8000 とポートを繋いでいても、コンテナ内のDjangoが「外(Dockerのネットワーク経由)からの通信」を拒否していると、ブラウザには何も表示されません。


「デフォルトでlocalhost」にならない理由

通常、PC上で直接 python manage.py runserver を叩けば、PCのブラウザから localhost:8000 で見れます。これは 「ブラウザ」も「Django」も同じOS(同じネットワーク空間)にいるから です。

しかし、Dockerの場合は以下のようになります:

  • ブラウザ: あなたのPC(ホストOS)にいる。
  • Django: コンテナ(仮想的な別マシン)の中にいる。

ホストOSからコンテナへアクセスするのは、厳密には「外部からの接続」扱いになるため、コンテナ内のDjangoは 0.0.0.0 で待ち構えて、外からのノックに応答できるようにしておく必要があるのです。

コンテナのIPは以下で調べられます。コンテナが1個でもDockerはネットワークを作ります。

docker network ls
NETWORK ID     NAME              DRIVER    SCOPE
bb6fdccb330d   bridge            bridge    local デフォルト
8b3c1528d799   django1_default   bridge    local ← このネットワーク名
6c31567a9fbb   host              host      local デフォルト
280922ca45da   none              null      local デフォルト
docker network inspect django1_default(ネットワーク名)
必要なところだけ抜粋してます。
        "Containers": {
                "MacAddress": "96:3a:de:b6:f1:aa",
                "IPv4Address": "172.18.0.2/16",

172.18.0.2がコンテナのIPです。
なのでcommand: python manage.py runserver 0.0.0.0:8000ではなくcommand: python manage.py runserver 172.18.0.2:8000でもいいのか?

「localhost:8000 に届いた通信が、Dockerのブリッジネットワークを介してコンテナの内部IPへ転送される」という流れはその通りです。

なぜ「コンテナのIP」を直接書かずに 0.0.0.0 を使うのが一般的なのか、その理由を深掘りしてみましょう。


1. 「コンテナのIP」を指定しても動くのか?

結論から言うと、動きます。

もし docker network inspect で調べたIPが 172.18.0.2 だったとして、runserver 172.18.0.2:8000 と起動すれば、ホストPCからの localhost:8000 経由のアクセスは届きます。

2. では、なぜ 0.0.0.0 を使うのか?

理由は主に2つあります。

① コンテナのIPは「動的」である

DockerコンテナのIPアドレスは、コンテナを再起動したり、別のサービスを先に立ち上げたりするだけで変わってしまうことがあります。

  • 今日は 172.18.0.2 だったけど、明日は 172.18.0.3 になるかもしれません。
  • コードの中に特定のIPを書いてしまうと、IPが変わるたびに起動コマンドを書き換えなければならず、非常に不便です。

0.0.0.0 は「すべての自分(コンテナ)のIP」を指す

0.0.0.0 は特定の場所を指す住所ではなく、「このコンテナが持っているすべてのネットワークインターフェースで待ち受ける」という特別な指示です。

コンテナが 172.18.0.2 を割り振られればそのIPで待ち受けますし、もし将来的に別のネットワークにも所属して別のIPが増えたとしても、それも自動的にカバーしてくれます。


3. 通信の流れのイメージ

仕組みを詳しく分解すると以下のようになります。

  1. ホストPC側: ブラウザで localhost:8000 を叩く。
  2. Dockerエンジン: 「8000番へのアクセスが来たな。これは設定通り、コンテナ web8000番 へ転送(NAT)しよう」と判断する。
  3. コンテナ内: Djangoが 「どこ宛の通信でもいいから(0.0.0.0)、8000番に来たものは全部受け取るぞ」 と構えている。
  4. 合致: Dockerエンジンが投げたパケットをDjangoが無事に受け取る。

補足:なぜ 127.0.0.1 ではダメなのか?

よくある失敗が runserver 127.0.0.1:8000 としてしまうケースです。

127.0.0.1(ループバックアドレス)を指定すると、Djangoは「コンテナの中から自分自身に送られた通信」しか受け付けなくなります。

Dockerホスト(PC)からの通信は、コンテナの外側にある仮想ネットワークインターフェースを経由して入ってくるため、Djangoからは「外部からの通信」に見えます。そのため、「外部(どこから)でもOK」という意味の 0.0.0.0 を指定する必要があるのです。

結論

「IPがいつ変わってもいいように、あえて特定のIPを指定せず、全部入り(0.0.0.0)にする」というのが、Dockerの世界での賢いやり方(ベストプラクティス)ということになります。

バックグラウンドで起動した後の開発サイクル

Docker Composeを使った開発では、「コードを書く → 反映を確認する → 必要に応じて再起動・停止する」という流れになります。

よく使うコマンドと手順をまとめました。


ソースコードを変更したとき

あなたの docker-compose.yml には volumes: - .:/code という設定があります 。これはホスト(PC)とコンテナ内のファイルを同期させる設定です。

  • Python/HTMLファイルの修正: 保存するだけでコンテナ内に即座に反映されます。Djangoの runserver はファイルの変更を検知して自動リロードしてくれるので、コマンドを打ち直す必要はありません。ブラウザを更新するだけでOKです。
  • 新しいライブラリを追加したとき (requirements.txt の更新): ライブラリのインストールはビルド時に行われるため、再ビルドdocker compose up -d --buildが必要です 。

開発中によく使うコマンド

バックグラウンド(-d)で動かしていると中身が見えないため、以下のコマンドを多用します。

  • ログをリアルタイムで見る:エラーが出た時や、print デバッグの内容を確認したい時に使います。
docker compose logs -f webCTRL+Cで抜けれます。
  • コンテナ内でコマンドを実行する:マイグレーション(DB反映)や、管理ユーザーの作成に使います。
# マイグレーションファイルの作成docker compose exec web python manage.py makemigrations # DBへの反映docker compose exec web python manage.py migrate # 管理者作成docker compose exec web python manage.py createsuperuser

ソースを変えて変更が反映されるか確認

ロケット画面をHello World!と文字を表示するだけの画面に変えてみます。
myproject\urls.pyファイルを以下のように変更して保存。http://localhost:8000を再読み込みすると表示が変わります。
今、変更したものを戻して保存、再読み込みでロケット画面に戻ります。

from django.contrib import admin
from django.urls import path
from django.http import HttpResponse  # これを追加

def hello_world(request):
    return HttpResponse("Hello World!")  # 表示したい内容
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', hello_world),  # ルート(/)にアクセスした時に実行
]

コンテナの中で操作する方法

コンテナの中に入って操作する方法です。

コンテナの名前を調べる
docker ps
CONTAINER ID   IMAGE         COMMAND                   CREATED        STATUS       PORTS                                         NAMES
8f1fb9ae5fb9   django1-web   "python manage.py ru…"   15 hours ago   Up 2 hours   0.0.0.0:8000->8000/tcp, [::]:8000->8000/tcp   django1-web-1

コンテナの中に入る。上記で調べたコンテナ名django1-web-1を使う。
docker exec -it django1-web-1 bash

試しにlsでディレクトリを調べてみる
root@8f1fb9ae5fb9:/code# ls
Dockerfile  db.sqlite3  docker-compose.yml  manage.py  myproject  requirements.txt

makemigrationsしてみる。
root@8f1fb9ae5fb9:/code# python manage.py makemigrations
No changes detected

試しにpython manage.py runserverしてみる
root@8f1fb9ae5fb9:/code# python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
Error: That port is already in use.
二重で立ち上がることはない。

コンテナから出るときは
exit

開発を中断・終了するとき

「止める」のにもいくつか段階があります。

  • 一時停止(コンテナを止めるだけ):次に up したとき、前回の状態から素早く再開できます。
docker compose stop
  • 削除(コンテナを破棄する):開発が終わった際や、設定をリセットしたい時に使います。
docker compose down 注意: down をしても、PC上のソースコードや、ボリューム設定されたDBデータなどは消えませんので安心してください。

開発の流れ(まとめ)

  1. 起動: docker compose up -d
  2. コード編集: PC上のファイルを書き換える(自動反映)
  3. 確認: ログが必要なら docker compose logs -f
  4. 操作: docker compose exec ... で命令を送る。またはコンテナの中に入って作業。
  5. 終了: docker compose down

基本的には 「一度 up -d したら、あとは exec で命令を送るか、エディタでコードを書くだけ」 というのが一番楽なスタイルです。

この記事を書いたイチゲを応援する(質問でもokです)
Vプリカでのお支払いがおすすめです。

MENTAやってます(ichige)
目次へ

You’re accessing the development server over HTTPS, but it only supports HTTP.

Dockerと関係ないかもしれないが、python manage.py runserverを実行してhttp://localhost:8000/にアクセスするはずがhttps://localhost:8000/に勝手に切り替わって、このエラーがでている。
対策:ブラウザが以前にHTTPSでアクセスされた情報をキャッシュすることがあるようでブラウザのキャッシュをクリアしたら直った。ブラウザのキャッシュをクリアすると、ログイン状態のサイトがログアウトになるので再度ログインできるようにパスワードなどチェックしておいてください。
または、ブラウザ右上の3点設定で「新しいinprivateウィンドウ」で立ち上げれば大丈夫です。

起動中のコンテナにコマンドを実行する方法は、別のターミナルを開いて以下実行。
例 docker-compose exec web python manage.py startapp hajimete_app
参考 https://inglow.jp/techblog/docker-django/
docker-compose stop
で止めて
docker-compose restart
再開すると中に入れてlsを実行すると、ディレクトリが見れる。
またこの状態だと最初のターミナルでctrl+cで止めても
python3 manage.py runserverが使える(python manage.py runserverではエラー)
コンテナの中に入る。
注意:CTRL+Cで止めるとwebのほうのコンテナーが止まってしまう。docker container lsだとPosgressqlのコンテナしか表示されない。それに入ろうとして変なディレクトリになる。
docker container ps -a(停止しているコンテナを確認する)だとwebのコンテナーも出る。
参考https://www.webopixel.net/develop/1684.html

コンテナの中に入らないとアプリケーションが作れません。
表示→ターミナル。>クリック→Ubuntu(WSL)で,もう1個ターミナルを立ち上げます。
コンテナが動いてる状態(Docker Desktopでcontainersで該当するコンテナのactionのところが■になっている状態。▷は止まっている状態なので押す。)
こちらの方法でコンテナの中に入ります。
python manage.py startapp アプリ名
exploreを最新表示するボタンを押すと追加したアプリのディレクトリが表示されます。
python manage.py migrateなどもできます。
目次へ

Django 前に作ったプロジェクトをgit cloneする方法

2023/6/19未確認ですが上の感じだとうまくいかないかも。
次に前に作ったプロジェクトをgit cloneで持ってきてDockerで動かしました。
上の方法クィックスタート: Compose と Django でプロジェクトを作っている部分は

sudo docker-compose run web django-admin startproject composeexample .なので、後ろの django-admin startproject composeexample .をやらなければいけるだろうという考えでやっています。

やった方法です。
Docker Dsktop立ち上げ
ubuntu on Windows立ち上げ

一般ユーザーへ変更後rootユーザーへ変更するやり方で以下のような状態にする。xxxはubuntu一般ユーザー名、yyyはパソコンの名前(設定する必要はない)
root@yyy:/home/xxx#
まずgit cloneでプロジェクトを持ってくる。
cd クローンしたプロジェクト
code .
VSCodeが立ち上がらない場合。
 vscode立ち上げフォルダを開くで1番上の入力欄に\\wsl$を入力してEnter
 ubuntu→home→xxx(ユーザー名)→クローンしたプロジェクトを選択してフォルダの選択
 右下にwslウィンドウを使うようにうながすアラート画面が出るが×で閉じる。

Dockerfile、docker-compose.ymlを作る。中身は参考サイトと同じ。
requirements.txtに関しては、公式でうまくいったバージョンをつかうのと、それ以外の必要なものを記入。
つまり元々のrequirements.txtのDjangoとpsycog2が公式のサンプルのバージョンと違う場合
Django>=3.0,<4.0
psycopg2>=2.8を使用。
ここを変えたことで、他のdjangorestfmewoksとかとのバージョンの整合が取れなくてエラーになる場合もあるのでエラーが出たらバージョンを疑う。

表示→ターミナル。>クリック→Ubuntu(WSL)でVSCodeの下にターミナルが表示されるので、そこでsudo docker-compose run webだけを実行します。
Ubuntu(WSL)がない場合は今右下に開いたターミナルWindowで+の横の▽を押すとUbuntu(WSL)が選択できるので、クリックします。

エラーが出る場合
requirements.txt内で指定しているもののバージョンがあってない場合が多かったです。
修正したら
docker-compose buildしてdocker-compose up

参考【初心者向け】docker-compose run, up, build, createの違い。
コンテナの中に入らないとpython manage.py migrateなどはできません。
表示→ターミナル。>クリック→Ubuntu(WSL)で,もう1個ターミナルを立ち上げます。
コンテナが動いてる状態(Docker Desktopでcontainersで該当するコンテナのactionのところが■になっている状態。▷は止まっている状態なので押す。)
こちらの方法でコンテナの中に入ります。
目次へ

Vue(Dockerを使用)

Vue.js3、Vue.js2+Vuetify2

Vue(Dockerを使用)の環境構築でうまくいった参考サイト2つご紹介します。そのままではうまくいかなかったので補足します。
DockerによるVue.jsの環境構築
手順
Docker Desktop立ち上げ
ubuntu on Windows立ち上げ
(2023/11/3から私は使っていない。PowerShellを立ち上げて使ってます。)

PowerShellの場合
mkdir Docker
cd Docker
code .
一般ユーザーへ変更後rootユーザーへ変更するやり方で以下のような状態にする。xxxはubuntu一般ユーザー名、yyyはパソコンの名前(設定する必要はない)
root@yyy:/home/xxx#
mkdir Docker
cd Docker
code .
VSCodeが立ち上がらない場合(エラーの場合)。
 vscode立ち上げフォルダを開くで1番上の入力欄に\\wsl$を入力してEnter
 ubuntu→home→xxx(ユーザー名)→Dockerを選択してフォルダの選択
 右下にwslウィンドウを使うようにうながすアラート画面が出るが×で閉じる。

Vscodeが立ち上がります。
Dokerディレクトリの下で作業。ここからはDockerによるVue.jsの環境構築に沿てやっていきます。
Dockerファイルと空のappディレクトリを同階層に作ります。
Dockerfileの中身はFROM node:16.13.0では途中で止まってしまったため。多分バージョンの問題。下の参考サイトでうまくいったバージョンFROM node:14.16.0-stretch-slimに変更したらうまくいきました。別のサイトで見つけたFROM node:18.1-alpineでもうまくいった。DockerHubにあるものを引っ張ってくるようです。他のバージョンはためしていません。

FROM node:14.16.0-stretch-slim

WORKDIR /app

COPY ./app /app

CMD ["/bin/bash"]

イメージの作成からは
表示→ターミナル。>クリック→Ubuntu(WSL)でVSCodeの下にターミナルが表示される。
Ubuntu(WSL)がない場合は今右下に開いたターミナルWindowで+の横の▽を押すとUbuntu(WSL)が選択できるので、クリックします。

そこで参考リンク通りに実行します。4,docker-compose.ymlの作成はうまくいきませんでした。

こちらはdocker-compose.ymlでもうまくいきました。
WSL2 + Docker + Vue.jsの開発環境をさくっと作成する
手順
Docker Dsktop立ち上げ
ubuntu on Windows立ち上げ
(2023/11/3から私は使っていない。PowerShellを立ち上げて使ってます。)

PowerShellの場合
mkdir vue-app
cd vue-app
code .
一般ユーザーへ変更後rootユーザーへ変更してこの状態にするやり方で以下のような状態にする。xxxはubuntu一般ユーザー名、yyyはパソコンの名前(設定する必要はない)
root@yyy:/home/xxx#
mkdir vue-app
cd vue-app
code .
VSCodeが立ち上がらない場合。
 vscode立ち上げフォルダを開くで1番上の入力欄に\\wsl$を入力してEnter
 ubuntu→home→xxx(ユーザー名)→vue-appを選択してフォルダの選択
 右下にwslウィンドウを使うようにうながすアラート画面が出るが×で閉じる。
appディレクトリとDockerfileとdocker-compose.ymlを同じ階層に作る。あとは参考サイト通り。
sudo docker-compose exec node bashでエラーがでるときは
→sudo docker-compose exec node shでうまくいきました。

最後アクセスする先はhttp://localhost/またはhttp://localhost:80です。8080ではないので注意
docker-compose.ymlで以下の部分が該当し左側の80が実際のパソコンのport、右の8080がコンテナなのポートになります。
ports:
      - 80:8080

上記方法でVue.js3、Vue.js2+Vuetify2はうまくいくのですが
Vuetify3は実行するとエラーはでないのに表示しません。portを3000とか色々いじってもダメでしたけどとりあえず動かせましたので次項に書きます。
目次へ

Vuetify3

あまり意味は分かっていませんが、とりあえず動かせたので紹介します。
参考にさせていただいたサイトhttps://qiita.com/maaaashi/items/469be1ac350b35458d10
Vuetify3の公式に書いてあるinstallationに持っていけるように改造しました。

root@yyy:/home/xxx#
mkdir vuetify3
cd vuetify3
code .
frontディレクトリとDockerfileとdocker-compose.ymlを同じ階層に作る。

私の認識
Dockerイメージ=ベースになるもの。Dcoerfileが指示書。
Dockerコンテナ=イメージをもとに動かす実態。docker-compose.ymlが指示書。

Dockerfile
FROM node:19-alpine3.16

# WORKDIR /var/www/app
WORKDIR /front

RUN apk update && \
    npm install -g npm @vue/cli

USER node

# CMD [ "npm", "run", "dev" ]
docker-compose.yml
version: '3'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./front:/front
    ports:
      - "3000:3000"
    stdin_open: true
    tty: true
#Image作成
docker-compose build --no-cache

#Container作成(upはイメージも作成するが、すでにある場合は既存のイメージが使われる。参考:https://prograshi.com/platform/docker/difference-among-docker-compose-run-up-build-and-create/)
docker-compose up

#以下で権限を付与しないとfrontの中身のファイルを新規作成、変更できなくてError: EACCES: permission denied,が出る。参考にさせていただいたサイトhttps://my-web-note.com/wsl-vscode-develop/#777
sudo chmod -R 777 ./

#Containerの中に入る。-p 3000:3000がないと動かしたときlocalhost:3000にアクセスしても何も表示しない。
#参考にさせていただいたサイトhttps://qiita.com/SFITB/items/1975b4acd54bb9fb4ad4
docker-compose run -p 3000:3000 app sh

#Vuetify3インストール
yarn create vuetify
選択肢が出るので選択(この辺はこちらを参照してください)
vite.config.jsの以下追加。これをやらないと実行したとき何も表示されない。
  server: {
    port: 3000,
    host: true,   // 追加
  },
cd vuetify-project
yarn dev

Django+Vue(Dockerを使用)

上のDjango(Dockerを使用)でまずVsコード立ち上げまで行います。その後は下記参考サイト通りでできます。
https://www.miracleave.co.jp/contents/1715/post-1715/
mkdirで作るディレクトリは参考サイトに合わせてTEST_APPにします。
コマンドの実行はDjango(Dockerを使用)でターミナルの立ち上げ方を見て実行してください。

1か所だけ修正。あとはスムーズにいきました。
python manage.py make migrations → python manage.py makemigrations

行き詰った点と解決策(ubuntu on WindowsでDocker使用時)

2026/5/15現在は、ubuntu on Windowsは使用せず、PowerShellを使っているので、この章は古いです。

メモリ不足対策

追記:ここは機械学習やらなければ不要だと思います。
途中で止まる場合メモリが不足している可能性があります。
メモリ対策でこの2つのサイトを参考にしてwslで使用するメモリを1Gにしました。
https://pickerlab.net/2021/02/07/wsl2_docker/
https://zenn.dev/takajun/articles/4f15d115548899
私のパソコンは8GのメモリですがEdge、VSCodeなど一緒に立ち上げて80%から90%のメモリ使用量です。動作スピードは遅く感じません。メモリ4Gのパソコンはきついかもしれません。
.wslconfigファイルを以下にして使ってます。.wslconfigファイルの場所は私の場合C:\Users\ユーザー名。このファイルはubuntuとは関係ないWindowsのほうのディレクトリに置きます。

[wsl2]
memory=1GB

変更を反映させるための再立ち上げをお忘れなく。

exit code: 137

上の.wslconfigでうまくいくのですが、機械学習のようなメモリを多く使うものだと
docker buildでexit code: 137が発生しました。
以下の変更でうまくいきました。C:\docker_swapはあらかじめ適当な名前で作ったディレクトリ。

[wsl2]
memory=2GB
swap=5GB
swapFile=C:\docker_swap

それとメモリ節約のためVscodeは立ち上げないでターミナルのみ。edgeなど使わないものは閉じておく。ただモデルが大きいのを実行するとめっちゃ遅いです。機械学習系は自分のメモリの少ないパソコンでやるよりGoogle Colaboratory使ったほうがいいと思います。

【ディープラーニング入門】PyTorchのクイックスタートを「あやめの特徴量」でやる
PyTorchは、Pythonで書かれたオープンソースの機械学習ライブラリです。ニューラルネットワークを実装するためのAPIを提供し、ニューラルネットワークを簡単に実装できるように設計されてます。この記事の目的は2つPyTorchチュートリ…
Pythonのプログラムをコピペして実行する方法【プログラムしたことない人向け】
インストールなしでPythonが実行できるGoogle Colaboratoryを使えばコピペでPythonのプログラムが簡単に実行できます。右クリックで貼り付けられないときの対策もご紹介します。Web上で動くのでMacでも動きます。注意点…

VSCodeでファイルの変更ができない

開発環境が完成して無事Vueの基本画面が出せてもファイル変更してセーブしようとすると権限がないというエラーがでました。
こちらのサイトの対策「WSLのデフォルトユーザーを「root」に変更」で変更できるようになりました。
WSL+VSCodeの「NoPermissions (FileSystemError): Error: EACCES: permission denied」の解決方法
この記事の中に、以下注意書きがありましたので注意してください。

この記事で紹介する方法は、あくまで『ローカル環境に構築しているLinuxの開発環境だからこそ』という感じの方法です。実際のサーバー上でやる場合は注意して下さい。

https://my-web-note.com/wsl-vscode-develop/#wslvscodenopermissions-filesystemerror-error-eacces-permission-denied

rootユーザーはこちらを参考に作りました。
【Ubuntu】rootユーザーで「ログイン」する方法!パスワード設定のやり方は?
毎回ubuntuを立ち上げるとデフォルトユーザーを「root」になるので変更方法を調べました。

root@yyy:/home# ではなくroot@yyy:~#になっているときは
cd /homeでroot@yyy:/home#になります。

su - ユーザーを変更する - Linuxコマンド
一般ユーザーに変更、例ユーザー名xxx、忘れた場合\\wsl.localhost\Ubuntu\etc\passwdをメモ帳などで開く。私の場合以下のユーザー名のところに書いてあった。
略
pollinate:x:111:1::/var/cache/pollinate:/bin/false
ユーザー名:x:1000:1000:,,,:/home/dtakashin:/bin/bash
rtkit:x:112:119:RealtimeKit,,,:/proc:/usr/sbin/nologin
略
yyyは入力することはないがパソコンに設定されているユーザー名のようです。

root@yyy:/home# su - xxxで
↓一般ユーザーへ
xxx@yyy:~$
xxx@yyy:~$ su
Password:
↓rootユーザーへ
root@yyy:/home/# cd xxx
root@yyy:/home/xxx#
目次へ

止め方と再開の方法

正しいやり方かはわかりません。自己責任でやってください。
止め方
VSCodeのファイル→リモート接続またはフォルダを閉じる
Docker Desktopで該当するcontainerをstop

再開の仕方
Docker Desktopを立ち上げる
該当するcontainerをstart
VSCodeを立ち上げる
ファイル→最近使用した項目→該当するものをクリック
VSCodeのターミナルで

コンテナの中に入る方法
起動中のコンテナ確認CONTAINER_IDを調べるため
docker container ls
コンテナに入る
docker container exec -it [CONTAINER_ID] bash
例
docker container exec -it 25fc0617bb19 bash
ファイル変更もできた。Docker Dsktop立ち上げVSCodeで最近使用した項目から探す。次の日もできた。
目次へ

削除方法

最初のうちはいろいろ試すと思うのでファイルやディレクトリを削除する機会が増えると思います。私がやってるやり方です。Windowsの感覚でexploreを使って削除はubuntuとの整合が取れなくなりそうでやらないようにしています。
Docker Desktopのcontainersで削除したいコンテナをゴミ箱へ
Docker Desktopのimagesで削除したいイメージをremove(右隅に3点メニューをクリックすると出てくる)

コマンドでDockerイメージ削除や確認方法
参考サイト

不要なDockerイメージを整理して容量を削減した
こんばんは森田です。Docker はとても便利ですが仮想マシンを作っているので、イメージファイルが巨大です。先…
Docker のコンテナイメージを削除する (docker image rm/prune)
docker image rm (指定したコンテナイメージを削除する) 使い方 docker image pull や docker container run 経由でダウンロードした Docker イメージを削除するには、docker i...
ubuntu on Windowsで 確認$ docker image ls 削除$ docker image prune ダメな時、削除docker image rm イメージ名:タグ名 や イメージID

まだディレクトリやファイルがパソコンの中に残っています。Windowsのexploreで探して消すのではなく以下の方法でubuntuから消すほうがいいと思います。

ディレクトリ削除
ubuntu on windowsを立ち上げる
rootではlsしてもディレクトリが表示されない。
一般ユーザーでは権限がなくて削除できない。なので
上で紹介した方法で一般ユーザーに変更してまたrootユーザーに戻ってから削除するとうまくいきます。
lsでディレクトリ確認
rm -r ディレクトリ名

WSLとwindows間のファイル連携」にexploreから見る方法が書いてあるので消えているか確認できます。
目次へ

この記事を書いたイチゲを応援する(質問でもokです)
Vプリカでのお支払いがおすすめです。

MENTAやってます(ichige)

コメント

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