Deploying a Vite Static Site (dist folder)

Goal: Host clientdomain.com (and www.clientdomain.com) served by an Nginx container using the Vite build output (dist folder).

Prerequisites:

• Client has pointed their domain's DNS correctly.
• You have the client's Vite project build output (the dist folder).

Step 1: DNS Confirmation (Client's Responsibility, Verify via Cloudflare/DNS Tool)

• Ensure an A Record for clientdomain.com (@) points to 217.154.61.159.
• Ensure an A Record for www.clientdomain.com (www) points to 217.154.61.159.
• If using Cloudflare: Ensure both records are set to Proxied (Orange Cloud).

Step 2: Prepare & Upload Website Files (Via SSH/SCP)

• SSH into your server:
  Copy ssh [email protected]
• Create a directory structure for the client site:
  Copy mkdir -p /opt/stacks/clientname/html
  # Replace 'clientname' with a unique identifier for the client/site
• Upload Files: Use scp (or rsync, WinSCP, FileZilla, etc.) to copy the contents of the local dist folder into the /opt/stacks/clientname/html directory on the server.
  Copy # Note the '.' after 'dist/' - copies contents, not the folder itself # Replace 'clientname' appropriately scp -r dist/. [email protected]:/opt/stacks/clientname/html/
• Go to the stack directory:
  Copy cd /opt/stacks/clientname

Step 3: Create Docker Compose File (Via SSH)

• Create the config file:
  Copy nano docker-compose.yml
• Paste the following content:
  Copy

  version: '3.8'
  
  services:
    web:
      image: nginx:alpine
      container_name: clientname-nginx # Use the SAME 'clientname' identifier
      restart: unless-stopped
      volumes:
        # Map the uploaded static files to Nginx's web root (read-only)
        - ./html:/usr/share/nginx/html:ro
      networks:
        - npm_network # Connect to the shared proxy network
  
  networks:
    npm_network:
      external: true # Network already exists

• Save and close (Ctrl+X, Y, Enter).

Step 4: Deploy Stack (Via Portainer https://portainer.jamify.uk)

1. Go to Stacks -> + Add stack.
2. Name: clientname (use the same identifier).
3. Build method: Web editor.
4. Paste the docker-compose.yml content from Step 3 into the editor.
5. Click Deploy the stack.
6. Verify the clientname-nginx container starts successfully in the Containers list.

Step 5: Configure Nginx Proxy Manager (https://npm.jamify.uk)

1. Go to Hosts -> Proxy Hosts -> Add Proxy Host.
2. Details Tab:
   • Domain Names: clientdomain.com (Enter), www.clientdomain.com (Enter).
   • Scheme: http
   • Forward Hostname / IP: clientname-nginx (the container name).
   • Forward Port: 80 (Nginx container's internal port).
   • Enable Block Common Exploits.
   • Disable Websockets Support (not needed for static sites).
3. SSL Tab:
   • SSL Certificate: Select Request a new SSL Certificate.
   • Enable Force SSL.
   • Enable HTTP/2 Support.
   • Email Address for Let's Encrypt: (Verify correct).
   • Enable I Agree... to Let's Encrypt Terms.
4. Click Save.

Step 6: Test

• Wait for the NPM entry status to show "Online".
• Open https://clientdomain.com and https://www.clientdomain.com in a browser (use private/incognito mode for first test).
• Verify the client's site loads correctly with a valid HTTPS certificate.

Updating a Site

1. Build the updated Vite project locally (generating a new dist folder).
2. Upload Updated Files: Use scp (or your preferred tool) to overwrite the contents of /opt/stacks/clientname/html/ on the server with the contents of the new dist folder.
   Copy # Example scp command from local machine scp -r dist/. [email protected]:/opt/stacks/clientname/html/
3. Clear Cache (Optional but Recommended): Clear relevant Cloudflare cache (if used) and potentially test in a browser incognito window or clear browser cache to ensure the latest files are served. Usually, restarting the clientname-nginx container is NOT necessary for Nginx serving static files.