WSL2、Docker、VSCodeで劇的に改善されるWindows開発環境/wslvscodedocker-techlab

by Noriyuki TAKEI

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

© SIOS Technology, Inc. All rights Reserved. About Me 3 BCPVUNF Noriyuki TAKEI ෢Ҫ ٓߦ Information • サイオステクノロジー株式会社 • Microsoft MVP for Azure • VS Code Meetup Organizer Favorites • Azure • Squash • Sweets blog https://tech-lab.sios.jp/ core skill Cloud Native, Serverless全般 Twitter @noriyukitakei

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© SIOS Technology, Inc. All rights Reserved. Windowsによる開発の歴史 13 ⼀つの開発環境を共有 Webサーバー Linux Runtime (JavaやPHPなどのアプリケーション実⾏環境) Middleware(ApacheやTomcatなど) ソースコード public void hello() { system.out.println(“Hello!!”); } 本セッションのブログのURL ftp ftp ftp ftp ftp ftp ftp ftp ftp ftp

Slide 14

Slide 14 text

© SIOS Technology, Inc. All rights Reserved. Windowsによる開発の歴史 14 本セッションのブログのURL Windows上に開発に必要なミドルウェアを構築 Windows PHP Apache ソースコード Windows PHP Apache ソースコード Windows PHP Apache ソースコード Windows PHP Apache ソースコード Windows PHP Apache ソースコード Windows PHP Apache ソースコード

Slide 15

Slide 15 text

© SIOS Technology, Inc. All rights Reserved. Windowsによる開発の歴史 15 仮想環境によるアプローチ Windows PHP Apache ソースコード仮想環境ソースコード Windows PHP Apache ソースコード仮想環境ソースコード Windows PHP Apache ソースコード仮想環境ソースコード Windows PHP Apache ソースコード仮想環境ソースコード Windows PHP Apache ソースコード仮想環境ソースコード Windows PHP Apache ソースコード仮想環境ソースコード本セッションのブログのURL

Slide 16

Slide 16 text

© SIOS Technology, Inc. All rights Reserved. Windowsによる開発の歴史 16 ⼀つの開発環境を共有 Windows上に開発に必要なミドルウェアを構築仮想環境によるアプローチ実⾏環境の差異環境構築の⼿間環境の独⽴性 ◯ Linuxの環境をみんなで共有するので、実⾏環境の際はない。 ◯ 既に出来上がっている環境をみんなで共有するので、開発者が環境構築しなくてよい。 ☓ みんなで1つの環境を共有するので、誰かが変なコード上げたりすると、環境が動かなくなる。 ☓ Windowsなので、本番環境がLinuxの場合、差異が⼤きくある。 ☓ Windows上にランタイムとかミドルウェアインストールするので超⼤変。 ◯ 開発者専⽤の環境なので、何をやっても他のユーザーに影響はなし。 ◯ 仮想環境上のOSを本番のものと合わせれば、実⾏環境の際はない ☓ 仮想環境上にOSからインストールするので、超⼤変。 ◯ 開発者専⽤の環境なので、何をやっても他のユーザーに影響はなし。ポータビリティ ☓ OSのイメージが⼤きすぎるので、なかなかに他の環境に簡単に移⾏できない。 ☓ OSのイメージが⼤きすぎるので、なかなかに他の環境に簡単に移⾏できない。 ☓ OSのイメージが⼤きすぎるので、なかなかに他の環境に簡単に移⾏できない。

Slide 17

Slide 17 text

Slide 18

Slide 18 text

© SIOS Technology, Inc. All rights Reserved. Windowsによる開発の歴史 18 Windows Subsystem for Linux Windowsの中でLinuxを実⾏できるテクノロジーです。 Virtual Boxなどの仮想環境に⽐べて⾼速に起動、相互のファイルアクセスなどWindowsとの親和性が⾼いのが特徴です。 Visual Studio Code マイクロソフトによって開発され、Windows、Mac、 Linuxなど様々な環境で動作します。また、動作も軽量で、プラグインによって⾃由に機能拡張できるのが特徴です。 Docker コンテナ仮想化を使って、アプリケーションを開発・配置・実⾏するためのオープンソースソフトウェアです。後ほど詳しく説明します。

Slide 19

Slide 19 text

Slide 20

Slide 20 text

© SIOS Technology, Inc. All rights Reserved. Windowsによる開発の歴史 20 WSLのインストール Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. 新しいクロスプラットフォームの PowerShell をお試しください https://aka.ms/pscore6 PS C:\Windows\system32> Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux この操作を完了するために、今すぐコンピューターを再起動しますか? [Y] Yes [N] No [?] ヘルプ (既定値は "Y"): 本セッションのブログのURL PowerShellのWindowが表⽰されるので、以下のコマンドを実⾏して下さい。再起動の有無を聞かれますので、Yを⼊⼒し、エンターを押して下さい。

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

© SIOS Technology, Inc. All rights Reserved. Windowsによる開発の歴史 28 本セッションのブログのURL 以下のURLにアクセスし、Windows10⽤のインストーラーをダウンロードして下さい。ウィザードに従うだけで簡単にインストール出来ます。 https://code.visualstudio.com/download Visual Studio Codeのインストール

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

© SIOS Technology, Inc. All rights Reserved. WSL1＆2のしくみ 35 特にファイルアクセスが⾮常に簡単です。Virtual Boxでも、Sambaなどの CIFSプロトコルに対応したサーバーを⽴てれば、もちろん可能ですが、その設定は煩雑です。WSLは特定のパスにアクセスするだけで、WSL(Linux) 上のファイルにアクセスができます。 Windows – Linux間の親和性 WSLのメリットはこんなにたくさんあります︕︕ WSLの起動は、ほぼ⼀瞬です。Virtual Boxなどの仮想環境は、昨今のOSの起動が早くなったとはいえ、WSLには遠く及びません。開発においてLinux の環境が必要になったとき、たとえ5秒待たされるのさえストレスに感じます。⾼速起動 Virtual Boxを始めとした仮想環境は、ネットワークやストレージ、メモリを始めとした各種リソースの設定、それからOSやミドルウェアのインストール、設定と、かなりの⼿間と時間を要します。それと⽐べて、WSLを導⼊するまでは10分程度で、OSインストール済みの環境が出来上がります。導⼊の容易さ

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

© SIOS Technology, Inc. All rights Reserved. WSL1＆2のしくみ 39 本セッションのブログのURL WSL1のアーキテクチャ Linuxカーネルのファンクションコールが、 LXCoreというシステムによって、Windows へのファンクションコールに変換されて、動作している。 Linuxカーネルは存在しない。LXCoreにより擬似的にLinuxっぽくしている。そのため、Linuxのファンクションコールに強く依存するDockerなどは動作しない。

Slide 40

Slide 40 text

© SIOS Technology, Inc. All rights Reserved. WSL1＆2のしくみ 40 本セッションのブログのURL WSL2のアーキテクチャ Hyper-Vベースの仮想マシンサービス上に Linuxカーネルを搭載したOSが動作する。 Hyper-Vは、WSL2専⽤にカスタマイズされた軽量なものであり、さらにLinuxカーネルもマイクロソフト独⾃パッチを当てることで軽量化を実現している。ネイティブなLinuxカー熱で動作するので、 Dockerも動作する︕︕

Slide 41

Slide 41 text

Slide 42

Slide 42 text

© SIOS Technology, Inc. All rights Reserved. WSL1＆2のしくみ 42 本セッションのブログのURL WSL1とWSL2のパフォーマンステスト(Linux→Linux) ■ WSL1 (300MB書き出すのに0.18秒) $ time dd if=/dev/zero of=test bs=1k count=300000 300000+0 records in 300000+0 records out 307200000 bytes (307 MB, 293 MiB) copied, 1.79515 s, 171 MB/s real 0m1.839s user 0m0.125s sys 0m1.641s ■ WSL2 (300MB書き出すのに0.05秒) $ time dd if=/dev/zero of=test bs=1k count=300000 300000+0 records in 300000+0 records out 307200000 bytes (307 MB, 293 MiB) copied, 1.79515 s, 171 MB/s real 0m1.839s user 0m0.125s sys 0m1.641s

Slide 43

Slide 43 text

© SIOS Technology, Inc. All rights Reserved. WSL1＆2のしくみ 43 本セッションのブログのURL WSL1とWSL2のパフォーマンステスト(Linux→Windows) ■ WSL1 (300MB書き出すのに0.19秒) # time dd if=/dev/zero of=/mnt/c/data/test bs=1k count=300000 300000+0 records in 300000+0 records out 307200000 bytes (307 MB, 293 MiB) copied, 1.96355 s, 156 MB/s real 0m1.979s user 0m0.063s sys 0m1.813s ■ WSL2 (300MB書き出すのに1分45秒) # time dd if=/dev/zero of=/mnt/c/data/test bs=1k count=300000 300000+0 records in 300000+0 records out 307200000 bytes (307 MB, 293 MiB) copied, 105.718 s, 2.9 MB/s real 1m45.729s user 0m3.770s sys 0m26.386s

Slide 44

Slide 44 text

© SIOS Technology, Inc. All rights Reserved. WSL1＆2のしくみ 44 本セッションのブログのURL まとめますと、以下のとおりです。 WSLからWindowsへのファイルアクセスが多い場合は、WSL1のほうがいい。 WSL1ではWindows側のファイルアクセスにDrvFsというプロコトルを使っており、WSL2ではPlan 9 Filesystem Protocol(9P)というプロトコルを利⽤しています。このプロトコルの性能差が原因と思われる。 MSの公式ドキュメントにも記載がある。 https://docs.microsoft.com/en-us/windows/wsl/compare- versions#exceptions-for-using-wsl-1-rather-than-wsl-2

Slide 45

Slide 45 text

© SIOS Technology, Inc. All rights Reserved. WSL1＆2のしくみ 45 本セッションのブログのURL 項⽬ WSL1 WSL2 実現⽅式 LXCoreによるコマンドの変換 Linuxカーネル Windows10 Home 利⽤可能利⽤可能仮想マシン⽀援機能不要必要セットアップ WSLインストール後すぐ利⽤可能 WSLインストール後、 WSL2への変換が必要ファイルアクセス (Linux→Linux) 低速⾼速ファイルアクセス (Linux→Windows) ⾼速低速

Slide 46

Slide 46 text

Slide 47

Slide 47 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 47 本セッションのブログのURL ユースケースその1︓WSLを使ったWindowsとLinux間のシームレスな開発本章のタイトルにもなっており、最もご紹介したいユースケースです。WSL を使ったWindowsとLinux間の実践的開発⽅法を説明します。まず、以下のような開発の要件があるとします。 • 開発⾔語はPHP • WebサーバーはApache • アプリケーションの実⾏基盤(OS)はLinux まずはWSLの利便性をご理解頂くために、あえてWSLを使わずに、Virtual Boxなどの仮想環境を使って開発するケースを考えてみます。そして、その次にWSLを使って開発するケースを説明し、その両者を⽐較することで、WSL のメリットをご理解頂けたらと思います。

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 50 本セッションのブログのURL ユースケースその1︓WSLを使ったWindowsとLinux間のシームレスな開発百聞は⼀⾒に如かずということで、実際に構築してみます。 Windowsの左下の検索ボックスに「Ubuntu」と⼊⼒すると、第1章でインストールした「Ubuntu 18.04 LTS」が表⽰されるので、それをクリックします。すると、コンソールが起動するので、ユーザー名とパスワードを⼊⼒します。 Installing, this may take a few minutes... Please create a default UNIX user account. The username does not need to match your Windows username. For more information visit: https://aka.ms/wslusers Enter new UNIX username: ntakei Enter new UNIX password: Retype new UNIX password: passwd: password updated successfully Installation successful! To run a command as administrator (user "root"), use "sudo ". See "man sudo_root" for details. ntakei@NORIYUKITAKA0D3:~$

Slide 51

Slide 51 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 51 本セッションのブログのURL ユースケースその1︓WSLを使ったWindowsとLinux間のシームレスな開発 ApacheとPHPのインストールを実施します。 $ sudo apt-get update $ sudo apt-get install -y apache2 php

Slide 52

Slide 52 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 52 本セッションのブログのURL ユースケースその1︓WSLを使ったWindowsとLinux間のシームレスな開発これで開発する準備は整いました。さて、これから実際にPHPスクリプトを作成するわけですが、 WSLでは第2章で紹介したように、エクスプローラーから「\\wsl$\Ubuntu-18.04」というパスにアクセスすれば、WSL上のUbuntuのディレクトリに直接アクセスできます。よって、ApacheのDocument Rootである「\\wsl$\Ubuntu-18.04\var\www\html」にアクセスして、そのディレクトリにIDEなどで test.phpというファイル名で以下のPHPスクリプト作成します。ブラウザで「http://localhost/test.php」にアクセスすると「hoge」と表⽰されるはずです。とっても簡単です︕︕

Slide 53

Slide 53 text

Slide 54

Slide 54 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 54 本セッションのブログのURL ユースケースその2︓SSHによるポートフォワード顧客のネットワーク上にあるサーバーにアクセスする場合、踏み台SSHサーバーを経由して、クライアントPCのローカルにポートを持ってきて、そのポート経由で接続する「ポートフォワード」を使う場合が多々あります。

Slide 55

Slide 55 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 55 本セッションのブログのURL ユースケースその2︓SSHによるポートフォワード Windowsの場合ですと、⾊々と⾯倒なことがあります。 Teratermだと設定が結構⾯倒くさい。SSHコマンドだとワンライナーでできることも多数の⼿順を踏む必要がある。 Virtual Boxなどの仮想化ソフトウェアでクライアントPC内でLinuxを構築して、そちらでsshコマンドでポートフォワードしてもいいが、クライントPCからlocalhostでアクセスできないので使い勝⼿が悪い。

Slide 56

Slide 56 text

Slide 57

Slide 57 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 57 ユースケースその4︓DockerをWindows 10 Homeでも利⽤できる本セッションのブログのURL 以前は「Docker Desktop for Windows」は、Hyper-Vの利⽤を前提としていた。 Hyper-VはProfessional Edition以上が必要なので、Dockerも必然的にそれに引きづられていた。 WSL2では、WSL2向けのHyper-VがHomeエディションに内包されることとなり、Docker Desktop for Windowsは、このHyper-Vを使うことで、 Dockerエンジンを動作することができる。詳細は4章にて︕︕

Slide 58

Slide 58 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 58 ユースケースその5︓複数シェルを⼀括管理︕ Windows Terminal サービスが多様化し、PowerShell、WSL、Azureなど⾊んなものを使うようになってきた。サービスごとに個別のインターフェース(PowerShellのプロンプト、 WSLのターミナル、Azureのポータル)を起動するのはめんどくさい。 Windows Terminalなら統合的に管理可能︕︕ 本セッションのブログのURL

Slide 59

Slide 59 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 59 ユースケースその5︓複数シェルを⼀括管理︕ Windows Terminal 本セッションのブログのURL 早速実践してみましょう︕︕その前にWindows Terminalを使わずに、PowerShell、WSL、Azure Cloud Shell(Azureへの操作実施するための、ブラウザ上で稼働するシェル)を同時に使うと、以下のようにとっちらかったデスクトップになります(汗)

Slide 60

Slide 60 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 60 ユースケースその5︓複数シェルを⼀括管理︕ Windows Terminal 本セッションのブログのURL Windows Terminalを使うとスッキリします︕︕ まずは基本的な操作を説明します。インストールは序章で済ませているので、早速起動してみます。 Windowsの左下の検索ボックスに「windows terminal」と⼊⼒すると、メニューの中に「Windows Terminal」が表⽰されますので、それをクリックして下さい。

Slide 61

Slide 61 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 61 ユースケースその5︓複数シェルを⼀括管理︕ Windows Terminal 本セッションのブログのURL Windows Terminalが起動します。タブメニューの⼀番右端のボタンをクリックすると、様々なサービス向けのターミナル⼀覧が表⽰されます。ターミナル名をクリックすると、そのサービスに応じたターミナルが起動します。

Slide 62

Slide 62 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 62 ユースケースその5︓複数シェルを⼀括管理︕ Windows Terminal 本セッションのブログのURL これでPowerShell、WSL、Azure Cloud Shellのターミナルが起動しました。全てのターミナルが⼀つのウィンドウに集約され、タブで切り替えることができるので、⾮常にデスクトップがスッキリします。

Slide 63

Slide 63 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 63 ユースケースその5︓複数シェルを⼀括管理︕ Windows Terminal 本セッションのブログのURL では、起動したターミナルの中で、Azure Cloud Shellを使ってみましょう。Windows Terminalに表⽰されている「Azure」のタブをクリックするとターミナルに以下のようなメッセージが表⽰されています。メッセージの通り、ブラウザを起動し、https://microsoft.com/deviceloginにアクセスします。 To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code XXXXXXXXX to authenticate. This code will expire in 15 minutes.

Slide 64

Slide 64 text

Slide 65

Slide 65 text

Slide 66

Slide 66 text

© SIOS Technology, Inc. All rights Reserved. WSL2、Windows Terminalで改善︕︕ 66 ユースケースその5︓複数シェルを⼀括管理︕ Windows Terminal 本セッションのブログのURL ログインが成功すると、Windows Terminal側にAzureテナントの⼀覧が表⽰されて、Azureへの操作が可能になります。 To sign in, use a web browser to open the page https://microsoft.com/devicelogin and enter the code HBNZ649U4 to authenticate. This code will expire in 15 minutes. Authenticated. Tenant 0: SIOS Technology, Inc. (Azure検証環境) (XXXX.onmicrosoft.com) Tenant 1: サイオステクノロジー株式会社 (YYYY.onmicrosoft.com) Please enter the desired tenant number. >

Slide 67

Slide 67 text

Slide 68

Slide 68 text

Slide 69

Slide 69 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 69 仮想化は仮想化ソフトウェアにゲストOSがあり、プロセスはゲストOS上のカーネルを利⽤する。コンテナは、ホストOS上のカーネルを共有する。ゲストOSが不要な分、コンテナは軽量になる。この軽量化が開発環境を構築するのに⼤きく寄与する。コンテナ同⼠はホストOS同⼠の namespaceという技術によって完全に実⾏空間が分離しているので、お互い⼲渉することはない。

Slide 70

Slide 70 text

Slide 71

Slide 71 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 71 WSL2とDockerは相性ぴったり︕︕ Docker Desktop for Windowsは、Moby VMというLinuxの仮想マシンを起動し、その仮想マシン内の Linuxカーネルを使ってコンテナを起動します。Moby VMの起動には仮想化ハイパーバイザーであるHyper- Vが必要となり、Hyper-Vは Windows 10 Pro以上が必要となります。

Slide 72

Slide 72 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 72 WSL2とDockerは相性ぴったり︕︕ Docker Desktop WSL 2 backendの場合は、Docker コンテナ稼働に必要な仮想化ハイパーバイザー、Linux 仮想マシン、LinuxカーネルはすべてWSL2をインストールすると⾃動的に作成されます。さらに、WSL2専⽤の軽量化Hyper-Vは、 Windows 10 Homeにも利⽤できるように設計されてあるため、Docker Desktop WSL 2 backendと組み合わせることで、Windows 10 HomeでもDockerが利⽤できるのです。

Slide 73

Slide 73 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 73 Visual Studio CodeとDockerは相性ぴったり︕︕ Visual Studio CodeのRemote Development拡張機能を使うと、開発に必要なコンテナを⾃動で⽣成してくれます︕︕ ① 事前に定義したコンテナ関連設定ファイルに基づきDockerにコンテナ作成の命令を出す。 ② Docker HubにDockerイメージを取得しにいく。 ③ Dockerイメージからコンテナを⽣成する。 ④ コンテナ上のソースコードをマウントする。VS Codeからコンテナ上のソースを直接修正できる。

Slide 74

Slide 74 text

Slide 75

Slide 75 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 75 ① 開発リーダーはDockerfileとソースコードを Gitリポジトリにpushします。 ② 開発エンジニアは、Gitリポジトリから Dockerfileとソースコードをclone or pullします。 ※開発エンジニアのPC上にあるGitで⾏われます ③ 開発エンジニアは、Dockerfileに従って、開発環境のコンテナを作成します。Dockerエンジンは、 Dockerfileの内容に従って、適宜 DockerHubを参照します。 ④ 開発エンジニアは、修正したソースコードを GitHubにpush or pullします。 ※これはDockerコンテナ内のGitから⾏われます。 ⑤ 開発リーダーは、GitHubにpushされたソースコードに基づき、Dockerイメージを作成、 DockerリポジトリにPushします。 ⑥ Kubernetesなどのコンテナオーケストレーターによって読み込まれて、本番環境が作成されます。本セッションのブログのURL

Slide 76

Slide 76 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 76 この開発スタイルのメリットは以下のとおりです。コンテナはカーネルを含まないので、軽量で可搬性に優れています。 Docker HubやDockerリポジトリからイメージをPull、Pushしても軽量なのでネットワーク帯域を圧迫しないですし、ダウンロードも⾼速です。ネットワーク帯域を圧迫しない Gitリポジトリの中にあるコンテナ関連設定ファイル(Dockerfileその他)を Pullして、それをもとにVS CodeのRemote Development拡張機能が開発に必要なコンテナを作ってくれるので、開発環境の構築をする必要がない。環境構築の⼿間が軽減される開発環境で開発に使っていたコンテナをそのまま本番環境に持っていくので、序章で説明したような、開発環境と本番環境の差異による不具合が発⽣しない。実⾏環境の差異がない

Slide 77

Slide 77 text

Slide 78

Slide 78 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 78 本セッションのブログのURL 事前準備︓Docker Desktop for Windowsのインストール第3章でも説明したように、Docker Desktop for Windowsは今まではHyper-Vを内包する Professionalエディション以上が必要でした。しかし、WSL2ではWSL2向けのHyper-VがHomeエディションに内包されることとなり、Docker Desktop for Windowsは、このHyper-Vを使うことで、 Dockerエンジンを動作することができます。よって、まずWSL2が必要なのですが、WSL2はWSL1 をアップグレードすることでインストールします。 Windowsの左下の検索ボックスに「powershell」と⼊⼒すると、メニューの中に「Windows PowerShell」が表⽰されます。それを右クリックして、「管理者として実⾏」をクリックして下さい。以下のコマンドを実⾏して、「操作は正常に完了しました。」と表⽰されれば成功です。 PS C:\Windows\system32> dism.exe /online /enable-feature /featurename:Microsoft-Windows- Subsystem-Linux /all /norestart 展開イメージのサービスと管理ツールバージョン: 10.0.19041.1 イメージのバージョン: 10.0.19041.207 機能を有効にしています [==========================100.0%==========================] 操作は正常に完了しました。

Slide 79

Slide 79 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 79 本セッションのブログのURL 事前準備︓Docker Desktop for Windowsのインストール次に、同じPowerShellのウィンドウで以下のコマンドを実⾏します。「操作は正常に完了しました。」と表⽰されれば成功です。 PS C:\Windows\system32> dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart 展開イメージのサービスと管理ツールバージョン: 10.0.19041.1 イメージのバージョン: 10.0.19041.207 機能を有効にしています [==========================100.0%==========================] 操作は正常に完了しました。

Slide 80

Slide 80 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 80 本セッションのブログのURL 事前準備︓Docker Desktop for Windowsのインストール Docker Desktop for Windowsを使うためには、WSL2のLinuxカーネルを更新する必要があります。以下のURLの「this link」をクリックし、Linux kernel update packageをダウンロードして実⾏します。ウィザード通りに進んでいけばインストールは完了します。 https://docs.microsoft.com/en-us/windows/wsl/wsl2-kernel 以下のリンクをクリックして、「Download Docker Desktop Edge X.X.X.X or a later release.」(X.X.X.Xはバージョン番号)をクリックし絵、Docker Desktop for Windowsをダウンロードして実⾏します。ウィザード通りに進んでいけばインストールは完了します。 https://docs.docker.com/docker-for-windows/wsl-tech-preview/#download ※ 以下のリリースノートにある通り、Windows 10のHomeエディションでDocker Desktop for Windowsを利⽤するためには、2.2.2.0以降のバージョンをダウンロードして下さい。 https://docs.docker.com/docker-for-windows/edge-release-notes/#docker-desktop-community- 2220

Slide 81

Slide 81 text

Slide 82

Slide 82 text

Slide 83

Slide 83 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 83 本セッションのブログのURL ②ソースコードおよびコンテナ関連設定ファイルの作成、GitへのPush Gitリポジトリ(GitHubなど)にPushするためのソースコードやコンテナ関連の設定ファイル (Dockerfile)を作成します。そのファイル群やディレクトリ構成は以下の通りとなります。 GitリポジトリのTop !"" .devcontainer # !"" devcontainer.json # $"" Dockerfile $"" src $"" index.php 上記のファイルを作成し、GitリポジトリにPushします。では、これより以降は、上記に記載のファイルの詳細を⼀つずつ説明していきます。

Slide 84

Slide 84 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 84 ②ソースコードおよびコンテナ関連設定ファイルの作成、GitへのPush ■ .devcontainer/devcontainer.json Remote Development拡張機能を使うと、Visual Studio CodeからDockerコンテナに接続しDocker上のファイルを直接編集できるのはもちろんのこと、 Dockerコンテナ⾃体の⽣成も拡張機能で⾏うことができます。 devcontainer.jsonは、⽣成するコンテナファイルの詳細について記述し、その記述内容によって、コンテナのイメージやマウントの設定などが決定します。今回の実践における具体的な設定内容は以下のとおりです。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 { # 設定を⼀意に識別する任意の名称です。 "name": "Hello", # コンテナを作成するためのDockerfileのファイル名を指定します。 # Dockerfileの内容については後述します。 "dockerFile": "Dockerfile", # この設定によりホストOSの80宛の通信がコンテナの80に転送されます。 # ホストPCからブラウザで動作確認するために必要です。 "forwardPorts": [80], # デフォルトではVisual Studio Codeからのコンテナ起動時のコマンドは # while sleep 1000; do :; doneに上書きされてしまいますが、それを防⽌します。 "overrideCommand": false, # Gitリポジトリのsrcディレクトリを、Apacheのドキュメントルートである/var/www/htmlに # マウントします。 "mounts": [ "source=${localWorkspaceFolder}/src,target=/var/www/html,type=bind,consistency=cached" ] }

Slide 85

Slide 85 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 85 本セッションのブログのURL ②ソースコードおよびコンテナ関連設定ファイルの作成、GitへのPush ■ .devcontainer/Dockerfile Visual Studio CodeのRemote Development拡張機能で⽣成されるコンテナ内で実施するコマンドを定義したDockerfileです。先に説明したとおり、.devcontainer/devcontainer.jsonで定義されています。 1 2 3 4 5 6 # PHPとApacheがインストールされたOfficialイメージをPullします。 FROM php:7.2.30-apache # 修正したソースコードをGitリポジトリにアップするために # コンテナ上にGitをインストールします。 RUN apt-get update && apt-get -y install git 上記のDockerfileでGitをインストールしていますが、Visual Studio CodeのRemote Development 拡張機能を利⽤すると、Visual Studio CodeのGitの機能はコンテナ側で動作します。そのため、コンテナ側にもGitのインストールが必要になります。

Slide 86

Slide 86 text

Slide 87

Slide 87 text

Slide 88

Slide 88 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 88 本セッションのブログのURL ③開発環境の構築開発リーダーがGitレポジトリにPushしたファイルを、開発エンジニアはホストOS上のGitでPullをして取得します。これらのファイル(.devcontainerディレクトリ配下のファイル)とRemote Development拡張機能により、開発環境に必要なDockerコンテナを⽣成します。Visual Studio Codeを起動して、左下の緑のボタンをクリックして下さい。

Slide 89

Slide 89 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 89 本セッションのブログのURL ③開発環境の構築以下のようなリストが表⽰されますので、「Remote-Containers: Open Folder in Container…」をクリックします。そして先程PullしたGitディレクトリを選択します。

Slide 90

Slide 90 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 90 本セッションのブログのURL ③開発環境の構築 Visual Studio Codeの右下の⽅に以下の画⾯が表⽰され、コンテナの⽣成が始まります。初回は Docker HubからイメージをPullしたりコンテナを⽣成したりしますので、時間がかかりますが、2回⽬以降は素早く起動できます。

Slide 91

Slide 91 text

Slide 92

Slide 92 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 92 本セッションのブログのURL ③開発環境の構築画⾯下部のTerminalはコンテナ内部のShellになります。ps axと⼊⼒してプロセスを⾒てみますと、たしかにコンテナ内部で起動しているプロセスのみが表⽰されている(PIDが1のプロセスがApacheの親プロセス)ことがわかります。 root@9af07dd07639:/workspaces/webapp# ps ax PID TTY STAT TIME COMMAND 1 ? Ss 0:00 apache2 -DFOREGROUND 18 ? S 0:00 apache2 -DFOREGROUND 19 ? S 0:00 apache2 -DFOREGROUND 20 ? S 0:00 apache2 -DFOREGROUND 21 ? S 0:00 apache2 -DFOREGROUND 22 ? S 0:00 apache2 -DFOREGROUND 23 ? Ss 0:00 /bin/sh ... 以下略 ...

Slide 93

Slide 93 text

Slide 94

Slide 94 text

Slide 95

Slide 95 text

© SIOS Technology, Inc. All rights Reserved. さらに進化︕︕Visual Studio Code、Dockerで改善︕︕ 95 本セッションのブログのURL ④ ソースコードの修正およびGitへのPush 先程GitにCommitしたファイルをPushします。「図9 GitへのPush」の⾚い枠の部分をクリックするとPushは完了します。ホストPCのブラウザからhttp://localhost/にアクセスすると、ブラウザ上に「fuga」と表⽰されるはずです。

Slide 96

Slide 96 text

Slide 97

Slide 97 text

© SIOS Technology, Inc. All rights Reserved. 最後に︕︕ 97 本セッションのブログのURL 【連載】WSL2、Visual Studio Code、DockerでグッとよくなるWindows開発環境 https://tech-lab.sios.jp/archives/21023 Visual Studio CodeのRemote DevelopmentとDockerで快適な開発環境をゲット https://tech-lab.sios.jp/archives/18677 【連載】世界⼀わかりみが深いコンテナ & Docker⼊⾨ https://tech-lab.sios.jp/archives/18811 WSL2で劇的に変わるあなたのWebアプリケーション開発環境 https://tech-lab.sios.jp/archives/18431 関連ブログ