© SIOS Technology, Inc. All rights Reserved. ブラウザでVS Codeがグリグリ動く︕︕ Visual Studio Codespacesのご紹介︕︕ 武井 宜⾏ 2020年7⽉8⽇

© SIOS Technology, Inc. All rights Reserved. About me 2 BCPVUNF Noriyuki TAKEI ෢Ҫ ٓߦ Information • サイオステクノロジー株式会社 • VS Code Meetup Organizer Favorites • Azure • Squash • Sweets blog https://tech-lab.sios.jp/ core skill Azure Kubernetes Service Docker

© SIOS Technology, Inc. All rights Reserved. Visual Studio Codespacesって すごい︕︕ 3

© SIOS Technology, Inc. All rights Reserved. Visual Codespacesってスゴイ︕︕ 4 Visual Studio Codeってなに︖ マイクロソフト製のオープンソースなエディタ 超軽量︕︕サクッと起動︕︕ 超豊富なプラグインで⾃由に拡張可能︕︕ アナタ⾊に染められる︕︕

© SIOS Technology, Inc. All rights Reserved. Visual Codespacesってスゴイ︕︕ 5 Visual Studio Codespacesってなに︖ ブラウザでグリグリ動くVS Code ほとんど、まんまVS Code 超豊富なプラグインで⾃由に拡張可能︕︕ アナタ⾊に染められる︕︕

© SIOS Technology, Inc. All rights Reserved. Visual Codespacesってスゴイ︕︕ 6 Visual Studio Code Visual Studio Codespaces まんま同じ︕︕

© SIOS Technology, Inc. All rights Reserved. Visual Codespacesってスゴイ︕︕ 7 Visual Studio Codespacesに必要なものってなーに︖ ブラウザ Azureのサブスクリプション ちょっとのお⾦

© SIOS Technology, Inc. All rights Reserved. Visual Codespacesってスゴイ︕︕ 8 実際いくらくらい︖ ※Basic(2 コア、4 GB RAM、64 GB SSD) 、リージョンは⽶国⻄部と します(2020年6⽉10⽇現在で⽇本リージョンがない(ToT))。) アクティブな時間の料⾦(1⽇7時間) 約1,990円 (¥9.476/時間 ✕ 7時間 ✕ 30⽇) ストレージの利⽤料 約707円 (¥0.9820/時間 ✕ 24時間 ✕ 30⽇) 合計 2,697円 お⼩遣いの範囲でOK

© SIOS Technology, Inc. All rights Reserved. セットアップ 9

© SIOS Technology, Inc. All rights Reserved. セットアップ 10 実際に使ってみよう︕︕セットアップもラクチンです。 https://visualstudio.microsoft.com/ja/services/visual-studio-codespaces/

© SIOS Technology, Inc. All rights Reserved. セットアップ 11 Sign Inをクリックします。

© SIOS Technology, Inc. All rights Reserved. セットアップ 12 「Create Codespaces」をクリックします。ちなみにCodespaceはちょ うど、PC上で起動したVisual Studio Codeのアプリそのものに相当しま す。

© SIOS Technology, Inc. All rights Reserved. セットアップ 13 サブスクリプション名や、インスタンスタイプ(ビルド時のパワーに影響) などを設定します。

© SIOS Technology, Inc. All rights Reserved. セットアップ 14 先程の設定画⾯でGitリポジトリを設定した場合、以下の認証画⾯が表⽰ されます。

© SIOS Technology, Inc. All rights Reserved. セットアップ 15 もうできましたー︕︕

© SIOS Technology, Inc. All rights Reserved. 実⾏基盤 16

© SIOS Technology, Inc. All rights Reserved. 実⾏基盤 17 Visual Studio Codespacesの実⾏基盤はDockerコンテナです。ちょうど、 Visual Studio CodeのRemote DevelopmentでDockerコンテナ作った ときみたいなのがデフォになってます。 … Python PHP Dockerコンテナ Docker Engine Visual Studio Codespaces Azure 特に指定しないと、PythonやPHPなどメ ジャーなランタイムが全部のせされたコ ンテナが出来上がる。

© SIOS Technology, Inc. All rights Reserved. 実⾏基盤 18 環境のカスタマイズは、devcontainer.jsonというファイルを変更するこ とで⾏います。 { // 任意の名前でOKです。 "name": "Hello", // 先程作成したDockerfileのファイル名を指定します。 "dockerFile": "Dockerfile", // コンテナへの転送ポートを指定します。 "forwardPorts": [80], // コンテナが作成されたあとに実⾏されるコマンドです。 // Gitリポジトリのsrcディレクトリにはソースが格納されるのですが、ソースを更新したら、すぐに // Apacheに反映されるよう、ApacheのDocumentRootのシンボリックリンク先をsrcディレクトリにしています。 "postCreateCommand": "rm -r /var/www/html;ln -s $PWD/src /var/www/html;usermod -aG root www-data;chmod g+x /root", // コンテナが⽣成されたときに、コンテナ側にインストールする拡張機能です。 // これを指定しないと、コンテナが再⽣成すると拡張機能が消えます。 // 今回はXdebugをインストールします。 "extensions": [ "felixfbecker.php-debug" ] }

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 19

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 20 Apache PHP with Xdebug ソースコード Dockerコンテナ Docker Engine Visual Studio Codespaces Azure デバッグのため 9000番ポートにアクセス Visual Studio Codespacesの環境をカスタマイズして、PHPでデバッグ できる環境を作ってみます。

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 21 Gitリポジトリに以下のようなファイルを作成します。個々のファイルの 解説は次ページ以降でバッチリ⾏います。 リポジトリのTop ├── .devcontainer │ ├── Dockerfile │ ├── devcontainer.json │ ├── docker-php.conf │ └── xdebug.ini ├── .vscode │ └── launch.json └── src └── test.php

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 22 # リモートデバッグ接続先です。今回はサーバー側にXdebugが動くので、 # 127.0.0.1を指定します。 xdebug.remote_host = 127.0.0.1 # リモートデバッグを⾃動で開始します。 xdebug.remote_autostart = 1 # リモートデバッグを有効にします。 xdebug.remote_enable = 1 # リモートデバッグの接続ポートです。 xdebug.remote_port = 9000 .devcontainer/xdebug.ini PHPのデバッグするモジュールであるxdebugの設定ファイルです。

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 23 SetHandler application/x-httpd-php DirectoryIndex disabled DirectoryIndex index.php index.html # ApacheのDocumentRoot(/var/www/html)のシンボリックリンク先に、 # Gitリポジトリにあるソースを格納するディレクトリ(src)を設定します。 # そのためシンボリックリンクを有効にしています。 Options -Indexes +FollowSymLinks AllowOverride All Require all granted .devcontainer/docker-php.conf PHPを動作させるためのApacheの設定ファイルです。もともとの設定ファイルに FollowSymLinks(シンボリックリンクを⾜せるような設定)が加わっています。

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 24 # PHPの公式Dockerイメージを指定します。 FROM php:7.3.8-apache # xdebugの設定をコンテナにコピーします。このディレクトリに # コピーするとPHPの設定として有効になります。 ADD xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini # 先程記述したdocker-php.confをコンテナにコピーします。 ADD docker-php.conf /etc/apache2/conf-available/docker-php.conf # xdebugのモジュールをインストールをします。 RUN pecl install xdebug && docker-php-ext-enable xdebug .devcontainer/Dockerfile コンテナを作成するためのDockerfileです。

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 25 { // 任意の名前でOKです。 "name": "Hello", // 先程作成したDockerfileのファイル名を指定します。 "dockerFile": "Dockerfile", // コンテナへの転送ポートを指定します。 "forwardPorts": [80], // コンテナが作成されたあとに実⾏されるコマンドです。Gitリポジトリのsrcディレクトリにはソースが格納されるのですが、ソースを // 更新したら、すぐにApacheに反映されるよう、ApacheのDocumentRootのシンボリックリンク先をsrcディレクトリにしています。 "postCreateCommand": "rm -r /var/www/html;ln -s $PWD/src /var/www/html;usermod -aG root www-data;chmod g+x /root", // コンテナが⽣成されたときに、コンテナ側にインストールする拡張機能です。 // これを指定しないと、コンテナが再⽣成すると拡張機能が消えます。 // 今回はXdebugをインストールします。 "extensions": [ "felixfbecker.php-debug" ] } .devcontainer/devcontainer.json Visual Studio CodespacesがDockerコンテナに接続するための設定ファイルです。

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 26 { "version": "0.2.0", "configurations": [ { "name": "Listen for XDebug", "type": "php", "request": "launch", "pathMappings": { "/var/www/html": "${workspaceRoot}/src" }, "port": 9000 } ] } .vscode/launch.json Visual Studio Codespacesでデバッグを⾏うときの設定ファイルです。

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 27 src/test.php テスト⽤のPHPです。

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 28 では、実際に起動してみましょう。「セットアップ」でご説明した⼿順 に従って、Codespaceを作成します。もちろん、そのときのGitリポジト リの指定先は、先程のファイルを格納しているリポジトリです。 画⾯左上の波平のおでこみたいな のをクリックして、「Terminal」 →「New Terminal」の順にクリッ クします。

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 29 ターミナルで以下のコマンドを実⾏して、Apacheを起動します。 root@vsonline_b1caf925-1600-4c16-9626-46e9765c4740:~/workspace/vscodespaces# /etc/init.d/apache2 start [....] Starting Apache httpd web server: apache2AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.0.1. Set the 'ServerName' directive globally to suppress this message . ok ちなみに補⾜なのですが、PHPのDocker公式イメージをはデフォルトでApacheのプロセスが起動するよう になっています。ただし、Visual Studio Codespaces(Visual Studio Codeもそうですが)、Dockerコンテ ナ起動時のコマンドを「while sleep 1; do :; done」で上書きして、Apacheが起動しません。これを防⽌ するためには、devcontainer.jsonに「”overrideCommand”: false」とすればいいのですが、なぜかこれ をやると上⼿く動作しなかったため、都度Apacheを起動しています。

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 30 画⾯左部の⾍みたいなマークをクリックして、「Listen for XDebug」を クリックします。これでXDebugが起動します。

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 31 test.phpを開いてブレークポイントを付与します。

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 32 画⾯左部のパソコンみたいなマークをクリックします。すると下図のように、コンテナに転送 しているポートの⼀覧が表⽰され、その中に「Port: 80」があります。それを右クリックして、 「Copy Port URL」をクリックして下さい。これは、Visual Studio Codespacesが動作して いるコンテナに接続するためのURLです。Visual Studio CodeをローカルPCで動作している ときのlocalhostに相当するものです。

© SIOS Technology, Inc. All rights Reserved. カスタマイズ 33 別ブラウザを起動して、URLの⼊⼒欄に、「先程コピーしたURL/test.php」と⼊⼒して下さ い。これで、デバッグ対象のtest.phpにアクセスできます。Visual Studio Codespacesの画 ⾯を⾒ると、ブレークポイントを付与したところで⽌まっているのがわかります。

© SIOS Technology, Inc. All rights Reserved. まとめ 34

© SIOS Technology, Inc. All rights Reserved. まとめ 35 Visual Studio Codespaces すごい︕︕

© SIOS Technology, Inc. All rights Reserved. まとめ 36 Visual Studio Codespacesを使って、 ブラウザだけでPythonでサクッとハロワ︕ https://tech-lab.sios.jp/archives/20257 ؔ࿈ϒϩά Visual Studio Codespacesでブラウザだけで本格アプリ開発︕︕ https://tech-lab.sios.jp/archives/20133 【連載】世界⼀わかりみが深いコンテナ & Docker⼊⾨ https://tech-lab.sios.jp/archives/18811

© SIOS Technology, Inc. All rights Reserved. まとめ 37 ご清聴ありがとうございました