Deploying a Static JS/TS Site on Apache2 (VPS)

1. Prerequisites

A VPS (Ubuntu/Debian) with:
- sudo access
- Apache2 installed
Node.js + npm installed on the VPS
A JS/TS static-site project (Astro, Vite, etc.) located at, for example:

/var/www/your_project

DNS A record for the subdomain pointing to your VPS:

Type	Host (subdomain)	Value (IP)
A	subdomain	YOUR_VPS_IP

For example, if your desired URL is:

https://subdomain.example.com

then Host should be subdomain and the domain is example.com.

2. Build the Project

SSH into the VPS:

ssh user@YOUR_VPS_IP

Go to the project folder:

cd /var/www/your_project

Install dependencies (first time or after package.json changes):

npm install

Build the production files:

npm run build

This creates the static files in:

/var/www/your_project/dist

3. Set Correct Permissions (Recommended)

Ensure Apache (user www-data) can read the files:

sudo chown -R www-data:www-data /var/www/your_project
sudo find /var/www/your_project -type d -exec chmod 755 {} \;
sudo find /var/www/your_project -type f -exec chmod 644 {} \;

4. Create the Apache Virtual Host

Create a new Apache config file:

sudo nano /etc/apache2/sites-available/subdomain.example.com.conf

Replace subdomain.example.com with your actual subdomain and domain.

Put the following content inside:

<VirtualHost *:80>
    ServerName subdomain.example.com

    DocumentRoot /var/www/your_project/dist

    <Directory /var/www/your_project/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/subdomain_error.log
    CustomLog ${APACHE_LOG_DIR}/subdomain_access.log combined
</VirtualHost>

Adjust:

ServerName to your real subdomain (e.g. blog.example.com)
DocumentRoot and <Directory> path if your project is elsewhere.

Save and exit.

5. Enable the Site and Reload Apache

Enable the new virtual host:

sudo a2ensite subdomain.example.com.conf

(Optional) Disable the default site if you don’t want it:

sudo a2dissite 000-default.conf

Check Apache configuration syntax:

sudo apache2ctl configtest

If it shows Syntax OK, reload Apache:

sudo systemctl reload apache2

6. Test the Deployment

Open a browser and visit your subdomain, for example:

http://subdomain.example.com/

You should see your deployed site.

If you get an error:

Check the Apache logs:

sudo tail -n 50 /var/log/apache2/subdomain_error.log

Verify the build:
```
ls -R /var/www/your_project/dist
```

7. Enabling HTTPS (Optional but Recommended)

Install Certbot and the Apache plugin:

sudo apt update
sudo apt install certbot python3-certbot-apache

Run Certbot (replace with your real subdomain):

sudo certbot --apache -d subdomain.example.com

Follow the prompts. Certbot will:

Issue a Let’s Encrypt certificate
Create/update the SSL virtual host
Optionally redirect HTTP → HTTPS

After that, your site will be available at:

https://subdomain.example.com/

8. Updating the Site (New Version Deploy)

Whenever you change the project and want to deploy a new version:

SSH into the VPS:

ssh user@YOUR_VPS_IP
cd /var/www/your_project

Pull latest code (if using Git):
```
git pull
```
Install dependencies if needed:
```
npm install
```
Rebuild:
```
npm run build
```

(Optional) Fix permissions again:

sudo chown -R www-data:www-data /var/www/your_project

Reload Apache (usually not required for static files, but safe):
```
sudo systemctl reload apache2
```

Your new version is now live.

9. Quick Summary (Cheat Sheet)

# On VPS
cd /var/www/your_project
npm install
npm run build

sudo nano /etc/apache2/sites-available/subdomain.example.com.conf
sudo a2ensite subdomain.example.com.conf
sudo apache2ctl configtest
sudo systemctl reload apache2

# Optional: HTTPS
sudo apt install certbot python3-certbot-apache
sudo certbot --apache -d subdomain.example.com