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

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup
#3 〜 VS Code + Docker + Remote Developmentで Tomcat上のWebアプリを超簡単にデバッグ〜技術部 2020年2⽉19⽇武井宜⾏サイオステクノロジー株式会社

© 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 Internal Only みなさん、 Visual Studio Codeの Remote Development 使ってますか︖ 本セッションのブログのURL

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

5 Internal Only 今回は Tomcat上の Webアプリを VS Codeでデバッグします。本セッションのブログのURL

6 Internal Only まずはちょっとイケてないやり⽅本セッションのブログのURL

7 Internal Only 本セッションのブログのURL OS PC Tomcat Web アプリケーション Java Visual Studio Code Tomcat for Java プラグインソースコード構成はこんな感じ

8 Internal Only 本セッションのブログのURL Java Extension Pack(Javaのコード補完などを⾏ってくれる便利な拡張機能)を⼊れます。

9 Internal Only 本セッションのブログのURL Tomcat for Javaプラグインを⼊れます。今回のキモです。これで Tomcat上のWebアプリを稼働・デバッグ出来ます。

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

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 Internal Only 本セッションのブログのURL 先程作成したHello.javaを以下のようなディレクトリを作成して配置します。

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 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 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 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 Internal Only 解凍して出来たTomcatディレクトリをMavenプロジェクト直下に移動します。以下のようになります。本セッションのブログのURL

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

19 Internal Only 本セッションのブログのURL コマンドパレットを起動します。

20 Internal Only 本セッションのブログのURL 「Tomcat: Add Tomcat Server」を選択します。

21 Internal Only 先程Tomcatを解凍したディレクトリ(apache-tomcat-8.5.50)を選択します。本セッションのブログのURL

22 Internal Only 本セッションのブログのURL 画⾯左下部に「TOMCAT SERVERS」というのが表⽰され、その中に先程選択したTomcatが表⽰されます。右クリックして「Start」をクリックします。

23 Internal Only 下記のように緑⾊になれば、正常に起動した証拠です。本セッションのブログのURL

24 Internal Only 本セッションのブログのURL 「helloworld」ディレクトリに移動し、以下のコマンドを実⾏して warファイルを作成します。 $ mvn package

25 Internal Only 本セッションのブログのURL targetディレクトリ配下に「helloworld.war」ができますので、それを右クリックして「Debug on Tomcat Server」をクリックします。

26 Internal Only 本セッションのブログのURL Hello.javaを開いて、任意の地点にブレークポイントを打ちます。

27 Internal Only 本セッションのブログのURL 「http://127.0.0.1:8080/helloworld/hello」にブラウザでアクセスします。すると先程ブレークポイントを打ったところで⽌まります︕︕ステキーΣ(ﾟ∀ﾟﾉ)ﾉｷｬｰ

28 Internal Only 本セッションのブログのURL イケてない・・・

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

30 Internal Only 本セッションのブログのURL それ、 Remote Developmentと Dockerで解決できますから︕︕

31 Internal Only 本セッションのブログのURL Remote DevelopmentとDockerを使うとこんな感じになります。

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

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

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

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

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

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

40 Internal Only 本セッションのブログのURL 初回はちょっと時間がかかります。

41 Internal Only 本セッションのブログのURL コマンドパレットを起動します。

42 Internal Only 本セッションのブログのURL 「Tomcat: Add Tomcat Server」を選択します。

43 Internal Only 本セッションのブログのURL コンテナ側のTomcatディレクトリである「/usr/local/tomcat」を選択して、「OK」をクリックします。

44 Internal Only 本セッションのブログのURL 画⾯左下部に「TOMCAT SERVERS」というのが表⽰され、その中に先程選択したTomcatが表⽰されます。右クリックして「Start」をクリックします。

45 Internal Only 本セッションのブログのURL 下記のように緑⾊になれば、正常に起動した証拠です。

46 Internal Only 本セッションのブログのURL TERMINALにて「mvn package」と⼊⼒してwarファイルを作成します。

47 Internal Only 本セッションのブログのURL targetディレクトリ配下に「helloworld.war」ができますので、それを右クリックして「Debug on Tomcat Server」をクリックします。

48 Internal Only 本セッションのブログのURL Hello.javaを開いて、任意の地点にブレークポイントを打ちます。

49 Internal Only 本セッションのブログのURL 「http://127.0.0.1:8080/helloworld/hello」にブラウザでアクセスします。すると先程ブレークポイントを打ったところで⽌まります︕︕ステキーΣ(ﾟ∀ﾟﾉ)ﾉｷｬｰ

50 Internal Only 本セッションのブログのURL 繰り返しになりますが、今回の環境は以下の通りとてもスッキリしてます。

51 Internal Only VS Code スゴイ︕︕ 本セッションのブログのURL

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

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

More Decks by Noriyuki TAKEI

Other Decks in Technology

Featured

Transcript