The latest articles on DEV Community by ven (@venkatsgithub1). https://dev.to/venkatsgithub1 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F397659%2F6c945701-8381-408b-8f68-227e98d94b20.jpeg https://dev.to/venkatsgithub1 en ven Tue, 22 Mar 2022 18:51:23 +0000 https://dev.to/venkatsgithub1/http2-setup-for-spring-boot-angular-with-nginx-containerized-3lh2 https://dev.to/venkatsgithub1/http2-setup-for-spring-boot-angular-with-nginx-containerized-3lh2 <h6> This is my first post </h6> <p><strong>This demo is just to scratch the surface with Http2 using Spring.</strong></p> <p><strong>You can find code at <a href="https://github.com/venkatsgithub1/http2-with-spring-angular">Github</a><br> Kindly follow the code to understand the API requests in Spring and Angular.</strong></p> <p>To enable Http2 with Spring, we need SSL enabled on Spring.<br> With nginx, we need to add which port is needed to be used with Http2.</p> <p>I used docker compose to easily startup the entire application.</p> <h3> Here is what I tried and worked: </h3> <h4> To enable http2 in Spring, we need to enable https first. </h4> <ul> <li>Create a self signed certificate, since this is a demo</li> <li>Use following properties in application.properties for ssl: <ul> <li><code>server.ssl.key-store-type=PKCS12</code></li> <li><code>server.ssl.key-store=/etc/ssl/certs/https2_test.p12</code></li> <li><code>server.ssl.key-store-password=https2_test</code></li> <li><code>server.ssl.key-alias=https2_test</code></li> <li><code>server.ssl.enabled=true</code></li> </ul> </li> <li>Enable http2 using the following: <ul> <li><code>server.http2.enabled=true</code></li> </ul> </li> <li>I am using 8443 as embedded tomcat server port.</li> <li>Application code is self explanatory, has two endpoints.</li> </ul> <h3> For UI, Angular is used and code is being deployed into nginx. </h3> <ul> <li>UI code is simple, and has two API calls in ngOnInit.</li> </ul> <h3> Docker compose is used to start up both backend and frontend. </h3> <ul> <li>Backend dockerfile steps: <ul> <li><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jti4YZtY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mdqto58q4extjm19j4wp.png" alt="Backend Dockerfile" width="880" height="382"></li> <li>Dockerfile on the backend side is straightforward:</li> <li>It uses maven java image as builder</li> <li>Copies code into workdir</li> <li>Runs mvn clean install</li> <li>Uses jdk14 image, copies jar, certificates there</li> <li>Importing certificate to cacerts</li> <li>Finally run jar.</li> </ul> </li> <li>Frontend dockerfile steps: <ul> <li><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3tiuLJZw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0fob51j6llghssmstwc.png" alt="Image description" width="586" height="367"></li> <li>Uses node lts image as builder</li> <li>Copy all code</li> <li>Run npm install and build</li> <li>Use nginx alpine image to copy build files</li> <li>I created a custom default.conf and copied it to <code>/etc/nginx/conf.d/</code> <ul> <li>The custom default.conf has settings related to http2 and ssl certs</li> </ul> </li> <li>Add certs into nginx locations: <ul> <li><code>/etc/ssl/private/</code></li> <li><code>/etc/ssl/certs/</code></li> </ul> </li> <li>Start nginx with daemon off.</li> </ul> </li> </ul> <h3> Changes to default.conf of nginx </h3> <ul> <li>Add following below default 80 port localhost: <ul> <li><code>listen 443 ssl http2 default_server;</code></li> <li><code>listen [::]:443 ssl http2 default_server;</code></li> <li><code>ssl_certificate /etc/ssl/certs/nginx-selfsigned.crt;</code></li> <li><code>ssl_certificate_key /etc/ssl/private/nginx-selfsigned.key;</code></li> <li>These steps are saying, here are my certs, use 443 for http2 with ssl.</li> </ul> </li> </ul> <h3> Docker compose </h3> <ul> <li><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6KZZr_Q5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bno2yg10e7efvwvdvsm.png" alt="Docker compose yml" width="397" height="270"></li> <li>Compose is pretty simple, it has steps in yml to build backend and frontend:</li> <li>Backend: <ul> <li>sbh2 is spring boot http2 service, we just have container name here and build from current path.</li> </ul> </li> <li>Frontend: <ul> <li>fengh2 is frontend nginx http2 service, it exposes 80 and 443 on 8080 and 8443 respectively, build location and container name.</li> </ul> </li> <li>To build and start, we use: <code>docker compose up</code> </li> </ul> <h3> Demonstration </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--yRIO_qkq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/venkatsgithub1/http2-with-spring-angular/blob/master/images/requests1.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--yRIO_qkq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/venkatsgithub1/http2-with-spring-angular/blob/master/images/requests1.png%3Fraw%3Dtrue" alt="Requests with Network" width="880" height="442"></a><br> <strong>In the network tab, we see that the hello and random-quote API calls are showing protocol h2 indicating Http2.</strong><br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--90MHIsLB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/venkatsgithub1/http2-with-spring-angular/blob/master/images/requests2.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--90MHIsLB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/venkatsgithub1/http2-with-spring-angular/blob/master/images/requests2.png%3Fraw%3Dtrue" alt="Console" width="880" height="578"></a></p> spring http2 webdev github