I tried to build an http2 development environment with Eclipse + Tomcat

Introduction

This article is about the event "Tech Connect! Autumn" hosted by Link Information Systems. It is a relay article of. "Tech Connect! Autumn" is relayed by a group member of engineer.hanzomon. (Click here for the Link Information Systems Facebook page (https://ja-jp.facebook.com/lis.co.jp/))

Today is the 5th day, @usankusai will post an article "I tried to build an http2 development environment with Eclipse + Tomcat".

Trigger

At first, when I heard this event, I was thinking about making an article that investigated the differences in the mechanism and implementation of real-time communication, especially Websocket and polling, which I had been interested in for some time. However, @ kimullaa's article posted on qiita, [How to realize a real-time web application (polling, Comet, Server Sent Events, WebSocket)](https://www.kimullaa.com/entry/2016/ Since a transcendentally easy-to-understand article with illustrations and sample code was already created on 01/17/231359), I decided to make it different. POSTD's translated article "Be careful with WebSocket" linked at the end of "Implementation impression" of the above article. ”, The precautions for WebSocket communication and the introduction of polling and messaging by HTTP 2.0 are described as an alternative. Originally, I was thinking "Real-time communication is WebSocket even if I say something", so I looked at POSTD's article and said "Isn't it easy to choose WebSocket? Or, HTTP 2.0? I often ask, but what kind of functions do you have? How do you create a development environment in the first place? ”, So I decided to create an http2.0 development environment at this event. did.

Overview

I will describe the procedure for creating an http2 development environment with Eclipse + Tomcat in the flow I tried. However, its practicality is unknown because it is an environment where only http2 communication is confirmed. I don't know.

Required environment

１：Eclipse -In this article, I used Eclipse Photon's Pleiades All in One (Java Full Edition). Pleiades All in One Download Page

２：Tomcat -In this article, I used Tomcat 9.0.10 included in 1 Pleiades All in One. -If you check Tomcat official page, it seems that the operation requirements of http2 are different for each version. -For Ver8.5.x

Apache Tomcat 8.5.x includes the following significant improvements: •Adds support for HTTP/2 (requires the Tomcat Native library)

-For Ver9.x

•Adds support for HTTP/2 (requires either running on Java 9 (since Apache Tomcat 9.0.0.M18) or the Tomcat Native library being installed)

Up to ver8.5.x, it seems that Tomcat Native library is required separately in addition to Tomcat, but in ver9.x, http2 communication seems to be possible by installing Java9 even if there is no Tomcat Native library. In this article, http2 communication is realized by implementation that does not use Tomcat Native library.

３：JDK -In this article, I used JDK 10.0.1, which is included in 1 Pleiades All in One.

４：OpenSSL -In this article, we will implement http2 via https communication. A self-signed certificate (so-called oleore certificate) is issued for testing to realize https communication. -Refer to the article by atmarkit, [Shining Light Productions](https://slproweb.com/ I installed Win64 OpenSSL v1.1.0i published on index.html)'s page. → Win32 OpenSSL download page

Preparation

Please decompress Eclipse to an appropriate folder in advance, and make sure that OpenSSL has been installed and Path settings completed. These steps are explained carefully in the article by atmarkit mentioned above.

Publish files required for https communication using OpenSSL

First, use OpenSSL to issue a self-signed certificate for testing. When you start the command prompt and execute the following command, the public key (certificate) tomcat.crt </ strong> and the private key tomcat.key </ strong> are output to the current directory. Will be done.

C:\>openssl req -newkey rsa:2048 -nodes -keyout tomcat.key -subj "/C=JP/ST=Saitama/L=Saiatama/O=hogehoge/CN=localhost" -x509 -days 365 -out tomcat.crt .+++ ............................+++ writing new private key to 'tomcat.key' -----

6.jpg

Furthermore, a PKCS # 12 format personal information exchange file tomcat.pfx </ strong> is created based on the two files generated above.

C:>openssl pkcs12 -inkey tomcat.key -in tomcat.crt -export -out tomcat.pfx

After executing the command, you will be prompted to enter the encryption password, so enter it. (In the article, let's call it '123456')

Enter Export Password: Verifying - Enter Export Password:

16.jpg

If the following three files are generated by the above procedure, the files required for https communication are ready. 17.jpg

Import the personal information exchange file and certificate into your browser.

Import of personal information exchange file

If you want to display the test page created this time on the browser, you need to import the self-signed certificate on the browser side. If it is not imported, for example, in the case of IE (Internet Explorer), the following will be displayed and the test page cannot be displayed. 7.jpg

The procedure for importing a certificate differs depending on the browser, but the procedure for IE is as follows.

First, select [Tools] → [Internet Options]. 8.jpg

Select the [Content] tag in the Internet Options window that pops up, and click the [Certificate] button. 9.jpg

The certificate window will pop up. Make sure that the [Personal] tab is selected, and click the [Import] button. 10.jpg

The Import Wizard will be displayed. Click the [Next] button. 11.jpg

You will be asked for the certificate file to import, so select the personal information exchange file tomcat.pfx </ strong> created earlier and click the [Next] button.

  • If the pfx file is not displayed, you can display the pfx file by changing the file format at the bottom right. 18.jpg 19.jpg

You will be prompted to enter the password you entered when outputting the pfx file. Enter the password and click the [Next] button. 20.jpg

Make sure [Personal] is selected as the certificate store to store the file, and click the [Next] button. 21.jpg

Finally, a confirmation screen will appear, so click the [Finish] button. 22.jpg

You will be returned to the certificate window. If the certificate issued to "localhost" is registered in the [Personal] tab, the import of the personal information exchange file will be completed. 23.jpg

Certificate import

Then import the certificate. Select the [Trusted Root Certification Authorities] tab in the certificate window and click the [Import] button. 24.png

From here, the procedure is basically the same as importing a personal information exchange file, but select tomcat.crt </ strong> as the file to import.

25.jpg

26.jpg

27.jpg

28.jpg

When you click the [Finish] button when the Certificate Import Wizard is completed, the following dialog may be displayed. Select [Yes].

29.jpg

You will be returned to the certificate window. If the certificate issued to "localhost" is registered in the [Trusted Root Certification Authorities] tab, the certificate import will be completed. 30.jpg

Start the tomcat debug server from eclipse

Next is the Eclipse settings. First, start Eclipse. 1.jpg

Change the perspective for Java EE. 2.jpg3.jpg

First, set the JDK settings and the Tomcat runtime environment configuration. Select [Window] → [Settings] and select 31.jpg

Select [Installed JRE] in the [Java] tree of the setting window, and click the [Add] button on the right screen. 34.jpg

Make sure that [Standard VM] is selected as the JRE type, and click the [Next] button. 35.jpg

In the JRE definition, select the root directory of JDK10 in the java folder in pleiades as the JRE home, confirm that "jrt-fs.jar" has been added to the JRE system library, and click [Finish]. Press the button. 36.jpg

Going back to the settings window, I just added it to the installed JRE Since JDK10 is displayed, click the [Apply] button with this selected. This completes the JDK settings. 37.jpg

Next, set up the Tomcat runtime environment and build a debug server. Select [Runtime Environment] in the [Server] tree of the setting window, and click the [Add] button on the right screen. 32.jpg

Select [Apache Tomcat v9.0] as the runtime environment type, check [Create new local server], and click the [Next] button. 33.jpg

Select the Tomcat9 root directory included in pleiades in the Tomcat installation directory from the JRE pull-down menu, select JDK10 added in the above procedure, and click the [Finish] button. 38.jpg

When you return to the settings window, Apache Tomcat V9.0 has been added to the server runtime environment, so click the [Apply and Close] button to close the window. 39.jpg

You will be returned to the Eclipse IDE window. Click the Debug tab at the bottom of the screen and make sure that the Tomcat V9.0 debug server is registered. 40.jpg

Finally, start the debug server and check that the startup process runs without any problems. Right-click on the Tomcat V9.0 server added to the Debug tab and select Debug from the context menu. 41.jpg

After selecting, click the [Console] tab to display the execution result of the processing at startup. Like the evidence below -Only the information category message is displayed (when an error occurs, a warning or critical category message is displayed). -The last message is "Server startup in ~" Make sure. 42.jpg

If it is as above, the debug server can be started successfully.

Implement the sample page and check the protocol you are using.

Next, implement a sample page to check the protocol you are using.

First, add a project to display the sample page in Eclipse. Right-click on the Project Explorer on the left side of Eclipse and select New> Dynamic Web Project from the context menu. 43.jpg

In the new dynamic web project window, enter "Test Project" as the project name and click the [Finish] button. 44.jpg

The Test Project will be added to the Project Explorer. Expand the Test Project, right-click on "Web Content", and select [New] → [JSP File] from the context menu that opens. 45.jpg

In the new JSP file window, change the file name to "index.jsp" and click the [Finish] button. 46.jpg

Then, the tab of index.jsp is displayed in the center of the Eclipse screen. Here, rewrite the contents of index.jsp as follows and save by overwriting.

index.jsp


<%@ page contentType="text/html; charset=utf-8" %>
<% String protocolStr = request.getProtocol(); %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Protocol confirmation</title>
</head>
<body>
<h1>Protocol confirmation</h1>
<table border=1>
<tr><td>protocol</td></tr>
<tr><td>
<%= protocolStr %>
</td></tr>
</table>
</body>
</html>

47.jpg

Save the above jsp, right-click the running debug server from the [Server] tab at the bottom of eclipse, and select [Add / Remove] from the context menu. 48.jpg

In the Add / Remove window, select TestProject in the Available column and click the [Add] button. 49.jpg

After confirming that TestProject has moved from the available column to the configured column, click the [Finish] button. 50.jpg

Confirm that [Debug, Resume] is displayed in the status of the debug server, and right-click to display the context menu. Then select "Restart with Debug" from the context menu. 51.jpg

Select the [Console] tab and confirm that the server has started up without any error as before. 52.jpg

Now you have a test page on your debug server. Immediately display the test page from the browser.

The test page can be accessed at the address below. > http: // localhost: 8080 / TestProject / index.jsp

If you display it on a browser, you will see a screen like the one below. As you can see on the screen, in the current state, you can see that "HTTP / 1.1" is connected to the protocol. 53.jpg

With this, we have (finally) introduced the test page.

Follow the steps below to implement http2 communication.

Implement a connector for http2 communication.

Go back to Eclipse, expand the Servers folder in Project Explorer → the Tomcat v9.0 Server-config folder on your local host, and double-click server.xml to open it. 54.jpg

Probably the [Design] display is displayed as above in the initial state, so click the [Source] tab at the bottom of the server.xml tab to change to the source display as shown below. 55.jpg

In the source, find the Connector tag for the HTTP 1.1 protocol that you used to display the test page earlier. 56.jpg

Immediately after the above description, add the following Connector settings for the HTTP2 protocol and save by overwriting.

server.xml


    <Connector port="8543" SSLEnabled="true"
               protocol="org.apache.coyote.http11.Http11NioProtocol"
               sslImplementationName="org.apache.tomcat.util.net.jsse.JSSEImplementation">
        <UpgradeProtocol className="org.apache.coyote.http2.Http2Protocol" />
        <SSLHostConfig>
            <Certificate certificateKeystoreFile="conf/tomcat.pfx" certificateKeystorePassword="123456"/>
        </SSLHostConfig>
    </Connector>

61.jpg

  • The above settings were made with reference to hasalex's Post posted on github.

After saving the above

After saving, the status of the debug server will change to [Debug, Resume] status, so select [Restart with Debug] from the context menu as you did at the previous startup. 59.jpg

Communication using the http2 protocol is now possible.

Display test page via http2 communication

Now, let's display the test page via http2 communication.

Since it was HTTP 1.1 communication earlier, it was an address of "http ~", but in the HTTP 2 communication implemented this time, since it connects with https, the address will change as follows.

https://localhost:8543/TestProject/index.jsp

After accessing the address, if the protocol is displayed as "HTTP / 2.0" as shown below, the implementation is complete. 63.jpg

Just in case, check the communication protocol with IE developer tools. With IE open, press the [F12] key. 64.jpg

Select the [Network] tab and press the [(shaped like playback)] button. 65.jpg 67.jpg

When you press the above button, the [(play-like)] button changes to the [(stop-like)] button, so access the test page again in this state. 74.jpg

When you access the test page, the following display will be added to the network of developer tools. The protocol here is also "HTTP / 2". 81.png

Impressions

First of all, from the technical side. I have used Eclipse + Tomcat several times so I didn't have much trouble, but OpenSSL was my first experience and I had a little trouble here. Honestly, I've only been investigating this time to create an HTTP 2.0 environment for the time being, but I think I'll deepen my knowledge about this area from time to time. The original purpose is to experiment with HTTP 2.0 features in this environment, so I'd like to write an article about that as well if I have the opportunity.

And about article creation. Although qiita is dedicated to ROM, I have always been indebted to it, but I realized that it would be so difficult to write an article, of course; Especially after deciding the content of the article, I was quite worried about how to summarize it. So, this time, I almost gave up the summary and created an article in the form of describing the procedure I took as it is. However, of course, writing up to this point would naturally increase the amount of writing, resulting in physical difficulties; If I have another chance to write an article, I'll try to make it a little more informative for the reader and for the writer (myself) ...

Reference page

Some of them are mentioned in the article, In creating this article, I referred to the following page (honorific title omitted) -Atmarkit Install OpenSSL on Windows and handle certificates (Basic)

-hasalex/create-cert.sh(github)

-[Get Scheme for JavaDrive request method] (https://www.javadrive.jp/servlet/request/index7.html)

Recommended Posts