DEV Community

alok-38
alok-38

Posted on

Full Lab: Accessing and Editing Nginx on Ubuntu VM via VS Code

#ssh #vscode #nginx #vmware

1️⃣ Accessing the VM via SSH in VS Code

  • Goal: Edit Nginx files (/var/www/html/index.nginx-debian.html) directly from Windows using VS Code.
  • Setup steps:
    1. Installed VS Code and Remote – SSH extension.
    2. Created/edit SSH config (~/.ssh/config) with: 
Host ubuntu-vm
    HostName 192.168.0.169
    User alok
    Port 22
Enter fullscreen mode Exit fullscreen mode
  1. Connected via Remote-SSH: Connect to Host → ubuntu-vm.
  • Outcome: Successfully opened the VM’s filesystem and terminal in VS Code.

2️⃣ First Issue: Permission denied in VS Code

  • Error: 
Failed to save 'index.nginx-debian.html': Unable to write file vscode-remote://ssh-remote+ubuntu-vm/var/www/html/index.nginx-debian.html (NoPermissions)
Enter fullscreen mode Exit fullscreen mode

  • Cause:

    • /var/www/html and index.nginx-debian.html are owned by root: 
     -rw-r--r-- 1 root root index.nginx-debian.html
    • VS Code SSH session runs as alok, so it cannot write to root-owned files.

  • Why this happens:

    • Nginx web root is restricted to prevent accidental edits by non-root users.

3️⃣ Troubleshooting and Solution

Option A: Edit with sudo in terminal (quick fix)

sudo vim /var/www/html/index.nginx-debian.html
Enter fullscreen mode Exit fullscreen mode

Option B: Change ownership for lab use (I prefer this)

sudo chown -R alok:alok /var/www/html
Enter fullscreen mode Exit fullscreen mode

  • Explanation:

    • chown = change ownership
    • -R = recursively for all files/folders in /var/www/html
    • alok:alok = user alok and group alok

  • Effect: Your VS Code SSH session now has write access, solving EACCES errors.

✅ Important: Safe for lab/development. Not recommended on production servers.

4️⃣ Editing the Nginx default page

  • Opened /var/www/html/index.nginx-debian.html in VS Code.

  • Replaced default HTML with:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NginX Demo Page</title>
</head>
<body>
    <h1>NginX demo page from Ubuntu VM</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Saved file successfully after fixing ownership.

Result: Accessing http://192.168.0.169/ from Windows Chrome or other LAN devices showed the updated page.

5️⃣ Exploring the default Nginx setup

  • Web root: /var/www/html → place static HTML, CSS, JS files here.

  • Configuration files: /etc/nginx/sites-available/default

Key parts of default Nginx server block:

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

    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        try_files $uri $uri/ =404;
    }
}
Enter fullscreen mode Exit fullscreen mode

  • root /var/www/html → serves files from web root

  • index ... → default file names

  • location / → maps URL paths to file system

Learning points:

  • Nginx serves files based on server blocks and root.

  • Changes in /var/www/html are immediately visible after reload.

6️⃣ Testing and verification

  • Edited index.html → refreshed in browser → confirmed changes appear.

  • Checked logs for troubleshooting:

sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log
Enter fullscreen mode Exit fullscreen mode
  • Logs confirmed requests hitting the server and showed no errors.

7️⃣ Key Lessons Learned

  1. SSH with VS Code:
  • Configuring ~/.ssh/config makes connecting to VM fast and repeatable.
  1. Permissions are critical:

  • Web root files are root-owned → editing as normal user fails.

  • chown -R alok:alok /var/www/html fixes permissions in a safe lab environment.

  1. Default Nginx setup:

  • /var/www/html = default web root

  • /etc/nginx/sites-available/default = default server config

  • Editing files here immediately updates the served page

  1. Testing workflow:

  • Always check LAN access using browser

  • Monitor logs for access/errors

  • Use VS Code Remote-SSH for easy editing

✅ Outcome

  • VM is fully reachable from Windows host and LAN devices.

  • Nginx serves my custom HTML correctly.

  • VS Code edits work without errors thanks to ownership fix.

  • Foundation is ready for next steps: multiple sites, reverse proxy, web apps, firewall, and security configuration.

Top comments (0)