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

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

D0f5daa7cc3a26140c06ea29e5e235cc?s=128

Noriyuki TAKEI

December 18, 2019
Tweet

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 BCPVUNF 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特集に執筆しました。