パソコン買ったのでプログラミング環境を整えました。その様子です。Python、Django、Vueの環境を設定していきます。Dockerを使用します。その際ハマった点と解決策をご紹介します。Dockerやubuntu使うの今回が初めての私がネットで調べ試行錯誤した方法でやっていることをご承知ください。
先に行き詰った点と解決策を見てください。
個人的にはインストールが大変そうなライブラリをためすときぐらいしかDocker使用しなくなりました。機械学習などはGoogle Colaboratoryで全然十分です。それ以外も普段使うのはAnacondaのほうが使いやいと感じました。ということでAnacondaもDjangoやNode.jsを入れた仮想環境が作れるので紹介します。
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しか使えないと思っていましたが。どうも公式版Pythonでも使えるみたいですね（公式版Python使ったことないのでよくわからない）。
結局、使い慣れてるので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 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を使っています。
【Python】「Anaconda」で「Django」の開発環境を作る。
Anaconda仮想環境でVSCodeを使うには下の「Djangoプロジェクトを作成する。」までやり出来上がったプロジェクトフォルダをVSCodeのファイル→フォルダーを開くでやっていけます。Python拡張機能のエラーが2つ出ますが×で大丈夫でした。
【Python】「Django」プロジェクトを作成して、起動してみる。
ターミナルは「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でデプロイしています。ローカルではやっていないですけど、うまくいくのかもしれません。
Vue（AnacondaでNode.js使用）
Node.jsがAnacondaの仮想環境で簡単にインストールできるのでVueの開発環境もできます。Node.jsをAnacondaの仮想環境にインストールする方法は上のDjangoと同じでNode.jsを選んでApplyするだけです。そのあとはvenvで作った仮想環境と同じようにVueの開発環境が作れます。venvでの開発環境構築はネットに情報がたくさんあるのでNode.jsがインストールされた状態の手順からやればAnacondaでも構築できます。
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',
# }
# }コンテナの中に入らないとアプリケーションが作れません。
表示→ターミナル。>クリック→Ubuntu(WSL)で,もう1個ターミナルを立ち上げます。
コンテナが動いてる状態（Docker Desktopでcontainersで該当するコンテナのactionのところが■になっている状態。▷は止まっている状態なので押す。）
こちらの方法でコンテナの中に入ります。
python manage.py startapp アプリ名
exploreを最新表示するボタンを押すと追加したアプリのディレクトリが表示されます。
python manage.py migrateなどもできます。
目次へDjango 前に作ったプロジェクトをgit cloneする方法
次に前に作ったプロジェクトを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（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: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を同じ階層に作る。あとは参考サイト通り。
最後アクセスする先はhttp://localhost/またはhttp://localhost:80です。8080ではないので注意
目次へ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/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イメージ削除や確認方法
参考サイト
www.gaji.jp
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から見る方法が書いてあるので消えているか確認できます。
目次へ
この記事を書いたイチゲを応援する
Vプリカでのお支払いがおすすめです。
MENTAやってます（ichige）
コメント