VS Code Meetup 〜Remote Developmentと Dockerで快適Web開発〜

Transcript

1. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 〜Remote Developmentと Dockerで快適Web開発〜 技術部 2019年12⽉18⽇ 武井 宜⾏ サイオステクノロジー株式会社
2. © SIOS Technology, Inc. All rights Reserved. About me 2 Internal Only BCPVU
   NF Noriyuki TAKEI ෢Ҫ ٓߦ Information • サイオステクノロジー株式会社 • クラウドネイティブアプリケーション • 千葉県在住 Favorites • Azure • Squash • Sweets blog https://tech-lab.sios.jp/ core skill Azure Kubernetes Service Azure Bot Service
3. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 3 Internal Only みなさん、 Visual Studio Codeの Remote Development 使ってますか︖
4. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 4 Internal Only リモートサーバー上のコードを直接編集が可能 SSHで接続可能なリモートサーバーやコンテナ、WSL上に あるファイルをVisual Studio Codeから直接編集できる Remote Developmentとは︖ 拡張機能をリモートサーバーにインストールし、 リモートサーバー上で動作させることが可能
5. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 5 Internal Only 開発エンジニア GitHub Jenkins Docker hubなどの Dockerレポジトリ Kubernetes 開発エンジニアが ソースをコミット します。 GitHubのwebhookの機能を 使って、Jenkinsの特定のURL を叩きます。 Docker使うとCI/CD的にウレシイ
6. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 6 Internal Only 開発エンジニア GitHub Jenkins Docker hubなどの Dockerレポジトリ Kubernetes Dockerイメージ Docker使うとCI/CD的にウレシイ webhookをトリガーにしてJenkins が起動する。まずはじめに、ソース コードをgit pullします。 Dockerのコマンドで、ビルドしたア プリケーションを含むDockerイメー ジを作成します。
7. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 7 Internal Only 開発エンジニア GitHub Jenkins Docker hubなどの Dockerレポジトリ Kubernetes Docker使うとCI/CD的にウレシイ DockerイメージをDockerレポジト リにプッシュします。 webookでステージング環境の特定 のURLが叩かれたことをトリガーに して、Dockerリポジトリから Dockerイメージをpullします。
8. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 8 Internal Only Remote Developmentがないとどうなるの︖ Apache PHP ソースコード Dockerコンテナ Docker Engine OS ソースコード PC 同期 Visual Studio Code デバッグ Xdebug 編集
9. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 9 Internal Only Remote Developmentがないとどうなるの︖
10. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 10 Internal Only Remote Developmentがあると…(^o^) Apache PHP ソースコード Dockerコンテナ Docker Engine OS PC Visual Studio Code デバッグ 編集 Xdebug
11. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 11 Internal Only Remote Developmentがあると…(^o^)
12. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 12 Internal Only インストールは ラクチン
13. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 13 Internal Only Remote Developmentを可能にする拡張機能をインストールします。左 部メニュー最下部にあるアイコン(四⾓が4つ並んでいるもの)をクリックし、 「remote development」と⼊⼒し、Remote Developmentの拡張機能 をインストールします。
14. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 14 Internal Only Visual Studio Codeで、PHPのデバッグが可能になる拡張機能をインストール します。左下の緑のボタンをクリックして下さい。
15. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 15 Internal Only これだけ
16. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 16 Internal Only これから 簡単なPHPアプリを Dockerコンテナ上で デバッグします。
17. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 17 Internal Only Dockerfile docker-compose.yml html index.php xdebug xdebug.ini .devcontainer devcontainer.json → テスト⽤のスクリプト → xdebugの設定ファイル → コンテナの設定ファイル ファイル構成は以下のとおりです。
18. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 18 Internal Only # Apache上でPHPが動くDockerイメージを取得 FROM php:7.3.8-apache # xdebugの設定をコンテナにコピー ADD xdebug/xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini # xdebugのインストール RUN pecl install xdebug && docker-php-ext-enable xdebug %PDLFSGJMF
19. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 19 Internal Only version: '3' services: php: build: . ports: - '8080:80ʼ # ローカルのhtmlディレクトリをコンテナの/var/www/htmlにマウント volumes: - ./html:/var/www/html EPDLFSDPNQPTFZNM
20. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 20 Internal Only // なんの変哲もないただのPHPスクリプト <?php $a = 1; if ($a === 1) { echo "hoge"; } else { echo "fuga"; } ?> IUNMJOEFYQIQ
21. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 21 Internal Only # リモートデバッグ接続先です。今回はサーバー側にXdebugが動くので、 # 127.0.0.1を指定します。 xdebug.remote_host = 127.0.0.1 # リモートデバッグを⾃動で開始します。 xdebug.remote_autostart = 1 # リモートデバッグを有効にします。 xdebug.remote_enable = 1 # リモートデバッグの接続ポートです。 xdebug.remote_port = 9000 YEFCVHJOJ
22. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 22 Internal Only { # 任意の名前 "name": "Existing Docker Compose (Extend)", # Remoteでログインしたいコンテナを作成するためのdocker compose "dockerComposeFile": [ "../docker-compose.yml", ], # 先程指定したdocker composeファイル内に定義しているサービスで # 起動したいもの "service": "php", # コンテナに⼊ったときに下記のディレクトリにcdします。 "workspaceFolder": "/var/www/html", # コンテナが⽣成されたときにインストールする拡張機能です。 # これを指定しないと、コンテナが再⽣成すると拡張機能が消えます。 "extensions": ["felixfbecker.php-debug"] } EFWDPOUBJOFSEFWDPOUBJOFSKTPO
23. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup 23 Internal Only Dockerコンテナ内部 のTerminalにすでに ログイン状態のものが 表⽰されます。 デバッグできます。
24. © SIOS Technology, Inc. All rights Reserved. さいごに 24 Internal Only 本資料の内容は 以下のブログで公開しています。 技術ブログ「SIOS TECH.LAB」 https://tech-lab.sios.jp/
25. © SIOS Technology, Inc. All rights Reserved. さいごに 25 Internal Only 先⽉発売のSoftware Designの Azure特集に執筆しました。