DEV Community: Sumer Ahmed

Deploy Spring Boot Applications with NGINX and Ubuntu

Sumer Ahmed — Fri, 07 Jun 2024 09:01:09 +0000

Step by step, do the following:

Installing Java JDK 17 or 21 However, a reasonably recent (LTS) release is recommended.

Ensure software-properties-common is installed.

sudo apt install software-properties-common

Install Amazon Corretto 21

wget -O - https://apt.corretto.aws/corretto.key | sudo gpg --dearmor -o /usr/share/keyrings/corretto-keyring.gpg && \
echo "deb [signed-by=/usr/share/keyrings/corretto-keyring.gpg] https://apt.corretto.aws stable main" | sudo tee /etc/apt/sources.list.d/corretto.list

sudo apt-get update; sudo apt-get install -y java-21-amazon-corretto-jdk

java -version

Installing NGINX

sudo apt install nginx

sudo systemctl status nginx

sudo systemctl restart nginx

Be shore you stop apache2 & allow OpenSSH and nginx ports throw `UFW`

sudo ufw allow OpenSSH
sudo ufw allow in "Nginx Full"
sudo ufw enable

sudo ufw status

install `unzip` and `zip` too

sudo apt install unzip zip

Installing the Spring Boot CLI

# Install sdkman The Software Development Kit Manager
curl -s "https://get.sdkman.io" | bash

# Install springboot CLI
sdk install springboot

# Note: if you get sdk not found, do the following
nano ~/.bashrc

## Add this line in the end of file
export PATH=$PATH:/usr/local/sdkman/bin

## Finally
source ~/.bashrc
sdk install springboot

## Then we can init new project like this

spring version

spring init --list
spring init --build=maven --java-version=21 --dependencies=web,data-jpa --packaging=jar app-name.zip

Install Maven

wget https://dlcdn.apache.org/maven/maven-3/3.9.6/binaries/apache-maven-3.9.6-bin.tar.gz
tar -xvf apache-maven-3.9.6-bin.tar.gz
mv apache-maven-3.9.6 /opt/

#  Setting M2_HOME and Path Variables
M2_HOME='/opt/apache-maven-3.9.6'
PATH="$M2_HOME/bin:$PATH"
export PATH

# Show the mvn version
mvn -version

Build the jar file

java -jar build/libs/app-name-0.0.1-SNAPSHOT.jar

Creating an Init Script for the Spring Boot Application

Do nano /etc/systemd/system/helloworld.service and add the content:

[Unit]
Description=Spring Boot app-name
After=syslog.target
After=network.target[Service]
User=username
Type=simple

[Service]
ExecStart=/usr/bin/java -jar /home/userdir/app-name/build/libs/app-name-0.0.1-SNAPSHOT.jar
Restart=always
StandardOutput=syslog
StandardError=syslog
SyslogIdentifier=appname

[Install]
WantedBy=multi-user.target

start the service

sudo systemctl start appname

Configuring a Reverse Proxy for the Spring Boot Application

server {
        listen 80;
        listen [::]:80;

        server_name example.com;

        location / {
            proxy_pass http://localhost:8080/;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-Port $server_port;
        }
}

sudo ln -s /etc/nginx/sites-available/appname.conf /etc/nginx/sites-enabled/
# Unlink the default
sudo unlink /etc/nginx/sites-enabled/default
# Test the conf
sudo nginx -t
# Restart nginx
sudo systemctl restart nginx

360 landing page using three.js and nuxt.js

Sumer Ahmed — Fri, 07 Jun 2024 08:58:02 +0000

In this post, I like to share how to create basic 360 landing page using three.js and nuxt.js.

Step 1: install new nuxt.js project

npx nuxi@latest init simple-app
cd simple-app
npm i

Step 2: install three.js

npm i three -D

now we are ready to go let’s create new component for our 360 landing page

Step 3: create new component

npx nuxi add component Landing

now we will create the component content like this

<script setup lang="ts">
import {
PerspectiveCamera,
Scene,
SphereGeometry,
TextureLoader,
MeshBasicMaterial,
Mesh,
WebGLRenderer,
MathUtils,
} from "three";

const container = ref()

const props = defineProps({
    panoramaUrl:{
        type: String,
        default: "img/hdri.webp"
    },
});

let camera, scene, renderer;
let isUserInteracting = false,
    onPointerDownMouseX = 0, onPointerDownMouseY = 0,
    lon = 0, onPointerDownLon = 0,
    lat = 0, onPointerDownLat = 0,
    phi = 0, theta = 0;

camera = new PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1100);
scene = new Scene();
const geometry = new SphereGeometry(1000, 100, 100);
const reader = new FileReader();

const onWindowResize= () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

const onPointerDown = (event) => {
    if (event.isPrimary === false) return;
    isUserInteracting = true;
    onPointerDownMouseX = event.clientX;
    onPointerDownMouseY = event.clientY;
    onPointerDownLon = lon;
    onPointerDownLat = lat;
    document.addEventListener('pointermove', onPointerMove);
    document.addEventListener('pointerup', onPointerUp);
}

const onPointerMove = (event) => {
    if (event.isPrimary === false) return;
    lon = (onPointerDownMouseX - event.clientX) * 0.1 + onPointerDownLon;
    lat = (event.clientY - onPointerDownMouseY) * 0.1 + onPointerDownLat;
}

const onPointerUp = () => {
    if (event.isPrimary === false) return;
    isUserInteracting = false;
    document.removeEventListener('pointermove', onPointerMove);
    document.removeEventListener('pointerup', onPointerUp);
}

const onDocumentMouseWheel = (event) => {
    const fov = camera.fov + event.deltaY * 0.05;
    camera.fov = MathUtils.clamp(fov, 10, 75);
    camera.updateProjectionMatrix();
}

const animate = () => {
    requestAnimationFrame(animate);
    update();
}

const update = () => {
    if (isUserInteracting === false) {
        lon += 0.1;
    }

    lat = Math.max(- 85, Math.min(85, lat));
    phi = MathUtils.degToRad(90 - lat);
    theta = MathUtils.degToRad(lon);
    const x = 500 * Math.sin(phi) * Math.cos(theta);
    const y = 500 * Math.cos(phi);
    const z = 500 * Math.sin(phi) * Math.sin(theta);
    camera.lookAt(x, y, z);
    renderer.render(scene, camera);
}

const dragover = (event) => {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
}

const dragenter = () => {
    document.body.style.opacity = 0.5;
}

const dragleave = () => {
    document.body.style.opacity = 1;
}

const load1 = (event) => {
    material.map.image.src = event.target.result;
    material.map.needsUpdate = true;
}

const drop = () => {
    event.preventDefault();
    reader.addEventListener('load', load1);
    reader.readAsDataURL(event.dataTransfer.files[0]);
    document.body.style.opacity = 1;
}

onMounted(() => {
        init();
        animate();

        function init() {
            // invert the geometry on the x-axis so that all of the faces point inward
            geometry.scale(- 1, 1, 1);
            const texture = new TextureLoader().load(props.panoramaUrl);
            const material = new MeshBasicMaterial({ map: texture });
            const mesh = new Mesh(geometry, material);
            scene.add(mesh);
            renderer = new WebGLRenderer();
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.value.appendChild(renderer.domElement);
            container.value.style.touchAction = 'none';
            container.value.addEventListener('pointerdown', onPointerDown);
            document.addEventListener('wheel', onDocumentMouseWheel);
            document.addEventListener('dragover', dragover);
            document.addEventListener('dragenter', dragenter);
            document.addEventListener('dragleave', dragleave);
            document.addEventListener('drop', drop);
            window.addEventListener('resize', onWindowResize);
        }
});

onUnmounted(() => {
    reader.removeEventListener('load', load1);
    container.value.replaceWith(container.value.cloneNode(true));
    document.removeEventListener('wheel', onDocumentMouseWheel);
    document.removeEventListener('dragover', dragover);
    document.removeEventListener('dragenter', dragenter);
    document.removeEventListener('dragleave', dragleave);
    document.removeEventListener('drop', drop);
    window.removeEventListener('resize', onWindowResize);
});
</script>

<template>
    <div class="max-w-full h-screen w-full overflow-hidden">
        <div ref="container"></div>
    </div>
</template>

Note that: you can find info about each part of the code in the official documentation of three.js in the link below.

three.js documentation

now we need to create folder inside the public with the name img then we will create our image that use hdri mode.
You can create your own image or you can find one from any resource in this part i basically use greater website called HDRi Haven then i convert the image to webp just to minify the total size of the image also in my case i don’t care about the shadow reflex and that other powerful things.
Now we have the image img/hdri.webp in our public folder we are ready to use our component in the index.vue page.

Note that: we may have some rendering problem if we use SSR with our app so basically we will use wen we call our component like bellow.

<ClientOnly>
    <Landing/>
    <template #fallback>
      <!-- this will be rendered on server side -->
      <p>Landing is loading...</p>
    </template>
  </ClientOnly>

That’s it, we have now a basic 360 landing page

my showcase in api.daily.dev