removed the cloudflare credentials and yml from up
This commit is contained in:
@@ -2472,29 +2472,39 @@ Changemaker Archive. <a href="https://docs.bnkops.com">Learn more</a>
|
||||
</span></code></pre></div>
|
||||
<h2 id="part-1-install-and-configure-remote-ssh-extension">Part 1: Install and Configure Remote-SSH Extension<a class="headerlink" href="#part-1-install-and-configure-remote-ssh-extension" title="Permanent link">¶</a></h2>
|
||||
<h3 id="1-install-the-remote-development-extensions">1. Install the Remote Development Extensions<a class="headerlink" href="#1-install-the-remote-development-extensions" title="Permanent link">¶</a></h3>
|
||||
<p><strong>Option A: Install Remote Development Pack (Recommended)</strong>
|
||||
1. Open VSCode
|
||||
2. Press <strong>Ctrl+Shift+X</strong> (or <strong>Cmd+Shift+X</strong> on Mac)
|
||||
3. Search for <strong>"Remote Development"</strong>
|
||||
4. Install the <strong>Remote Development extension pack</strong> by Microsoft</p>
|
||||
<p>This pack includes:
|
||||
- Remote - SSH
|
||||
- Remote - SSH: Editing Configuration Files
|
||||
- Remote - Containers
|
||||
- Remote - WSL (Windows only)</p>
|
||||
<p><strong>Option B: Install Individual Extension</strong>
|
||||
1. Search for <strong>"Remote - SSH"</strong>
|
||||
2. Install <strong>Remote - SSH</strong> by Microsoft</p>
|
||||
<p><strong>Option A: Install Remote Development Pack (Recommended)</strong></p>
|
||||
<ol>
|
||||
<li>Open VSCode</li>
|
||||
<li>Press <strong>Ctrl+Shift+X</strong> (or <strong>Cmd+Shift+X</strong> on Mac)</li>
|
||||
<li>Search for <strong>"Remote Development"</strong></li>
|
||||
<li>Install the <strong>Remote Development extension pack</strong> by Microsoft</li>
|
||||
</ol>
|
||||
<p>This pack includes:</p>
|
||||
<ul>
|
||||
<li>Remote - SSH</li>
|
||||
<li>Remote - SSH: Editing Configuration Files</li>
|
||||
<li>Remote - Containers</li>
|
||||
<li>Remote - WSL (Windows only)</li>
|
||||
</ul>
|
||||
<p><strong>Option B: Install Individual Extension</strong></p>
|
||||
<ol>
|
||||
<li>Search for <strong>"Remote - SSH"</strong></li>
|
||||
<li>Install <strong>Remote - SSH</strong> by Microsoft</li>
|
||||
</ol>
|
||||
<h3 id="2-verify-installation">2. Verify Installation<a class="headerlink" href="#2-verify-installation" title="Permanent link">¶</a></h3>
|
||||
<p>After installation, the following should be visible:
|
||||
- Remote Explorer icon in the Activity Bar (left sidebar)
|
||||
- "Remote-SSH" commands in Command Palette (Ctrl+Shift+P)</p>
|
||||
<p>After installation, the following should be visible:</p>
|
||||
<ul>
|
||||
<li>Remote Explorer icon in the Activity Bar (left sidebar)</li>
|
||||
<li>"Remote-SSH" commands in Command Palette (Ctrl+Shift+P)</li>
|
||||
</ul>
|
||||
<h2 id="part-2-configure-ssh-connections">Part 2: Configure SSH Connections<a class="headerlink" href="#part-2-configure-ssh-connections" title="Permanent link">¶</a></h2>
|
||||
<h3 id="1-access-ssh-configuration">1. Access SSH Configuration<a class="headerlink" href="#1-access-ssh-configuration" title="Permanent link">¶</a></h3>
|
||||
<p><strong>Method A: Through VSCode</strong>
|
||||
1. Press <strong>Ctrl+Shift+P</strong> to open Command Palette
|
||||
2. Type <strong>"Remote-SSH: Open SSH Configuration File..."</strong>
|
||||
3. Select the SSH config file (usually the first option)</p>
|
||||
<p><strong>Method A: Through VSCode</strong></p>
|
||||
<ol>
|
||||
<li>Press <strong>Ctrl+Shift+P</strong> to open Command Palette</li>
|
||||
<li>Type <strong>"Remote-SSH: Open SSH Configuration File..."</strong></li>
|
||||
<li>Select the SSH config file (usually the first option)</li>
|
||||
</ol>
|
||||
<p><strong>Method B: Direct File Editing</strong>
|
||||
<div class="language-bash highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="c1"># Edit SSH config file directly</span>
|
||||
</span><span id="__span-1-2"><a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a>nano<span class="w"> </span>~/.ssh/config
|
||||
@@ -2519,14 +2529,16 @@ Changemaker Archive. <a href="https://docs.bnkops.com">Learn more</a>
|
||||
</span><span id="__span-2-16"><a id="__codelineno-2-16" name="__codelineno-2-16" href="#__codelineno-2-16"></a> ServerAliveInterval 60
|
||||
</span><span id="__span-2-17"><a id="__codelineno-2-17" name="__codelineno-2-17" href="#__codelineno-2-17"></a> ServerAliveCountMax 3
|
||||
</span></code></pre></div>
|
||||
<p><strong>Configuration Options Explained:</strong>
|
||||
- <code>Host</code>: Friendly name for the connection
|
||||
- <code>HostName</code>: Tailscale IP address
|
||||
- <code>User</code>: Username on the remote server
|
||||
- <code>IdentityFile</code>: Path to the SSH private key
|
||||
- <code>ForwardAgent</code>: Enables SSH agent forwarding for Git operations
|
||||
- <code>ServerAliveInterval</code>: Keeps connection alive (prevents timeouts)
|
||||
- <code>ServerAliveCountMax</code>: Number of keepalive attempts</p>
|
||||
<p><strong>Configuration Options Explained:</strong></p>
|
||||
<ul>
|
||||
<li><code>Host</code>: Friendly name for the connection</li>
|
||||
<li><code>HostName</code>: Tailscale IP address</li>
|
||||
<li><code>User</code>: Username on the remote server</li>
|
||||
<li><code>IdentityFile</code>: Path to the SSH private key</li>
|
||||
<li><code>ForwardAgent</code>: Enables SSH agent forwarding for Git operations</li>
|
||||
<li><code>ServerAliveInterval</code>: Keeps connection alive (prevents timeouts)</li>
|
||||
<li><code>ServerAliveCountMax</code>: Number of keepalive attempts</li>
|
||||
</ul>
|
||||
<h3 id="3-set-proper-ssh-key-permissions">3. Set Proper SSH Key Permissions<a class="headerlink" href="#3-set-proper-ssh-key-permissions" title="Permanent link">¶</a></h3>
|
||||
<div class="language-bash highlight"><pre><span></span><code><span id="__span-3-1"><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="c1"># Ensure SSH config has correct permissions</span>
|
||||
</span><span id="__span-3-2"><a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a>chmod<span class="w"> </span><span class="m">600</span><span class="w"> </span>~/.ssh/config
|
||||
@@ -2556,10 +2568,12 @@ Changemaker Archive. <a href="https://docs.bnkops.com">Learn more</a>
|
||||
<li>Choose the server from the list</li>
|
||||
</ol>
|
||||
<h3 id="4-first-connection-process">4. First Connection Process<a class="headerlink" href="#4-first-connection-process" title="Permanent link">¶</a></h3>
|
||||
<p>On first connection, VSCode will:
|
||||
1. <strong>Verify the host key</strong> (click "Continue" if prompted)
|
||||
2. <strong>Install VSCode Server</strong> on the remote machine (automatic)
|
||||
3. <strong>Open a remote window</strong> with access to the remote file system</p>
|
||||
<p>On first connection, VSCode will:</p>
|
||||
<ol>
|
||||
<li><strong>Verify the host key</strong> (click "Continue" if prompted)</li>
|
||||
<li><strong>Install VSCode Server</strong> on the remote machine (automatic)</li>
|
||||
<li><strong>Open a remote window</strong> with access to the remote file system</li>
|
||||
</ol>
|
||||
<p><strong>Expected Timeline:</strong>
|
||||
- First connection: 1-3 minutes (installs VSCode Server)
|
||||
- Subsequent connections: 10-30 seconds</p>
|
||||
@@ -2578,17 +2592,21 @@ Changemaker Archive. <a href="https://docs.bnkops.com">Learn more</a>
|
||||
</span></code></pre></div>
|
||||
<h3 id="2-install-extensions-on-remote-server">2. Install Extensions on Remote Server<a class="headerlink" href="#2-install-extensions-on-remote-server" title="Permanent link">¶</a></h3>
|
||||
<p>Extensions must be installed separately on the remote server:</p>
|
||||
<p><strong>Essential Development Extensions:</strong>
|
||||
1. <strong>Python</strong> (Microsoft) - Python development
|
||||
2. <strong>GitLens</strong> (GitKraken) - Enhanced Git capabilities
|
||||
3. <strong>Docker</strong> (Microsoft) - Container development
|
||||
4. <strong>Prettier</strong> - Code formatting
|
||||
5. <strong>ESLint</strong> - JavaScript linting
|
||||
6. <strong>Auto Rename Tag</strong> - HTML/XML tag editing</p>
|
||||
<p><strong>To Install:</strong>
|
||||
1. Go to Extensions (Ctrl+Shift+X)
|
||||
2. Find the desired extension
|
||||
3. Click <strong>"Install in SSH: node1"</strong> (not local install)</p>
|
||||
<p><strong>Essential Development Extensions:</strong></p>
|
||||
<ol>
|
||||
<li><strong>Python</strong> (Microsoft) - Python development</li>
|
||||
<li><strong>GitLens</strong> (GitKraken) - Enhanced Git capabilities</li>
|
||||
<li><strong>Docker</strong> (Microsoft) - Container development</li>
|
||||
<li><strong>Prettier</strong> - Code formatting</li>
|
||||
<li><strong>ESLint</strong> - JavaScript linting</li>
|
||||
<li><strong>Auto Rename Tag</strong> - HTML/XML tag editing</li>
|
||||
</ol>
|
||||
<p><strong>To Install:</strong></p>
|
||||
<ol>
|
||||
<li>Go to Extensions (Ctrl+Shift+X)</li>
|
||||
<li>Find the desired extension</li>
|
||||
<li>Click <strong>"Install in SSH: node1"</strong> (not local install)</li>
|
||||
</ol>
|
||||
<h3 id="3-configure-git-on-remote-server">3. Configure Git on Remote Server<a class="headerlink" href="#3-configure-git-on-remote-server" title="Permanent link">¶</a></h3>
|
||||
<div class="language-bash highlight"><pre><span></span><code><span id="__span-5-1"><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="c1"># In VSCode terminal (remote)</span>
|
||||
</span><span id="__span-5-2"><a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a>git<span class="w"> </span>config<span class="w"> </span>--global<span class="w"> </span>user.name<span class="w"> </span><span class="s2">"<Full Name>"</span>
|
||||
@@ -2599,10 +2617,12 @@ Changemaker Archive. <a href="https://docs.bnkops.com">Learn more</a>
|
||||
</span></code></pre></div>
|
||||
<h2 id="part-5-remote-development-workflows">Part 5: Remote Development Workflows<a class="headerlink" href="#part-5-remote-development-workflows" title="Permanent link">¶</a></h2>
|
||||
<h3 id="1-file-management">1. File Management<a class="headerlink" href="#1-file-management" title="Permanent link">¶</a></h3>
|
||||
<p><strong>File Explorer:</strong>
|
||||
- Shows remote server's file system
|
||||
- Create, edit, delete files directly
|
||||
- Drag and drop between local and remote (limited)</p>
|
||||
<p><strong>File Explorer:</strong></p>
|
||||
<ul>
|
||||
<li>Shows remote server's file system</li>
|
||||
<li>Create, edit, delete files directly</li>
|
||||
<li>Drag and drop between local and remote (limited)</li>
|
||||
</ul>
|
||||
<p><strong>File Transfer:</strong>
|
||||
<div class="language-bash highlight"><pre><span></span><code><span id="__span-6-1"><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="c1"># Upload files to remote (from local terminal)</span>
|
||||
</span><span id="__span-6-2"><a id="__codelineno-6-2" name="__codelineno-6-2" href="#__codelineno-6-2"></a>scp<span class="w"> </span>localfile.txt<span class="w"> </span><username>@<tailscale-ip>:/home/<username>/
|
||||
@@ -2611,11 +2631,13 @@ Changemaker Archive. <a href="https://docs.bnkops.com">Learn more</a>
|
||||
</span><span id="__span-6-5"><a id="__codelineno-6-5" name="__codelineno-6-5" href="#__codelineno-6-5"></a>scp<span class="w"> </span><username>@<tailscale-ip>:/remote/path/file.txt<span class="w"> </span>./local/path/
|
||||
</span></code></pre></div></p>
|
||||
<h3 id="2-terminal-usage">2. Terminal Usage<a class="headerlink" href="#2-terminal-usage" title="Permanent link">¶</a></h3>
|
||||
<p><strong>Integrated Terminal:</strong>
|
||||
- Press <strong>Ctrl+`</strong> to open terminal
|
||||
- Runs directly on remote server
|
||||
- Multiple terminals supported
|
||||
- Full shell access (bash, zsh, etc.)</p>
|
||||
<p><strong>Integrated Terminal:</strong></p>
|
||||
<ul>
|
||||
<li>Press <strong>Ctrl+`</strong> to open terminal</li>
|
||||
<li>Runs directly on remote server</li>
|
||||
<li>Multiple terminals supported</li>
|
||||
<li>Full shell access (bash, zsh, etc.)</li>
|
||||
</ul>
|
||||
<p><strong>Common Remote Terminal Commands:</strong>
|
||||
<div class="language-bash highlight"><pre><span></span><code><span id="__span-7-1"><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a><span class="c1"># Check system resources</span>
|
||||
</span><span id="__span-7-2"><a id="__codelineno-7-2" name="__codelineno-7-2" href="#__codelineno-7-2"></a>htop
|
||||
@@ -2633,11 +2655,13 @@ Changemaker Archive. <a href="https://docs.bnkops.com">Learn more</a>
|
||||
<h3 id="3-port-forwarding">3. Port Forwarding<a class="headerlink" href="#3-port-forwarding" title="Permanent link">¶</a></h3>
|
||||
<p><strong>Automatic Port Forwarding:</strong>
|
||||
VSCode automatically detects and forwards common development ports.</p>
|
||||
<p><strong>Manual Port Forwarding:</strong>
|
||||
1. Open <strong>Ports</strong> tab in terminal panel
|
||||
2. Click <strong>"Forward a Port"</strong>
|
||||
3. Enter port number (e.g., 3000, 8080, 5000)
|
||||
4. Access via <code>http://localhost:port</code> on the local machine</p>
|
||||
<p><strong>Manual Port Forwarding:</strong></p>
|
||||
<ol>
|
||||
<li>Open <strong>Ports</strong> tab in terminal panel</li>
|
||||
<li>Click <strong>"Forward a Port"</strong></li>
|
||||
<li>Enter port number (e.g., 3000, 8080, 5000)</li>
|
||||
<li>Access via <code>http://localhost:port</code> on the local machine</li>
|
||||
</ol>
|
||||
<p><strong>Example: Web Development</strong>
|
||||
<div class="language-bash highlight"><pre><span></span><code><span id="__span-8-1"><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a><span class="c1"># Start a web server on remote (port 3000)</span>
|
||||
</span><span id="__span-8-2"><a id="__codelineno-8-2" name="__codelineno-8-2" href="#__codelineno-8-2"></a>npm<span class="w"> </span>start
|
||||
@@ -2690,20 +2714,26 @@ VSCode automatically detects and forwards common development ports.</p>
|
||||
</span><span id="__span-11-10"><a id="__codelineno-11-10" name="__codelineno-11-10" href="#__codelineno-11-10"></a><span class="p">}</span>
|
||||
</span></code></pre></div>
|
||||
<h3 id="2-multi-server-management">2. Multi-Server Management<a class="headerlink" href="#2-multi-server-management" title="Permanent link">¶</a></h3>
|
||||
<p><strong>Switch Between Servers:</strong>
|
||||
1. Click remote indicator (bottom-left)
|
||||
2. Select <strong>"Connect to Host..."</strong>
|
||||
3. Choose a different server</p>
|
||||
<p><strong>Compare Files Across Servers:</strong>
|
||||
1. Open file from server A
|
||||
2. Connect to server B in new window
|
||||
3. Open corresponding file
|
||||
4. Use <strong>"Compare with..."</strong> command</p>
|
||||
<p><strong>Switch Between Servers:</strong></p>
|
||||
<ol>
|
||||
<li>Click remote indicator (bottom-left)</li>
|
||||
<li>Select <strong>"Connect to Host..."</strong></li>
|
||||
<li>Choose a different server</li>
|
||||
</ol>
|
||||
<p><strong>Compare Files Across Servers:</strong></p>
|
||||
<ol>
|
||||
<li>Open file from server A</li>
|
||||
<li>Connect to server B in new window</li>
|
||||
<li>Open corresponding file</li>
|
||||
<li>Use <strong>"Compare with..."</strong> command</li>
|
||||
</ol>
|
||||
<h3 id="3-sync-configuration">3. Sync Configuration<a class="headerlink" href="#3-sync-configuration" title="Permanent link">¶</a></h3>
|
||||
<p><strong>Settings Sync:</strong>
|
||||
1. Enable Settings Sync in VSCode
|
||||
2. Settings, extensions, and keybindings sync to remote
|
||||
3. Consistent experience across all servers</p>
|
||||
<p><strong>Settings Sync:</strong></p>
|
||||
<ol>
|
||||
<li>Enable Settings Sync in VSCode</li>
|
||||
<li>Settings, extensions, and keybindings sync to remote</li>
|
||||
<li>Consistent experience across all servers</li>
|
||||
</ol>
|
||||
<h2 id="part-7-project-specific-setups">Part 7: Project-Specific Setups<a class="headerlink" href="#part-7-project-specific-setups" title="Permanent link">¶</a></h2>
|
||||
<h3 id="1-python-development">1. Python Development<a class="headerlink" href="#1-python-development" title="Permanent link">¶</a></h3>
|
||||
<div class="language-bash highlight"><pre><span></span><code><span id="__span-12-1"><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a><span class="c1"># On remote server</span>
|
||||
@@ -2752,10 +2782,12 @@ VSCode automatically detects and forwards common development ports.</p>
|
||||
</span><span id="__span-15-14"><a id="__codelineno-15-14" name="__codelineno-15-14" href="#__codelineno-15-14"></a><span class="s">CMD ["npm", "start"]</span>
|
||||
</span><span id="__span-15-15"><a id="__codelineno-15-15" name="__codelineno-15-15" href="#__codelineno-15-15"></a><span class="s">EOF</span>
|
||||
</span></code></pre></div>
|
||||
<p><strong>VSCode Docker Integration:</strong>
|
||||
- Install Docker extension on remote
|
||||
- Right-click Dockerfile → "Build Image"
|
||||
- Manage containers from VSCode interface</p>
|
||||
<p><strong>VSCode Docker Integration:</strong></p>
|
||||
<ul>
|
||||
<li>Install Docker extension on remote</li>
|
||||
<li>Right-click Dockerfile → "Build Image"</li>
|
||||
<li>Manage containers from VSCode interface</li>
|
||||
</ul>
|
||||
<h2 id="part-8-troubleshooting-guide">Part 8: Troubleshooting Guide<a class="headerlink" href="#part-8-troubleshooting-guide" title="Permanent link">¶</a></h2>
|
||||
<h3 id="common-connection-issues">Common Connection Issues<a class="headerlink" href="#common-connection-issues" title="Permanent link">¶</a></h3>
|
||||
<p><strong>Problem: "Could not establish connection to remote host"</strong></p>
|
||||
@@ -2794,10 +2826,12 @@ VSCode automatically detects and forwards common development ports.</p>
|
||||
</span></code></pre></div></p>
|
||||
<h3 id="vscode-specific-issues">VSCode-Specific Issues<a class="headerlink" href="#vscode-specific-issues" title="Permanent link">¶</a></h3>
|
||||
<p><strong>Problem: Extensions not working on remote</strong></p>
|
||||
<p><strong>Solutions:</strong>
|
||||
1. Install extensions specifically for the remote server
|
||||
2. Check extension compatibility with remote development
|
||||
3. Reload VSCode window: Ctrl+Shift+P → "Developer: Reload Window"</p>
|
||||
<p><strong>Solutions:</strong></p>
|
||||
<ol>
|
||||
<li>Install extensions specifically for the remote server</li>
|
||||
<li>Check extension compatibility with remote development</li>
|
||||
<li>Reload VSCode window: Ctrl+Shift+P → "Developer: Reload Window"</li>
|
||||
</ol>
|
||||
<p><strong>Problem: Slow performance</strong></p>
|
||||
<p><strong>Solutions:</strong>
|
||||
- Use <code>.vscode/settings.json</code> to exclude large directories:
|
||||
|
||||
Reference in New Issue
Block a user