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

パソコン買ったのでプログラミング環境を整えました。その様子です。Python、Django、Vueの環境を設定していきます。Docker導入でハマった点と解決策をご紹介します。Dockerやubuntu使うの今回が初めての私がネットで調べ試行錯誤した方法でやっていることをご承知ください。
先にDocker導入を考えている方は行き詰った点と解決策を見てください。最近使えてくるようになったのですが、余計な設定そぎ落として使うのがいいなと思ってます。（それではDoccker使う意味がないかもしれませんが）

個人的に環境構築で苦労したくない方はDocker使かわないほうがいいと思います。機械学習などはGoogle　Colaboratoryで全然十分です。それ以外も普段使うのはAnacondaのほうが使いやいと感じました。ということでAnacondaもDjangoやNode.jsを入れた仮想環境が作れるので紹介します。
またPython単独で使う場合はJupiterNotebook（Anaconda入れると入る）が1番便利だと思います。Python単独以外はAnacondaの仮想環境からVSCode呼び出して使ってます。
あとWindows11は１時間ぐらいで初期状態に戻せるので、初期状態に戻す前提で環境構築していくと安心です。パスワード関連の記録や重要なファイルをどこかに保存する必要はありますが。
私もウイルスに感染して初期状態に戻したんですが、余計なファイルがなくなってストレージ容量は回復できるし、すっきりしました。初心者の方はDockerで開発環境を作るのは、あまりおすすめしません。結構Docker自体の使い方ではまったので、本題のプログラムいじるところまでたどり着くのが大変でした。ただ余裕ができたら、いろいろ経験しておいたほうがいいと思うのでDockerもやった方がいいと思います。開発環境の手札が多いと開発環境が原因ではまったときの対応手段ができます。

Docker実行環境
Windows11　Home
WSL2（これからインストールします。）
Docker Desktop　v4.13.0（これからインストールします。）
VSCode（これからインストールします。）

買ったパソコン

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

Python、Django（Anaconda使用）

パソコンにPython環境構築するときはまず多分Python公式のここを見たほうがいいです。https://www.python.jp/index.html
私はPython環境構築で最初にAnacondaに出会ってしまったのでAnaconda使っています。便利なJupiterNotebookが使えるのがAnacondaしか使えないと思っていましたが。VsCodeでも拡張機能でJupiterNotebookが使えますが、単独で使ったほうが使いやすいです。
結局、使い慣れてるのでAnacondaにしました。
ただAnaconda使ううえで注意しなければならないのはcondaとpipです。私はpip１本でやっています。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一覧コマンド!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のほうがいいかもしれません。

AnacondaでDjangoを使う場合は下の記事を参考にしてください。Pythonのvenvを使わないでもAnacondaで仮想環境が作れます。
Djangoを使うときはDockerでやろうと思ったけど、Anacondaのほうがいいです。

AnacondaでDjangoアプリを作る

以下を参考にプロジェクトが作れるところまでやります。エディタはVSCodeを使っています。（VSCodeがあればSpyderはインストールしなくていいです。）
【Python】「Anaconda」で「Django」の開発環境を作る。
Anaconda仮想環境でVSCodeを使うには
【Python】「Django」プロジェクトを作成して、起動してみる。
の「Djangoプロジェクトを作成する。」までやり出来上がったプロジェクトフォルダをVSCodeのファイル→フォルダーを開くでやっていけます。Python拡張機能のエラーが2つ出ますが×で大丈夫でした。
ターミナルは「Environments」→「該当の仮想環境」→「Open Terminal」で使えます。

個人的メモ
DjangoRestframework3.10.0を使うときpython manage.py runserverでエラーが出ました。pip install Django==2.2.3で古いバージョンに戻すと動きます。（最初は3.*）（Pythonは3.9.15）ただmigrateなどでエラーらしきものはでます、でも動くのでそのままつかってます。またRenderにデプロイするときはDjangoのバージョンは4.1.2でデプロイしています。ローカルではやっていないですけど、うまくいくのかもしれません。

OpenCV

Dockerなど試しましたがうまくいかないので、私は、以下の方法で使っています。
Anacondaの仮想環境+VSCodeの拡張機能でJupiterNotebook
AnacondaでOpenCVの仮想環境で作る。
参考
https://python.blueskyzz.com/opencv/opencv_install/
VSCodeの拡張機能でJupiterNotebook
参考、以下のVSCode + Jupyter 拡張機能の準備（AnacondaのJupiterNotebookと共存できます）
https://www.sukerou.com/2021/10/anaconda-opencv.html
この環境で以下実行できました。

ネットで調べたサンプルコート組み合わせたWebカメラでQRコード読み込み

#Webカメラでリアルタイム読み込みQRコード読み込み
import cv2
import winsound
# カメラデバイス取得
cap = cv2.VideoCapture(0)
# QRCodeDetectorを生成
detector = cv2.QRCodeDetector()

while True:
    # カメラから1フレーム読み取り
    ret, frame = cap.read()
    # 画像を表示する
    cv2.imshow("Image", frame)
    # QRコードを認識
    data = detector.detectAndDecode(frame)

    # 読み取れたらデコードした内容をprint
    if data[0] != "":
        print(data[0])
        winsound.Beep(440,500)
        break

    # ウィンドウ表示
    # cv2.imshow('frame', frame)

    # Qキー押すと終了
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

# 終了処理
cap.release()
cv2.destroyAllWindows()

実行すると15秒ほどして別ウィンドウに画像が表示されます。
ちなみにWebカメラリアルタイム画像はmatplotlibを使ってJupiterNotebookで表示する方法はうまくいきませんでした。また*.pyにしてpython *.pyで実行する方法も動きはするもののエラーになりました。
目次へ

Vue（AnacondaでNode.js使用）

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

ターミナルで
cd プロジェクトのあるディレクトリ
code .でVSCodeが立ち上がります。
VSCodeの表示→ターミナルでもう1個ターミナルが開くので、それぞれDjangoとNode.jsでターミナルを使えます。

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

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

VScodeをインストールします。
【VS Code】インストール手順を解説【Windows/M1 Mac対応】
【VS Code】オススメの設定・拡張機能・便利機能・ショートカット【Win/Mac対応】

パソコン1台でリモート開発（私は、やってみただけで使っていない）

目的はDjangoをインストールするためにやりましたが別の方法で使うことにしました。この方法だと遅い。
流れ的にこちらの方法で、まずいろいろインストールしたので。以降の内容と整合が取れなくならないようにやったことだけ書いておきます。
【VS Code】Dockerコンテナの環境でリモート開発【Win/Mac】
1台のパソコンでDockerとVSCodeを使用する場合も、このリモート接続でできます。
【Python+Django4】VS Code+Dockerで簡単構築【リモート開発】【Win/Mac】
exploreでDjangopjプロジェクトフォルダ作成
「.devcontainer」フォルダを作成、以下2つファイル作成
├ .devcontainer/
|　├ devcontainer.json
|　└ Dockerfile
└ ここにDjangoのプロジェクト（django-admin startproject プロジェクト名 .またはgitcloneで持ってくる）
左下緑クリックすると「Open Folder in Container…」を選択します。
フォルダを開くのは「.devcontainer」ではなくDjango2_2_3を選択。

リモートの説明(以前Remote-Container今はDev Containersになっている）
https://zenn.dev/kcabo/articles/c4f9b7fecc503a
目次へ

Django（Dockerを使用）

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

docker docsにDjangoのサンプルがあるのでそれでできました。上のリモートの方法より速いです。
クィックスタート: Compose と Django　
ググルと古いのが出ますが、ここは新しくてうまくいきます。やり方を補足します。

手順
Docker　Dsktop立ち上げ
ubuntu　on　Windows立ち上げ

一般ユーザーへ変更後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)が選択できるので、クリックします。

settings.pyでデータベースをsqlite3からPostgressqlに変更しているので最初からあるSQLite3はコメントアウトしておきましょう。
# DATABASES = {
#     'default': {
#         'ENGINE': 'django.db.backends.sqlite3',
#         'NAME': BASE_DIR / 'db.sqlite3',
#     }
# }
動きはしますが、そのあとpython manage.py～でやる作業のやり方がわかりません。
ということで、それができるようにしました。次項。

クイックスタートのdjango-admin startproject composeexampleを後でやる方法

Docker Desktopで上で作ったコンテナとイメージを削除してください。
もう一度、以下の部分を変えて最初からやります。
Dockerfile、requirements.txtは、そのままでdocker-compose.ymlのcommandを以下のように削除します。

docker-compose.yml

version: "3.9"

services:
  db:
    image: postgres
    volumes:
      - ./data/db:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
  web:
    build: .
    # command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    environment:
      - POSTGRES_NAME=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
    depends_on:
      - db

Django プロジェクトの生成のところは

sudo docker-compose run web django-admin startproject composeexample .
ではなく　↓↓↓↓
sudo docker-compose run --rm -p 8000:8000 web bash
#「–rm」オプションは、Dockerコンテナが終了したときに自動的に削除されるように指定するオプションです。このオプションを使用することで、コンテナが終了した後に不要なコンテナが残らないようにすることができます 。
#最後、表示しない対策「-p 8000:8000」とポートを指定しないとymlで書いても有効にならないらしい。やり方違うけど参考https://blog.ikedaosushi.com/entry/2018/07/23/191952

これを実行するとターミナルのコマンド入力が
root@yyy:/home/xxx/django#　から
root@d6aaff687556:/code#に変わります。コンテナの中に入った状態。d6aaff687556はコンテナーID。

データベースへの接続設定のsettings.pyの書き換えはクイックスタートと同じです。
#プロジェクト作成
django-admin startproject composeexample .

#実行
#後ろの0.0.0.0:8000は別の開発環境では付けたことないのですが必要です。urlとportの指定のように見えますがrunserver（多分、アプリケーションサーバー）の設定のようです。実際アドレスバーにhttp://0.0.0.0:8000/と入れても表示しません。
http://127.0.0.1:8000/だと表示します。
参考https://codor.co.jp/django/runserver-0000
 https://jisou-programmer.beproud.jp/%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF/105-127.0.0.1%E3%81%A80.0.0.0%E3%81%AE%E9%81%95%E3%81%84.html

python manage.py runserver 0.0.0.0:8000

CTRL+Cで停止
root@yyy:/home/xxx/django#　の状態に戻すにはexit
そうするとwebのコンテナーは削除されます。
dbは残ったまま。
再開するには
sudo docker-compose run --rm -p 8000:8000 web bash
でもいいですが毎回削除されるのではなく残すには--rmを消したコマンドで実行。
sudo docker-compose run -p 8000:8000 web bash
exitで出てもコンテナはのこっています。

再開してコンテナの中に入るにはdocker container ls -aで存在するコンテナーをすべて表示させます。-aをつけないと実行中コンテナーのみ表示するので停止中は表示しません。
コンテナのNAMESの名前を確認し
docker container start quick-web-run-54ee741ba912
でコンテナが再開されます。
コンテナの中に入るにはCONTAINER IDを確認し
docker container exec -it f45be4e66954 bash
でコンテナの中に入れます。

実際の画面のコピペです。
root@f45be4e77954:/code# exit
exit
root@yyy:/home/xxx/quick# docker container ls -a
CONTAINER ID   IMAGE       COMMAND                  CREATED         STATUS                     PORTS      NAMES
f45be4e77954   quick-web   "bash"                   4 minutes ago   Exited (0) 3 minutes ago              quick-web-run-54ee725ba912
54eea99d519d   postgres    "docker-entrypoint.s…"   13 hours ago    Up 32 minutes              5432/tcp   quick-db-1
root@yyy:/home/xxx/quick# docker container start quick-web-run-54ee725ba912
quick-web-run-54ee725ba912
root@yyy:/home/xxx/quick# docker container exec -it f45be4e77954 bash
root@f45be4e77954:/code# 

よく間違うのが
python manage.py runserver 0.0.0.0:8000で実行したとき、ターミナルにStarting development server at http://0.0.0.0:8000/と出るのでhttp://0.0.0.0:8000/をブラウザで見ても何も表示しません。
ブラウザで見るのはhttp://127.0.0.1:8000/です。

こちらのサイトhttps://it-dxblog.com/django-docker/を参考にさせていただきました。
こちらのサイトも補足しておくと私がやった環境ではDev Containersはなくても大丈夫でした。

docker compose run --rm web bashでは
最後のブラウザで 「http://0.0.0.0:8000」としても何も表示されましたが、以下に変更したら表示しました。
docker compose run --rm -p 8000:8000 web bash

python manage.py runserver 0.0.0.0:8000を実行したとき
Error: That port is already in use.が出るときがあります。
そういう時は
Windows標準のpowersherllを立ち上げ（ubuntuではないので注意）
netstat -ano | findstr 8000

とするとportの8000が、すでに使われているということがわかる。
  TCP         0.0.0.0:8000           0.0.0.0:0              LISTENING       3088
  TCP         [::]:8000              [::]:0                 LISTENING       3088
  TCP         [::1]:8000             [::]:0                 LISTENING       1532
コンテナーを停止させnetstat -ano | findstr 8000を実行して何も動いてない（表示しない）ことを確認して、もう一度コンテナーを起動すると直る。
エラーが出るときにtaskkill /F /pid 3088で強制的にportを停止させるとおかしくなったので、
どうしてもダメなときはコンテナを削除して作り直す。

またDockerが動いていないかつ、コンテナの中に入っていない状態のroot@yyy:/home/xxx#でもDjangoが実行できました。どうやらubuntuにPythonとDjangoをインストールしてしまったようです。Error: That port is already in use.が出るときはコンテナとubuntuのDjangoを同時に動かしている時かもしれません。
またubuntuのDjangoで動かしてしまったあとも、プロジェクトを消さないで、あとからDockerfileなどを追加して新しくDockerコンテナを作れます。

必要最小限のファイル

Postgressを使用しないでSqliteでいいならば、以下の3つで大丈夫です。
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

version: "3.9"

services:
  web:
    build: .
    volumes:
      - .:/code
    ports:
      - "8000:8000"

requirements.txt

Django

この記事を書いたイチゲを応援する（質問でも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でアクセスされた情報をキャッシュすることがあるようでブラウザのキャッシュをクリアしたら直った。ブラウザのキャッシュをクリアすると、ログイン状態のサイトがログアウトになるので再度ログインできるようにパスワードなどチェックしておいてください。

2023/6/19うまくいかないので削除（一応残す）

起動中のコンテナにコマンドを実行する方法は、別のターミナルを開いて以下実行。
例　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　Dsktop立ち上げ
ubuntu　on　Windows立ち上げ

一般ユーザーへ変更後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立ち上げ

一般ユーザーへ変更後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

行き詰った点と解決策（Docker使用時）

メモリ不足対策

追記：ここは機械学習やらなければ不要だと思います。
途中で止まる場合メモリが不足している可能性があります。
メモリ対策でこの２つのサイトを参考にして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使ったほうがいいと思います。

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」になるので変更方法を調べました。Dockerで上の作業をするときはこれで問題ありませんが、ファイルを消したいときなどrootのままだとlsと打っても何もでてこないです。元のユーザーへ変更すると今まで通り使えます。なので切り替えながら使ってます。

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# ではなくroot@yyy:~#になっているときは
cd /homeでroot@yyy:/home#になる。

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はとても便利ですが仮想マシンを作っているので、イメージファイルが巨大です。先…
www.gaji.jp
Docker イメージを削除する (docker image rm/prune) | まくまくDockerノート
天才星人まくのDockerノート
maku77.github.io
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）