Visual Studio Code + Docker + Remote DevelopmentでTomcat上のWebアプリを超簡単にデバッグ

Visual Studio Code + Docker + Remote DevelopmentでTomcat上のWebアプリを超簡単にデバッグ

D0f5daa7cc3a26140c06ea29e5e235cc?s=128

Noriyuki TAKEI

February 19, 2020
Tweet

Transcript

  1. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    #3 〜 VS Code + Docker + Remote Developmentで Tomcat上のWebアプリを 超簡単にデバッグ 〜 技術部 2020年2⽉19⽇ 武井 宜⾏ サイオステクノロジー株式会社
  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 使ってますか︖ 本セッションの ブログのURL
  4. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    4 Internal Only リモートサーバー上のコードを直接編集が可能 SSHで接続可能なリモートサーバーやコンテナ、WSL上に あるファイルをVisual Studio Codeから直接編集できる Remote Developmentとは︖ 拡張機能をリモートサーバーにインストールし、 リモートサーバー上で動作させることが可能 本セッションの ブログのURL
  5. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    5 Internal Only 今回は Tomcat上の Webアプリを VS Codeでデバッグします。 本セッションの ブログのURL
  6. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    6 Internal Only まずはちょっと イケてないやり⽅ 本セッションの ブログのURL
  7. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    7 Internal Only 本セッションの ブログのURL OS PC Tomcat Web アプリケーション Java Visual Studio Code Tomcat for Java プラグイン ソースコード 構成はこんな感じ
  8. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    8 Internal Only 本セッションの ブログのURL Java Extension Pack(Javaのコード補完などを⾏ってくれる便利な拡 張機能)を⼊れます。
  9. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    9 Internal Only 本セッションの ブログのURL Tomcat for Javaプラグインを⼊れます。今回のキモです。これで Tomcat上のWebアプリを稼働・デバッグ出来ます。
  10. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    10 Internal Only 本セッションの ブログのURL Mavenでプロジェクトの雛形を作成します。 $ mvn archetype:generate -DgroupId=com.example \ -DartifactId=helloworld \ -DarchetypeArtifactId=maven-archetype-webapp \ -DinteractiveMode=false こんなファイルとディレクトリが 出来上がります。
  11. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    11 Internal Only サンプルのサーブレットを作成します。普通のハロワです。 package com.example; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class Hello extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException { PrintWriter out; res.setContentType("text/html; charset=utf-8"); out = res.getWriter(); out.println("<html><body>"); out.println("<h1>Hello World!</h1>"); out.println("</body></html>"); } } Hello.java 本セッションの ブログのURL
  12. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    12 Internal Only 本セッションの ブログのURL 先程作成したHello.javaを以下のようなディレクトリを作成して配置 します。
  13. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    13 Internal Only おなじみのpom.xmlです。 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven- v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.example</groupId> <artifactId>helloworld</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>helloworld Maven Webapp</name> <url>http://maven.apache.org</url> <!-- ここから追加 --> <properties> <maven.compiler.source>1.6</maven.compiler.source> <maven.compiler.target>1.6</maven.compiler.target> </properties> <!-- ここまで追加 --> pom.xml 本セッションの ブログのURL
  14. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    14 Internal Only <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <!-- ここから追加 --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.0.1</version> <scope>compile</scope> </dependency> <!-- ここまで追加 --> </dependencies> <build> <finalName>helloworld</finalName> </build> </project> pom.xml 〜 前ページからの続き 〜 本セッションの ブログのURL
  15. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    15 Internal Only web.xmlに以下の内容を追加します。おなじみのServletのURLマッピ ングですね。 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app> <display-name>Archetype Created Web Application</display-name> <!-- ここから追加 --> <servlet> <servlet-name>Hello</servlet-name> <servlet-class>com.example.Hello</servlet-class> </servlet> <servlet-mapping> <servlet-name>Hello</servlet-name> <url-pattern>/hello</url-pattern> </servlet-mapping> <!-- ここまで追加 --> </web-app> web.xml 本セッションの ブログのURL
  16. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    16 Internal Only 本セッションの ブログのURL Tomcatをダウンロードして解凍します(2020年1⽉22⽇時点での8.5 系最新バージョンです)。 $ wget http://ftp.riken.jp/net/apache/tomcat/tomcat-8/v8.5.50/bin/apache- tomcat-8.5.50.tar.gz $ tar xzvf apache-tomcat-8.5.50.tar.gz
  17. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    17 Internal Only 解凍して出来たTomcatディレクトリをMavenプロジェクト直下に移動 します。以下のようになります。 本セッションの ブログのURL
  18. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    18 Internal Only Visual Studio Code左メニュー部最上部の四⾓が2つ重なっているア イコンをクリックして「Open Folder」をクリックします。そして先 程作成した「helloworld」のディレクトリを選択します。 本セッションの ブログのURL
  19. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    19 Internal Only 本セッションの ブログのURL コマンドパレットを起動します。
  20. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    20 Internal Only 本セッションの ブログのURL 「Tomcat: Add Tomcat Server」を選択します。
  21. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    21 Internal Only 先程Tomcatを解凍したディレクトリ(apache-tomcat-8.5.50)を選択 します。 本セッションの ブログのURL
  22. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    22 Internal Only 本セッションの ブログのURL 画⾯左下部に「TOMCAT SERVERS」というのが表⽰され、その中に 先程選択したTomcatが表⽰されます。右クリックして「Start」をク リックします。
  23. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    23 Internal Only 下記のように緑⾊になれば、正常に起動した証拠です。 本セッションの ブログのURL
  24. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    24 Internal Only 本セッションの ブログのURL 「helloworld」ディレクトリに移動し、以下のコマンドを実⾏して warファイルを作成します。 $ mvn package
  25. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    25 Internal Only 本セッションの ブログのURL targetディレクトリ配下に「helloworld.war」ができますので、それ を右クリックして「Debug on Tomcat Server」をクリックします。
  26. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    26 Internal Only 本セッションの ブログのURL Hello.javaを開いて、任意の地点にブレークポイントを打ちます。
  27. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    27 Internal Only 本セッションの ブログのURL 「http://127.0.0.1:8080/helloworld/hello」にブラウザでアクセス します。すると先程ブレークポイントを打ったところで⽌まりま す︕︕ステキーΣ(゚∀゚ノ)ノキャー
  28. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    28 Internal Only 本セッションの ブログのURL イケてない・・・
  29. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    29 Internal Only 本セッションの ブログのURL OS PC Tomcat Web アプリケーション Java Visual Studio Code Tomcat for Java プラグイン ソースコード プラグインをローカルにイ ンストールしなければなら ない。 JavaやTomcatをローカル にインストールしなければ ならない。
  30. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    30 Internal Only 本セッションの ブログのURL それ、 Remote Developmentと Dockerで 解決できますから︕︕
  31. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    31 Internal Only 本セッションの ブログのURL Remote DevelopmentとDockerを使うとこんな感じになります。
  32. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    32 Internal Only 本セッションの ブログのURL 左部メニュー最下部にあるアイコン(四⾓が4つ並んでいるもの)をク リックし、「remote development」と⼊⼒し、Remote Developmentの拡張機能をインストールします。
  33. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    33 Internal Only 本セッションの ブログのURL 次に新しいディレクトリを作成し、以下のようにファイルを作成しま す。srcディレクトリとpom.xmlは先程作成したものからまんまコピー したものです。そして今回新しく作成する必要があるのは、以下の2つ です。 • .devcontainerディレクトリとその配下のファイル • .vscodeディレクトリとその配下のファイル
  34. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    34 Internal Only 本セッションの ブログのURL まず.devcontainer/Dockerfileの内容から説明します。コンテナを作 成するために必要なおなじみのものです。 # Tomcatのイメージをダウンロードします。 FROM tomcat:8.5.49-jdk8-openjdk # ローカルのソースコードをマウントするためのディレクトリを作成します。 RUN mkdir /opt/project # Mavenをインストールします。 RUN apt-get update && \ apt-get -y install maven Dockerfile
  35. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    35 Internal Only 次に.devcontainer/devcontainer.jsonの内容です。VS Codeからコ ンテナを⽣成するための設定を記載します。 { # 任意の名前でOKです。 "name": "Hello", # Remoteでログインしたいコンテナを作成するためのDockerfileの名称を指定します。 "dockerFile": "Dockerfile", # この設定によりホストOSの8080宛の通信がコンテナの8080に転送されます。 "forwardPorts": [8080], # コンテナに⼊ったときに最初にここで指定したものがカレントディレクトリになります。 "workspaceFolder": "/opt/project", # ホストOSのVisual Studio Codeのプロジェクト直下のディレクトリをコンテナの/opt/projectディ レクトリにマウント>します。 "mounts": [ "source=${localWorkspaceFolder},target=/opt/project,type=bind,consistency=cached" ] devcontainer.json 本セッションの ブログのURL
  36. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    36 Internal Only # コンテナが⽣成されたときに、コンテナ側にインストールする拡張機能です。 # これを指定しないと、コンテナが再⽣成すると拡張機能が消えます。 # 今回はJava Extension PackとTomcat for Javaをインストールします。 "extensions": [ "adashen.vscode-tomcat", "vscjava.vscode-java-pack" ] } devcontainer.json 〜 前ページからの続き 〜 本セッションの ブログのURL
  37. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    37 Internal Only 本セッションの ブログのURL 次に.vscode/settings.jsonの内容です。これはHot Code Replaceの 定義です。これをautoにしておくと、javaファイルを変更したときに、 わざわざwarを作り直さなくても、⾃動的にTomcatに変更内容が反映 されます。 { "java.debug.settings.hotCodeReplace": "auto" } settings.json
  38. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    38 Internal Only 本セッションの ブログのURL これで準備は整いました。Remote Developmentの機能でコンテナに 接続します。Visual Studio Codeの左隅にある緑のボタンをクリック します。
  39. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    39 Internal Only 本セッションの ブログのURL すると以下のようなリストが表⽰されますので、「Remote- Containers: Open Folder in Container…」 をクリックします。そし て先程作成したディレクトリを選択します。
  40. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    40 Internal Only 本セッションの ブログのURL 初回はちょっと時間がかかります。
  41. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    41 Internal Only 本セッションの ブログのURL コマンドパレットを起動します。
  42. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    42 Internal Only 本セッションの ブログのURL 「Tomcat: Add Tomcat Server」を選択します。
  43. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    43 Internal Only 本セッションの ブログのURL コンテナ側のTomcatディレクトリである「/usr/local/tomcat」を選 択して、「OK」をクリックします。
  44. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    44 Internal Only 本セッションの ブログのURL 画⾯左下部に「TOMCAT SERVERS」というのが表⽰され、その中に 先程選択したTomcatが表⽰されます。右クリックして「Start」をク リックします。
  45. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    45 Internal Only 本セッションの ブログのURL 下記のように緑⾊になれば、正常に起動した証拠です。
  46. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    46 Internal Only 本セッションの ブログのURL TERMINALにて「mvn package」と⼊⼒してwarファイルを作成しま す。
  47. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    47 Internal Only 本セッションの ブログのURL targetディレクトリ配下に「helloworld.war」ができますので、それ を右クリックして「Debug on Tomcat Server」をクリックします。
  48. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    48 Internal Only 本セッションの ブログのURL Hello.javaを開いて、任意の地点にブレークポイントを打ちます。
  49. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    49 Internal Only 本セッションの ブログのURL 「http://127.0.0.1:8080/helloworld/hello」にブラウザでアクセス します。すると先程ブレークポイントを打ったところで⽌まりま す︕︕ステキーΣ(゚∀゚ノ)ノキャー
  50. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    50 Internal Only 本セッションの ブログのURL 繰り返しになりますが、今回の環境は以下の通りとてもスッキリして ます。
  51. © SIOS Technology, Inc. All rights Reserved. VS Code Meetup

    51 Internal Only VS Code スゴイ︕︕ 本セッションの ブログのURL
  52. © SIOS Technology, Inc. All rights Reserved. さいごに 52 Internal

    Only 本資料の内容は 以下のブログで公開しています。 技術ブログ「SIOS TECH.LAB」 https://tech-lab.sios.jp/
  53. © SIOS Technology, Inc. All rights Reserved. さいごに 53 Internal

    Only 2019年11⽉号のSoftware Designの Azure特集に執筆しました。