Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WSL2、Docker、VSCodeで劇的に改善されるWindows開発環境

 WSL2、Docker、VSCodeで劇的に改善されるWindows開発環境

Noriyuki TAKEI

October 23, 2020
Tweet

More Decks by Noriyuki TAKEI

Other Decks in Technology

Transcript

  1. © SIOS Technology, Inc. All rights Reserved.
    WSL2、Docker、VS Codeで
    劇的に改善される
    Windows開発環境
    武井 宜⾏
    サイオステクノロジー株式会社
    2020年10⽉23⽇

    View full-size slide

  2. © SIOS Technology, Inc. All rights Reserved.
    ⽬次
    2
    序章︓ Windowsによる開発の歴史
    第2章︓WSL1&2のしくみ
    第3章︓ WSL2、Windows Terminalで改善︕︕
    第4章︓さらに進化︕︕Visual Studio Code、Dockerで改善︕︕

    View full-size slide

  3. © 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
    Azure Kubernetes Service
    Cloud Native, Serverless全般
    Twitter
    @noriyukitakei

    View full-size slide

  4. © SIOS Technology, Inc. All rights Reserved.
    本セッションの概要
    4

    View full-size slide

  5. © SIOS Technology, Inc. All rights Reserved.
    本セッションの概要
    5
    以下の3つの技術により
    Windowsの開発環境をすごい便利なものに
    しようというお話です。
    Docker WSL Visual Studio
    Code

    View full-size slide

  6. © SIOS Technology, Inc. All rights Reserved.
    ほげほげ
    6
    https://tech-lab.sios.jp/archives/21023
    今回のセッションのお話は、
    弊社技術ブログでもご覧頂けます。

    View full-size slide

  7. © SIOS Technology, Inc. All rights Reserved.
    本セッションの概要
    7
    また、今回お話する内容は
    WEB+DB Press vol.117にも
    執筆した内容です。
    こちらもぜひよろしく
    おねがいします︕︕

    View full-size slide

  8. © SIOS Technology, Inc. All rights Reserved.
    序章︓Windowsによる開発の歴史
    8

    View full-size slide

  9. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    9
    Windowsのメリットはこんなのがあります。
    初⼼者でも馴染みやすい画⾯構成
    直感的なインターフェース
    ⾳楽や動画などのメディア系ファイルとの
    相性のよさ
    本セッションの
    ブログのURL

    View full-size slide

  10. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    10
    ただし、以下のようなデメリットもあります。。。
    実⾏環境の差異(開発はWindows,本番はLinux)による
    想定外の動作
    例えば、アップロードしたファイルが⽂字化けしたとか、、、
    例えば、改⾏コードがWindowsとLinuxで違うせいで、、、
    本セッションの
    ブログのURL

    View full-size slide

  11. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    11
    Windowsでの開発は以下のような歴史をたどってきました。
    ⼀つの開発環境を共有
    Windows上に開発に必要なミドルウェアを構築
    仮想環境によるアプローチ
    本セッションの
    ブログのURL

    View full-size slide

  12. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    12
    ⼀つの開発環境を共有
    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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    15
    ⼀つの開発環境を
    共有
    Windows上に
    開発に必要な
    ミドルウェアを
    構築
    仮想環境による
    アプローチ
    実⾏環境の差異 環境構築の⼿間 環境の独⽴性

    Linuxの環境をみんなで
    共有するので、実⾏環境
    の際はない。

    既に出来上がっている環
    境をみんなで共有するの
    で、開発者が環境構築し
    なくてよい。

    みんなで1つの環境を共
    有するので、誰かが変な
    コード上げたりすると、
    環境が動かなくなる。

    Windowsなので、本番環
    境がLinuxの場合、差異
    が⼤きくある。

    Windows上にランタイム
    とかミドルウェアインス
    トールするので超⼤変。

    開発者専⽤の環境なので
    、何をやっても他のユー
    ザーに影響はなし。

    仮想環境上のOSを本番の
    ものと合わせれば、実⾏
    環境の際はない

    仮想環境上にOSからイン
    ストールするので、超⼤
    変。

    開発者専⽤の環境なので
    、何をやっても他のユー
    ザーに影響はなし。
    ポータビリティ

    OSのイメージが⼤きすぎ
    るので、なかなかに他の
    環境に簡単に移⾏できな
    い。

    OSのイメージが⼤きすぎ
    るので、なかなかに他の
    環境に簡単に移⾏できな
    い。

    OSのイメージが⼤きすぎ
    るので、なかなかに他の
    環境に簡単に移⾏できな
    い。

    View full-size slide

  16. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    16
    本セッションの
    ブログのURL
    全て以下の最新テクノロジーで解決します︕︕
    Docker WSL
    Visual Studio
    Code

    View full-size slide

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

    View full-size slide

  18. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    18
    本セッションの
    ブログのURL
    WSLのインストール
    Windowsの左下の検索ボックスに
    「powershell」と⼊⼒すると、メニュー
    の中に「Windows PowerShell」が表⽰さ
    れます。それを右クリックして、「管理者
    として実⾏」をクリックして下さい。

    View full-size slide

  19. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    19
    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を⼊⼒し、エンターを押して下さい。

    View full-size slide

  20. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    20
    本セッションの
    ブログのURL
    WSLのインストール
    次に、Windowsの左下の検索ボックスに
    「microsoft store」と⼊⼒すると、メ
    ニューの中に「Microsoft Store」が表⽰
    されますので、それをクリックして下さい。

    View full-size slide

  21. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    21
    本セッションの
    ブログのURL
    WSLのインストール
    画⾯上部のテキストボックスに「wsl」と⼊⼒してエンターを押して下
    さい。

    View full-size slide

  22. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    22
    本セッションの
    ブログのURL
    WSLのインストール
    「Ubuntu 18.04LTS」をク
    リックして下さい。

    View full-size slide

  23. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    23
    本セッションの
    ブログのURL
    WSLのインストール
    「Get」をクリックして下
    さい。

    View full-size slide

  24. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    24
    本セッションの
    ブログのURL
    WSLのインストール
    「No, thanks」をクリックして下さい。

    View full-size slide

  25. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    25
    本セッションの
    ブログのURL
    WSLのインストール
    右図のようにプログレ
    スバーが表⽰されてイ
    ンストールが始まりま
    す。

    View full-size slide

  26. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    26
    本セッションの
    ブログのURL
    WSLのインストール
    ダウンロードが完了する
    と右図のようになりま
    す。

    View full-size slide

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

    View full-size slide

  28. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    28
    本セッションの
    ブログのURL
    Visual Studio Codeのインストール
    ついでに⽇本語化もします。上部メニューから「View」→「Command
    Palete…」の順にクリックします。

    View full-size slide

  29. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    29
    本セッションの
    ブログのURL
    Visual Studio Codeのインストール
    「Install additional languages…」をクリックします。

    View full-size slide

  30. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    30
    本セッションの
    ブログのURL
    Visual Studio Codeのインストール
    左側に⾔語⼀覧が表⽰されますので
    「⽇本語」の横にある「Install」を
    クリックして、Visual Studio Code
    を再起動すれば、⽇本語化は完了で
    す。

    View full-size slide

  31. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    31
    本セッションの
    ブログのURL
    Windows Terminalのインストール
    Microsoft Storeを起動して、以下のように「windows terminal」を⼊⼒しま
    す。「Windows Terminal (Preview)」と表⽰されるのでクリックします。

    View full-size slide

  32. © SIOS Technology, Inc. All rights Reserved.
    Windowsによる開発の歴史
    32
    本セッションの
    ブログのURL
    Windows Terminalのインストール
    後はWindows Subsystem for Linuxのインストールと同様の⼿順を実施すれ
    ばインストールは完了します。

    View full-size slide

  33. © SIOS Technology, Inc. All rights Reserved.
    第2章︓ WSL1&2のしくみ
    33

    View full-size slide

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

    View full-size slide

  35. © SIOS Technology, Inc. All rights Reserved.
    WSL1&2のしくみ
    35
    本セッションの
    ブログのURL
    WindowsからWSL上のファイルにアクセスするためには、「
    \\wsl$\[ディストリビューションの名前]」というパスにアクセスす
    ればOKです。ディストリビューションがUbuntuの場合は
    「\\wsl$\Ubuntu-18.04」となります。

    View full-size slide

  36. © SIOS Technology, Inc. All rights Reserved.
    WSL1&2のしくみ
    36
    本セッションの
    ブログのURL
    逆に、LinuxからWindowsの場合は、「/mnt/[ドライブ名]」という
    パスにアクセスすると、Windowsの指定したドライブ直下にアクセ
    スが出来ます。Cドライブにアクセスする場合は、「/mnt/c」とな
    ります。

    View full-size slide

  37. © SIOS Technology, Inc. All rights Reserved.
    WSL1&2のしくみ
    37
    本セッションの
    ブログのURL
    WSL1とWSL2のアーキテクチャは⼤きな違いがあります。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. © SIOS Technology, Inc. All rights Reserved.
    WSL1&2のしくみ
    40
    本セッションの
    ブログのURL
    では、どんなときも
    WSL2を使ったほうが
    よいの︖

    View full-size slide

  41. © SIOS Technology, Inc. All rights Reserved.
    WSL1&2のしくみ
    41
    本セッションの
    ブログの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

    View full-size slide

  42. © SIOS Technology, Inc. All rights Reserved.
    WSL1&2のしくみ
    42
    本セッションの
    ブログの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

    View full-size slide

  43. © SIOS Technology, Inc. All rights Reserved.
    WSL1&2のしくみ
    43
    本セッションの
    ブログの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

    View full-size slide

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

    View full-size slide

  45. © SIOS Technology, Inc. All rights Reserved.
    第3章︓ WSL2、Windows Terminalで改善︕︕
    45

    View full-size slide

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

    View full-size slide

  47. © SIOS Technology, Inc. All rights Reserved.
    WSL2、Windows Terminalで改善︕︕
    47
    ユースケースその1︓WSLを使ったWindowsとLinux間のシームレスな開発
    WSLを使わない場合
    Virtual BoxにOSから⼊れなくては
    いけないのでとっても⾯倒。
    ソースコードの同期についても⾊
    々設定をしなければいけない。。

    View full-size slide

  48. © SIOS Technology, Inc. All rights Reserved.
    WSL2、Windows Terminalで改善︕︕
    48
    ユースケースその1︓WSLを使ったWindowsとLinux間のシームレスな開発
    WSLを使う場合
    WSLは既にOSインストール済みな
    ので、ラクチン。
    WSL上のソースコードへのアクセ
    スも、特定のパスを指定するだけ
    でいいから、これもラクチン。

    View full-size slide

  49. © SIOS Technology, Inc. All rights Reserved.
    WSL2、Windows Terminalで改善︕︕
    49
    本セッションの
    ブログの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:~$

    View full-size slide

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

    View full-size slide

  51. © SIOS Technology, Inc. All rights Reserved.
    WSL2、Windows Terminalで改善︕︕
    51
    本セッションの
    ブログの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スクリプト作成します。
    echo “hoge”;
    ?>
    ブラウザで「http://localhost/test.php」にアクセスすると「hoge」と表⽰されるはずで
    す。
    とっても簡単です︕︕

    View full-size slide

  52. © SIOS Technology, Inc. All rights Reserved.
    WSL2、Windows Terminalで改善︕︕
    52
    本セッションの
    ブログのURL
    ユースケースその1︓WSLを使ったWindowsとLinux間のシームレスな開発
    今まで説明した「WSLと仮想化ソフトフェアによる開発環境構築の違い」を下図にまとめました。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. © SIOS Technology, Inc. All rights Reserved.
    WSL2、Windows Terminalで改善︕︕
    55
    本セッションの
    ブログのURL
    ユースケースその2︓SSHによるポートフォワード
    WSLならとっても便利で簡単︕︕localhostでアクセスが可能なので、Linuxでsshのポートフォワー
    ドしているのと同じ感覚で使えます︕︕

    View full-size slide

  56. © SIOS Technology, Inc. All rights Reserved.
    WSL2、Windows Terminalで改善︕︕
    56
    ユースケースその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章にて︕︕

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. © SIOS Technology, Inc. All rights Reserved.
    WSL2、Windows Terminalで改善︕︕
    62
    ユースケースその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.

    View full-size slide

  63. © SIOS Technology, Inc. All rights Reserved.
    WSL2、Windows Terminalで改善︕︕
    63
    ユースケースその5︓複数シェルを⼀括管理︕ Windows Terminal
    本セッションの
    ブログのURL
    ターミナルに表⽰されてたcodeを⼊⼒して、「Next」をクリックします。

    View full-size slide

  64. © SIOS Technology, Inc. All rights Reserved.
    WSL2、Windows Terminalで改善︕︕
    64
    ユースケースその5︓複数シェルを⼀括管理︕ Windows Terminal
    本セッションの
    ブログのURL
    Azureにアクセスが可能なアカウント情報を⼊⼒します。

    View full-size slide

  65. © SIOS Technology, Inc. All rights Reserved.
    WSL2、Windows Terminalで改善︕︕
    65
    ユースケースその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.
    >

    View full-size slide

  66. © SIOS Technology, Inc. All rights Reserved.
    第4章︓さらに進化︕︕
    Visual Studio Code、Dockerで改善︕︕
    66

    View full-size slide

  67. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    67
    本セッションの
    ブログのURL
    Dockerってなに︖

    View full-size slide

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

    View full-size slide

  69. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    69
    Dockerの詳細についてはここでは語りきれないので
    ⼩⽣の以下のブログをぜひ⾒て下さい︕︕
    世界⼀わかりみが深いコンテナ & Docker⼊⾨
    https://tech-lab.sios.jp/archives/18811

    View full-size slide

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

    View full-size slide

  71. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    71
    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が利⽤で
    きるのです。

    View full-size slide

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

    View full-size slide

  73. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    73
    本セッションの
    ブログのURL
    Visual Studio Code、Docker、WSL2を使うと
    新たな開発スタイルが
    誕⽣します。︕︕

    View full-size slide

  74. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    74
    ① 開発リーダーは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

    View full-size slide

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

    View full-size slide

  76. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    76
    本セッションの
    ブログのURL
    この開発スタイルに基づいて
    開発を実践してみましょう︕︕

    View full-size slide

  77. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    77
    本セッションの
    ブログの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%==========================]
    操作は正常に完了しました。

    View full-size slide

  78. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    78
    本セッションの
    ブログの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%==========================]
    操作は正常に完了しました。

    View full-size slide

  79. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    79
    本セッションの
    ブログの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

    View full-size slide

  80. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    80
    本セッションの
    ブログのURL
    ①はもう既に完了し
    ていて必要なファイ
    ルはGitリポジトリ
    に上がっているもの
    とします。

    View full-size slide

  81. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    81
    本セッションの
    ブログのURL
    というここで
    イマココ(②)

    View full-size slide

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

    View full-size slide

  83. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    83
    ②ソースコードおよびコンテナ関連設定ファイルの作成、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"
    ]
    }

    View full-size slide

  84. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    84
    本セッションの
    ブログの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のインストールが必要になります。

    View full-size slide

  85. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    85
    本セッションの
    ブログのURL
    ②ソースコードおよびコンテナ関連設定ファイルの作成、GitへのPush
    ■ src/index.php
    1
    2
    3

    ブラウザにhogeと表⽰するだけの簡単なPHPスクリプトです。

    View full-size slide

  86. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    86
    本セッションの
    ブログのURL
    イマココ(③)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  90. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    90
    本セッションの
    ブログのURL
    ③開発環境の構築
    以下のような画⾯が表⽰されれば成功です。画⾯左部に表⽰されているのはコンテナの中のファイル
    です。このファイルを修正すると、コンテナの中のファイルが修正されます。

    View full-size slide

  91. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    91
    本セッションの
    ブログの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
    ... 以下略 ...

    View full-size slide

  92. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    92
    本セッションの
    ブログのURL
    イマココ(④)

    View full-size slide

  93. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    93
    本セッションの
    ブログのURL
    ④ ソースコードの修正およびGitへのPush
    ①をクリックして、Commitのコメントを⼊⼒し、②をクリックしてCommitします。

    View full-size slide

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

    View full-size slide

  95. © SIOS Technology, Inc. All rights Reserved.
    さらに進化︕︕Visual Studio Code、Dockerで改善︕︕
    95
    本セッションの
    ブログのURL
    ココ(⑤)については今回は割愛させて頂
    きます。実際は、Azure Kubernetes
    ServiceやWeb App for Containersなど
    にデプロイすることになるかと思います。

    View full-size slide

  96. © SIOS Technology, Inc. All rights Reserved.
    最後に︕︕
    96
    本セッションの
    ブログの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
    関連ブログ

    View full-size slide

  97. ご清聴
    ありがとうございまいした。

    View full-size slide