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

この記事は約13分で読めます。
広告

パソコン買ったのでプログラミング環境を整えました。その様子です。Python、Django、Vueの環境を設定していきます。Dockerを使用します。その際ハマった点と解決策をご紹介します。Dockerやubuntu使うの今回が初めての私がネットで調べ試行錯誤した方法でやっていることをご承知ください。
先に行き詰った点と解決策を見てください。

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

買ったパソコン

広告

Python

私はPythonよく使うのでDockerではなくAnacondaインストールしてJupiterNotebook使うことにしています。使い慣れてるので。
Djangoを使うときはDockerでやろうと思います。
AnacondaでDjangoを使う場合は下の記事を参考にしてください。Pythonのvenvを使わないでもAnacondaで仮想環境が作れます。

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 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の下にターミナルが表示されるので、そこで参考リンク通りに実行します。
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だけを実行します。

エラーが出る場合
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

Vueの環境構築でうまくいった参考サイト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ファイルと空の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の下にターミナルが表示されるので、そこで参考リンク通りに実行します。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ではないので注意
目次へ

行き詰った点と解決策

メモリ不足対策

途中で止まる場合メモリが不足している可能性があります。
メモリ対策でこの2つのサイトを参考にしてwslで使用するメモリを1Gにしました。
https://pickerlab.net/2021/02/07/wsl2_docker/
https://zenn.dev/takajun/articles/4f15d115548899
私のパソコンは8GのメモリですがEdge、VSCodeなど一緒に立ち上げて80%から90%のメモリ使用量です。動作スピードは遅く感じません。メモリ4Gのパソコンはきついかもしれません。
.wslconfigファイルを以下にして使ってます。

[wsl2]
memory=1GB

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注意yyyは入力することはないがパソコンに設定されているユーザー名のようです。
root@yyy:~# 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イメージ削除や確認方法
参考サイト
不要なDockerイメージを整理して容量を削減した
こんばんは森田です。Docker はとても便利ですが仮想マシンを作っているので、イメージファイルが巨大です。先…
Docker イメージを削除する (docker image rm/prune) | まくまくDockerノート
天才星人まくのDockerノート
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)

コメント

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