Server Configuration and Port Access

Ensure that all necessary ports on the Windows server are open and accessible.

Backend Deployment: Spring Boot 3

Build Spring Boot 3 Application

Package the Spring Boot 3 application into an executable JAR file.

Upload Backend Artifacts

Transfer the generated JAR file and its associated configuration files (e.g., application.yml) to the Windows server. A recommended directory structure might be D:\JavaProject\sw\BackEnd\.

Start Script (start.bat)

Create a batch file named start.bat to launch the Spring Boot application in the background. This script prioritizes a specific configuration file and redirects output to a log.

@echo off
javaw -jar your-app-name.jar --spring.config.location="D:\JavaProject\sw\BackEnd\application.yml" > log.log 2>&1 &
exit

• @echo off: Prevents commands from being displayed during execution.
• javaw: Executes the Java application without a console window.
• --spring.config.location: Specifies the path to the external configuration file, overriding defaults within the JAR.
• > log.log 2>&1: Redirects both standard output and standard error streams to log.log.
• &: Runs the command in the background.

Stop Script (stop.bat)

Create a batch file named stop.bat to gracefully terminate the running Spring Boot application.

@echo off
taskkill -f -t -im javaw.exe
exit

• taskkill: A command-line utility to terminate processes.
• -f: Forcefully terminates the process.
• -t: Terminates the specified process and any child processes it started.
• -im: Specifies the image name of the process to terminate (in this case, javaw.exe).

Frontend Deployment: Vue 3 with Nginx

Build Vue 3 Application

Execute the build command for you're Vue 3 project (e.g., npm run build) to generate optimized static assets.

Upload Frontend Artifacts

Transfer the contents of the build output directory (typically dist) to the designated static file serving directory on the Windows server.

Install and Configure Nginx

1. Download Nginx: Obtain the latest stable version of Nginx from the official website (nginx.org) and extract its contents on the server.

2. Configure Nginx: Modify the Nginx configuration file (conf/nginx.conf). Set up a reverse proxy to direct traffic to your backend application and serve your static frontend files.

   Example nginx.conf snipppet for reverse proxying and serving static files:

   http {
       server {
           listen 80;
           server_name your_domain_or_ip;
   
           location /api/ {
               proxy_pass http://localhost:8080/; # Assumes Spring Boot runs on port 8080
               proxy_set_header Host $host;
               proxy_set_header X-Real-IP $remote_addr;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header X-Forwarded-Proto $scheme;
           }
   
           location / {
               root html; # Directory where Vue 3 build output is placed
               index index.html index.htm;
               try_files $uri $uri/ /index.html;
           }
       }
   }
   

Access Application

Once both the backend and frontend are deployed and Nginx is configured, access your application using the server's public IP address and the configured Nginx port (usually 80).