Publish Your Website from Windows desktop

If you have created a web application using React and a backend API in Spring Boot running on a Windows desktop, you can publish it to the internet securely using HTTPS. This guide will walk you through the process.

Step 1: Configure Your Router

Access Router UI

1. Open your web browser and navigate to http://192.168.1.1.
2. Enter the admin username and password (usually available on the router itself).
3. Look for Port Forwarding settings in your router configuration.

Configure Port Forwarding

1. Set your desktop as an internal host.
2. Configure port forwarding:
• Select HTTPS.
• Assign your desktop’s static IP as the internal host.
• Forward external requests on ports 443 (HTTPS)

Step 2: Use a Dynamic DNS (DDNS) Service

Since most ISPs assign dynamic IPs, you need a DNS service to map your router’s changing IP.

Setup No-IP DNS

1. Visit No-IP and create an account.
2. Add a new DNS hostname by providing your router’s public IP.
3. Download and install the No-IP Dynamic Update Client on your desktop.
4. This software will sync your router’s IP with your DNS hostname every 5 minutes.

Step 3: Generate an SSL Certificate

To enable HTTPS, you need an SSL certificate.

Install OpenSSL

1. Open PowerShell in Admin Mode and run:

winget search openssl
winget install ShiningLight.OpenSSL.Light
        

2. Add OpenSSL to your system’s PATH variable:
• Press Win + R, type sysdm.cpl, and go to the Advanced tab.
• Click Environment Variables.
• Under System Variables, edit the Path variable and add:

C:\Program Files\OpenSSL-Win64\bin

• Click OK and restart your terminal.
3. Verify installation by running:

openssl version

Generate a Certificate Signing Request (CSR)

1. Generate a private key:

openssl genrsa -out my_private_key.pem 2048

2. Create a CSR file:

openssl req -new -key my_private_key.pem -out my_csr.pem

Provide details like country, state, city, company name, and domain (e.g., www.mywebsite.com).

3. Alternatively, use a configuration file (csr.conf) to automate CSR generation:

[req]
default_bits = 2048
prompt = no
default_md = sha256
distinguished_name = dn

[dn]
C = US
ST = California
L = Los Angeles
O = MyCompany Inc.
OU = IT Department
CN = www.mywebsite.com
emailAddress = [email protected]
        

4. Run:

openssl req -new -key my_private_key.pem -out my_csr.pem -config csr.conf

5. Submit the CSR to No-IP to obtain an SSL certificate.

Step 4: Install and Configure Nginx

Install Nginx

1. Download and install Nginx.
2. Place cert.pem and my_private_key.pem in the ssl folder inside Nginx (C:/nginx/ssl).

Update Nginx Configuration

Edit C:\nginx\conf\nginx.conf and modify it as follows:

worker_processes auto;

events {
    worker_connections 1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  30;

    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_vary on;

    server {
        listen 80;
        server_name yourdomain.ddns.net;
        return 301 https://$host$request_uri;
    }

    server {
        listen 443 ssl;
        server_name yourdomain.ddns.net;

        ssl_certificate C:/nginx/ssl/cert.pem;
        ssl_certificate_key C:/nginx/ssl/my_private_key.pem;

        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_prefer_server_ciphers on;
        ssl_ciphers "ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384";
        ssl_session_timeout 1d;
        ssl_session_cache shared:SSL:10m;
        ssl_stapling on;
        ssl_stapling_verify on;

        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
        add_header X-Frame-Options DENY;
        add_header X-XSS-Protection "1; mode=block";
        add_header X-Content-Type-Options nosniff;

        location / {
            proxy_pass http://127.0.0.1:1573;
            proxy_set_header Host $host;
        }
        location /api/ {
            proxy_pass http://127.0.0.1:9095;
        }
    }
}
    

Start Nginx

C:\nginx>nginx -t
C:\nginx>nginx -s stop
C:\nginx>start nginx
    

Now, your website is live and accessible via HTTPS!

Conclusion

By following these steps, you have successfully hosted your React and Spring Boot application on your Windows desktop using a router IP, dynamic DNS, SSL certificate, and Nginx. Your website is now secure and accessible from anywhere!