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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

© 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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

© 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 こんなファイルとディレクトリが出来上がります。

Slide 11

Slide 11 text

© 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(""); out.println("

Hello World!

"); out.println(""); } } Hello.java 本セッションのブログのURL

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup 13 Internal Only おなじみのpom.xmlです。 4.0.0 com.example helloworld war 1.0-SNAPSHOT helloworld Maven Webapp http://maven.apache.org 1.6 1.6 pom.xml 本セッションのブログのURL

Slide 14

Slide 14 text

Slide 15

Slide 15 text

© SIOS Technology, Inc. All rights Reserved. VS Code Meetup 15 Internal Only web.xmlに以下の内容を追加します。おなじみのServletのURLマッピングですね。 Archetype Created Web Application Hello com.example.Hello Hello /hello web.xml 本セッションのブログのURL

Slide 16

Slide 16 text

© 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

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

© 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をローカルにインストールしなければならない。

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

© 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

Slide 35

Slide 35 text

© 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

Slide 36

Slide 36 text

© 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

Slide 37

Slide 37 text

© 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