スポンサーリンク

Docker Desktop for Windowsを試してみる(3)Windows10でWindowsとwsl2間でのファイルのコピー

2022年1月28日

Windows10とWSL2とDocker Desktop for Windowsの関係

最初のきっかけはもう忘れましたが、以下の本を写経しながら、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のフォルダが開く
Windows10とWSL2のファイル共有

スポンサードリンク

Docker Desktop for Windows目次

  1. (1)WSL2とWindows Desktopのインストール
  2. (2)Swiftコンテナを作成してSwiftを動かしてみる
  3. (3)Windows10でWindowsとwsl2間でのファイルのコピー
  4. (4)Windows10+WSL2+DockerDesktopでJupyterLab環境構築してみる
  5. (5)Windows10+WSL2+DockerDesktopでWordPressを環境構築してみる
  6. (6)Windows10+WSL2+DockerDesktopでRuby on Rails7+PostgreSQLを環境構築してみる【2022年1月時点】
  7. (7)Windows10+WSL2+DockerDesktop + Ruby on Rails7をHerokuにデプロイ
  8. (8)Railsチュートリアル第4版(Rails5.1)の環境構築【2022年1月時点】
  9. (9)dbコンテナ内のpostgresqlの中身を確認する
  10. (10)ProgateのRubyonRails5学習レッスンの環境構築【2022年1月時点】
  11. (11)Windows10+WSL2+DockerDesktopでRuby on Rails7(TailwindCSS+importmap-rails)+PostgreSQLを環境構築してみる【2022年9月時点】
  12. 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を試してみる(1)WSL2とWindows Desktopのインストール」をご参照ください。

WSL2からWindows10のエクスプローラーを開く

例えば、私の環境では、WSL2のターミナル画面で  explorer.exe .  と入力すると、Windowsの方で次のような画面が開きます。Windows10とWSL2(DockerのホストOS)とのファイルのやり取りは、こちらで行うとよいと思われます。

explorer.exe .

Dockerの『ホストOS』と『コンテナ』の間のファイル共有の方法は、「ボリュームマウント」と「バインドマウント」の2つがある

バインドマウントの方法の例

引き続き、 「仕組みと使い方がわかる Docker&Kubernetesのきほんのきほん」 を写経していきます。

  1. DockerのホストOS(WSL2)でマウントするdirectoryを作成
  2. runコマンドでApacheコンテナを作成
  3. WindowsのChromeブラウザでApacheコンテナにアクセスして初期画面を確認
  4. バインドマウントしたフォルダ(Windowsから見える)に新たなindex.htmlを置く
  5. WindowsのChromeブラウザでApacheコンテナにアクセスしてindex.htmlが変更されたことを確認
  6. 後始末(コンテナの停止と削除。後で使用しないのであればイメージも削除)

作成するコンテナの情報(イメージという設計図から、コンテナという仮想環境っぽいものを作製する)

  • コンテナ名:apa000ex20
  • イメージ名:httpd
  • ポート番号:8090

やっていきます。

1.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 httpd

10秒くらいで以下の画面が出るので、アクセスを許可します。

なんだかコンテナができたようです。

Docker Desktopも以下のような画面になり、ちゃんとコンテナが起動中であることがGUIで確認できます。

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

Docker Desktop for Windows目次

  1. Docker Desktop for Windowsを試してみる(1)WSL2とWindows Desktopのインストール
  2. Docker Desktop for Windowsを試してみる(2)Swiftコンテナを作成してSwiftを動かしてみる
  3. Docker Desktop for Windowsを試してみる(3)Windows10でWindowsとwsl2間でのファイルのコピー
  4. Docker Desktop for Windowsを試してみる(4)Windows10+WSL2+DockerDesktopでJupyterLab環境構築してみる

スポンサーリンク

Docker

Posted by twosquirrel