Docker Desktop for Windowsを試してみる（３）Windows10でWindowsとwsl2間でのファイルのコピー
最初のきっかけはもう忘れましたが、以下の本を写経しながら、Docker Desktop for Windowsを触っていこうと思います。
Windowsなので、Dockerのホスト環境としてWSL2のUbuntu-20.04を用いています。
そこで、気になるのは、Windows10のフォルダの場所と、WSL2のUbuntuのディレクトリのどこの場所が対応するのかということです。
上記の本にも、以下の記事にも記載がありましたので、こちらにもメモっておきます。
https://qiita.com/Uchitaso/items/6e0a7859e87bb8bdb527
@Uchitasoが2020年03月25日に更新wsl2でよく使う、windowsとlinux間のファイル移動やコマンド実行。
- エクスプローラを立ち上げアドレス欄に
\\wsl$と入力すると、起動中のディストリビューションのファイルシステムがフォルダとして見えて、アクセスできる。 - linuxから見た場合、windowsのシステムドライブは
/mnt/の下にマウントされて見える - linux上で、
explorer.exe .すると、Windowsのフォルダが開く
Docker Desktop for Windows目次
- （１）WSL2とWindows Desktopのインストール
- （２）Swiftコンテナを作成してSwiftを動かしてみる
- （３）Windows10でWindowsとwsl2間でのファイルのコピー
- （４）Windows10＋WSL2+DockerDesktopでJupyterLab環境構築してみる
- （５）Windows10＋WSL2+DockerDesktopでWordPressを環境構築してみる
- （６）Windows10＋WSL2+DockerDesktopでRuby on Rails7+PostgreSQLを環境構築してみる【2022年1月時点】
- （７）Windows10＋WSL2+DockerDesktop + Ruby on Rails7をHerokuにデプロイ
- （８）Railsチュートリアル第4版(Rails5.1)の環境構築【2022年1月時点】
- （９）dbコンテナ内のpostgresqlの中身を確認する
- （10）ProgateのRubyonRails5学習レッスンの環境構築【2022年1月時点】
- （11）Windows10＋WSL2+DockerDesktopでRuby on Rails7(TailwindCSS+importmap-rails)+PostgreSQLを環境構築してみる【2022年9月時点】
- Windows10+WSL2(Ubuntu20.02)でRails7+tailwindcss+jsbundling-rails環境構築【2022年9月時点】
開発環境
Windows 10 Pro 1909
Windows Docker Desktop 4.0.0
VisualStudioCode (wsl用の拡張機能インストール済み)
WSL2 Ubuntu 20.04 LTS
VisualStudioCode (+拡張機能 )『Wndows Docker Desktop』＋『WSL2のUbuntu』＋VSCodeのセットアップについては「Docker for Windowsを試してみる（１）WSL2とWindows Desktopのインストール」をご参照ください。
WSL2からWindows10のエクスプローラーを開く
例えば、私の環境では、WSL2のターミナル画面で explorer.exe . と入力すると、Windowsの方で次のような画面が開きます。Windows10とWSL2（DockerのホストOS）とのファイルのやり取りは、こちらで行うとよいと思われます。
explorer.exe .
Dockerの『ホストOS』と『コンテナ』の間のファイル共有の方法は、「ボリュームマウント」と「バインドマウント」の２つがある
バインドマウントの方法の例
引き続き、 「仕組みと使い方がわかる Docker＆Kubernetesのきほんのきほん」 を写経していきます。
- DockerのホストOS（WSL2）でマウントするdirectoryを作成
- runコマンドでApacheコンテナを作成
- WindowsのChromeブラウザでApacheコンテナにアクセスして初期画面を確認
- バインドマウントしたフォルダ（Windowsから見える）に新たなindex.htmlを置く
- WindowsのChromeブラウザでApacheコンテナにアクセスしてindex.htmlが変更されたことを確認
- 後始末（コンテナの停止と削除。後で使用しないのであればイメージも削除）
作成するコンテナの情報（イメージという設計図から、コンテナという仮想環境っぽいものを作製する）
- コンテナ名：apa000ex20
- イメージ名：httpd
- ポート番号：8090
やっていきます。
１．DockerのホストOS（WSL2）でマウントするdirectoryを作成します。今回は、先ほど、WSL2のターミナル画面で、 explorer.exe . と入力して出てきたWindows10のエクスプローラーの
ネットワーク > wsl$ > Ubuntu-20.04 > home > adash333 > sample
の上の、adash333 フォルダへ移動し、
右クリック ＞ 新規作成 ＞ フォルダー
の順にクリックし、「apa_folder」という名前で新規フォルダを作成しました。
apa_folder のをダブルクリックして開いておきます。
2.runコマンドでApacheコンテナを作成
上記を参考に、VSCodeのターミナル画面で、以下を入力します。
docker run --name apa000ex20 -d -p 8090:80 -v /home/adash333/apa_folder:/usr/local/apache2/htdocs httpd10秒くらいで以下の画面が出るので、アクセスを許可します。
なんだかコンテナができたようです。
Docker Desktopも以下のような画面になり、ちゃんとコンテナが起動中であることがＧＵＩで確認できます。
3.WindowsのChromeブラウザでApacheコンテナにアクセスして初期画面を確認
Windows10のChromeで、http://localhost:8090/ を開くと、以下のような画面が出てきます。
このとき、 \wsl$\Ubuntu-20.04\home\adash333\apa_folder の中身は空（から）です。
4.バインドマウントしたフォルダ（Windowsから見える）に新たなindex.htmlを置く
WindowsでC:/直下に、C:/docker/ フォルダを作成し、そのフォルダをVSCode(WSL2で起動したものとは別の画面を作成)で開きます。
C:/docker/ の中に、index.htmlを新規作成し、以下を入力して保存します。
<!DOCTYPE html>
<html>
<head>
<title>初めてのDocker</title>
</head>
<body>
<h1>初めてのDocker</h1>
<p>Windows10 + WSL2 + Docker Desktop for Windows</p>
</body>
</html>
C:/docker/index.html を、\wsl$\Ubuntu-20.04\home\adash333\apa_folder の中にドラッグ&ドロップします。
以下のようになります。
5.WindowsのChromeブラウザでApacheコンテナにアクセスしてindex.htmlが変更されたことを確認
再度、 Windows10のChromeで、http://localhost:8090/ を開くと、以下のような画面に変わりはしましたが、文字化けしてしまいました。
<head></head>の中に、 <meta charset="UTF-8″> を入れて、apa_folderにコピーして上書きしたら、以下のように文字化けは直りました。
修正後のindex.html
6.後始末（コンテナの停止と削除。後で使用しないのであればイメージも削除）
WSL2のターミナル画面で、以下を入力して、今回作成したコンテナの停止と削除を行います。
参考
https://atmarkit.itmedia.co.jp/ait/articles/2103/23/news007.html
