Tuto XAMPP

2. Tailscale y ngrok: acceso privado y túnel público

Tailscale conecta móvil, Chromebook, PC y otros equipos dentro de una red privada cifrada. No hace falta abrir el puerto 8080 al Internet público.

Instalar y conectar Tailscale en Linux

La instalación oficial para Linux puede hacerse con:

curl -fsSL https://tailscale.com/install.sh | sh

Después iniciamos la conexión:

sudo tailscale up

La Terminal mostrará una URL para autenticar el equipo en nuestra cuenta de Tailscale. Una vez autorizado, comprobamos el estado y consultamos su IP:

tailscale status
tailscale ip -4

La IP suele ser del tipo 100.x.y.z. Desde otro dispositivo de la misma tailnet, el acceso a nuestra web sería:

http://100.x.y.z:8080/xnenex/

Con MagicDNS también puede usarse el nombre del equipo:

http://NOMBRE-DEL-EQUIPO:8080/xnenex/

Cómo localizar las distintas IP

• Windows: ipconfig ya viene incluido; no se descarga.
• Linux/Chromebook: hostname -I o ip addr para la IP local; tailscale ip -4 para la IP Tailscale.
• Android/iPhone: Ajustes → Wi-Fi → detalles de la red para la IP local; la app de Tailscale muestra la IP Tailscale del dispositivo.
• Navegador: una web de “cuál es mi IP” muestra normalmente la IP pública de salida a Internet, no la IP local ni la de Tailscale.

ngrok como alternativa de túnel público

ngrok hace una función parecida a Cloudflare Tunnel: el agente crea una conexión saliente hacia ngrok y entrega una URL pública HTTPS.

En Debian/Linux podemos instalar el agente mediante APT:

curl -sSL https://ngrok-agent.s3.amazonaws.com/ngrok.asc \
| sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null

echo "deb https://ngrok-agent.s3.amazonaws.com bookworm main" \
| sudo tee /etc/apt/sources.list.d/ngrok.list

sudo apt update
sudo apt install ngrok -y

Después añadimos el token de nuestra cuenta de ngrok:

ngrok config add-authtoken "<TU_AUTHTOKEN>"

Con XAMPP en el puerto 8080, iniciamos el túnel con:

ngrok http 8080

La URL pública asignada por ngrok se usaría añadiendo nuestro Alias, por ejemplo https://direccion-asignada.ngrok.app/xnenex/.

3. Comandos rápidos del entorno

Tenemos dos formas de controlar el servidor: el menú interactivo web explicado en Linux y los alias directos explicados en Servidor.

actualizar
web

web-on
web-status
web-restart
web-off

4. Herramientas de copia y archivos

rsync sirve para copiar y sincronizar carpetas. Su instalación, las distintas modalidades de copia y los ejemplos están explicados en la sección Linux.

PeaZip queda como interfaz gráfica principal para ZIP/7Z y 7-Zip/p7zip como herramienta de consola. Xarchiver se considera prescindible.

5. Favicon

Nuestro favicon está en la raíz:

tutoxampp/favicon.ico

En index.html, que está en la raíz:

<link rel="icon" href="favicon.ico" type="image/x-icon">

En las páginas de menu/:

<link rel="icon" href="../favicon.ico" type="image/x-icon">

Si Chrome conserva un icono antiguo, prueba una recarga fuerte:

Ctrl + Mayús + R

6. Desactivar el botón derecho

Este código es opcional y pertenece al JavaScript de la web. Si queremos aplicarlo, debemos añadirlo al archivo:

tutoxampp/assets/js/app.js

Desde Linux podemos abrir ese archivo con:

nano "/mnt/shared/GoogleDrive/MyDrive/---@web/www/@public_html/tutoxampp/assets/js/app.js"

Al final del archivo añadimos:

document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});

Guardamos con Ctrl + O, pulsamos Enter y salimos con Ctrl + X.

7. Evitar selección o arrastre

Estos eventos también se añadirían a tutoxampp/assets/js/app.js, igual que el ejemplo anterior. Podemos abrir el archivo con:

nano "/mnt/shared/GoogleDrive/MyDrive/---@web/www/@public_html/tutoxampp/assets/js/app.js"

Al final del archivo podemos añadir:

document.addEventListener('selectstart', function (e) {
    e.preventDefault();
});

document.addEventListener('dragstart', function (e) {
    e.preventDefault();
});

Guardamos con Ctrl + O, pulsamos Enter y salimos con Ctrl + X.

8. robots.txt y sitemap.xml

Estos dos archivos pertenecen a la publicación de la web, así que los dejamos en Extras como tarea de acabado y no dentro de Cloudflare ni del tutorial principal de GitHub.

robots.txt

robots.txt indica a los robots de los buscadores qué zonas pueden rastrear. Debe colocarse en la raíz de la web publicada.

User-agent: *
Allow: /

Sitemap: https://TU-DOMINIO-O-USUARIO.github.io/tutoxampp/sitemap.xml

sitemap.xml

sitemap.xml contiene las páginas que queremos que los buscadores conozcan. También debe quedar en la raíz de la web.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://TU-DOMINIO-O-USUARIO.github.io/tutoxampp/</loc>
  </url>
</urlset>

9. Diagnóstico exprés

web-status
sudo netstat -tulpn | grep -E '(:8080|:8081|:8085|:10000)'
sudo /opt/lampp/bin/apachectl -t
tail -n 30 /opt/lampp/logs/error_log