Ir al contenido
Conéctate para seguir esto  
Eloy Beltran

Tu web en red gratis (CON DUDA FINAL)

Recommended Posts

Hablo desde mi corta experiencia en la elaboracion de mi pagina web:

 

En 2004 use Lliurex, que era una distribucion Linux de la Comunidad Valenciana para que no multasen a los centros por tener copias pirata de windows en sus centros eduactivos. Allí conocí el editor Nvu que esta para Windows, mientras Kompozer para Linux.

 

Una vez me hice mi pagina web en html indexada con otras html, decidí que queria sacarla afuera, a internet. Tuve que lidiar con mucha basura que hay internet y te hacen pagar un host o un dominio.com.net etc etc. Finlamente logre hacerlo, y para recordarlo me hice un tutorial que voy a poner aqui: Un servidor LEMP con un dominio de freednsafraid.

 

 

El problema de alojar una pagina web para que sea mostrada, es que tiene que estar disponible las 24 horas.

 

Por tanto, el Hardware debe consumir la menos potencia posible, y en caso de que el router no tenga una IP publica fija, como la mayoria de routers domesticos la tienen dinamica en España, deba de asociarse un dominio para cualquier IP publica que tenga el router, para que se pueda entrar y visitar.

 

Por ello, elaboro todo lo que los medios sensacionalistas de internet no han sabido explicar, hacer una pagina web, implica diseñar tu pagina, implica instalar un servidor, implica obtener un dominio y subdominio ( si se desea de forma gratuita), e implica configurar tu router para tal cosa, esto ultimo cuestionable, ya que los servicios de dominios gratuitos tambien optan la actualizacion automatica mediante Scripts (crontab).

 

Lo primero, desde mi experiencia, me decidí comprar un Odroid XU-4, aunque podria haber elegido el HC1, ya que el XU4 es mas potente pero sacrifica memoria RAM, y esto, es algo que hace falta, el problema de las cosas pequeñas de estos hardware, son que no tienen mucha memoria RAM, por tanto se opto por instalar una distribucion de linux que no consumiera muchos recursos, llamada ubuntu minimal, el problema de la version minimal, es que no hay entorno grafico, y portanto no dispones de escritorio, solo tienes una consola, y eso supondria tener conocimientos de bash, ademas del posterior manejo de archivos, solo los informaticos podrian tener servidores, entonces, opté por la version mate.

 

Estos dispositivos utilizan de disco duro una microSD, a ser posible de alta velocidad, por tanto habrá que hacer un booting, o bootear, esto, no es mas que, (previamente descargado y descomprimido el S.O a instalar) en nuestro caso, elegimos la version mate, ubuntu 18.04.1-4.14 mate odorid20181203, la version de kernel es la 4.14, pero hay otra que es la 4.4, no tengo todavia conocimientos suficientes para saber en que se diferencian las dos, pero lo importante es que funcionan tanto la una como la otra.

 

Para bootear la microSD se necesita descargar Win32DiskImager-droidv1.3, no se preocupen por el numero 32, tambien funciona en ordenadores de 64bits, ademas no se instala, en este caso estoy utilizando un windows 7, donde una vez descomprimido el archivo ubuntu 18.04.1-4.14 mate odorid20181203, tenemos 5GB de imagen .iso que tenemos que poner como ruta de destino la memoria micro SD en el programa win32Diskmanager, clickamos con el raton en [write].

 

 

Una vez termina, se inserta en la micro SD en nuestro Odroid.

 

Una vez esta todo instalado , se abre una terminal y se pone:

 

sudo apt-get update

 

(te pedirá contraseña) generalmente odroid, (luego aconsejo cambiarla)

 

Y todo quedara actualizado, para no poner mas sudo, puedes poner, sudo su, pero solo es valido en la terminal donde se ejecuta.

 

Bueno vamos a empezar a instalar el Servidor LEMP, Linux, Nginx, Maria DB PHP 7.1.

 

Nginx es menos pesado que Apache, recordemos, no tenemos mucha memoria RAM.

 

 

Se abre una terminal y se pone

 

$ sudo add-apt-repository ppa:ondrej/php

 

cuando termina.. esta otra

 

$ sudo apt-get update && sudo apt-get install php7.1-fpm

 

cuanto termina esta otra para cambiar la zona horaria

 

$ sudo pluma /etc/php/7.1/fpm/php.ini

 

(pluma es un editor de texto, como nano, o vi. En este caso lo que se hace es modificar manualmente el archivo para cambiar la zona horaria donde pone date.timezone, por la ubicación donde se está, se guarda, y se cierra.

 

Empezamos con MariaDB:

 

$ sudo apt-get update && sudo apt-get install mariadb-server mariadb-client php-mysql

 

Cuando termina, la siguiente

 

$ sudo pluma /etc/mysql/conf.d/mysql.cnf

 

Se elimina todo el contenido que hay dentro, y se pega el siguente:

 

# MariaDB-specific config file.
# Read by /etc/mysql/my.cnf
 
[client]
# Default is Latin1, if you need UTF-8 set this 
# (also in server section)
default-character-set = utf8mb4
 
[mysqld]
#
# * Character sets
#
# Default is Latin1, if you need UTF-8 set all this 
# (also in client section)
#
character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci
character_set_server = utf8mb4
collation_server = utf8mb4_unicode_ci

Se guarda y se cierra.

(finalmente se reinicia el servicio con la siguiente instruccion):

$ sudo service mysql restart

Empezamos instalando Nginx

$ sudo add-apt-repository ppa:nginx/stable
y luego, cuando termina
$ sudo apt-get update && sudo apt-get install nginx
Y cuando termina.., esto:
$ sudo mv /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak
y luego
$ sudo pluma /etc/nginx/sites-available/default
Se abre el editor y le pongo todo esto: 

server {
  listen 80 default_server;
  listen [::]:80 default_server;
 
  root /var/www/html;
 
  index index.html index.php;
 
  server_name _;
 
  location / {
    try_files $uri $uri/ =404;
  }
 
        # This option is important for using PHP.
  location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass unix:/var/run/php/php7.1-fpm.sock;
  }
}
Se guarda, y se cierra.

Se reinicia el servicio poniendo esto:

$ sudo service nginx reload

Una vez hecho esto, podemos importan con un usb una pagina que tengamos en html, a la que debemos llamar index.html, (exactamente así), y la deberemos meter la carpeta html, que esta ubicada en var/www/html/(index.html).

Si no nos deja pegar nuestro archivo html, antes de abrir la carpeta html con doble click, lo que tenemos que hacer es con el boton derecho, clickar donde diga, Open with as administrator, o Editar como administrador, y te la abre como superusuario, asi te permitira pegar o sustituir el index.html.

Por lo tanto , cerramos,la carpeta y abrimos una terminal, donde ponemos 
ifconfig
ahí veremos nuestro IP local que nueStro router nos ha asignado, 192.168.1.XX
Seguidamente, abrimos nuestro navegador web, en la direccion, no en el buscador, donde suelen ir las http:…, ponemos nuestra IP local,

Cualquier ordenador de nuestra red podrá ver nuestra paguina, pero la IP local que le asgina tu router no es fija, asi que tendremos que dejarla fija desde el router, porque en configuracion de red en nuestro odroid, a pesar de dejarla fija , no pasa.

Asi que accedemos a nuestro router, y asociamos la MAC de nuestra computadora con la IP que nosotros queramos, y que no este utilizando nadie en ese momento, por ejemplo la 192.168.1.45

Luego , tenemos que irnos a PortForwarding, (apretura de puertos) tenemos que alñadir un perfil y editarlo con la IP local de nuestra maquina, 192.168.1.45, y decirle que es un Web server, automaticamente escucha el puerto 80, External port Start (80), External port End (80) ,Internal port Start (80), y Internal port End (80) y en Remote IP nada.
En Wan connection le ponemos : PVC 8/36

A partir de ahi, podras acceder con el navegador poniendo tu Ip publica del router, el 80.45.125.102 por ejemplo, pero no olvides que cambia, precisamente, lo que vamos hacer, es tratar de poner un dominio (un nombre.com) a tu web para que, aunque cambie tu IP publica del router (dado que tu IP no es fija y no se puede acceder cada 15 min con una distinta), asociar el dominio con tu router.

Para ello, nos vamos a crear una cuenta en freednsafraid., cuando ya la tengamos, nos vamos al panel izquierdo superior, y le damos a Subdomain es decir, la secuencia quedaria asi: 1.1Me registro, 1.2 Panel izquierdo --> Subdomains --> Add Subdomain

1.3 Add a new subdomain ) creamos nuestro subdominio, por ejemplo, pacopicapiedra, y el dominio , nos viene impuesto, yo cogí mooo.com.
Elegimos el tipo A
Quedando pacopicapiedra.mooo.com, nos vamos a Dynamic DNS o (DDNS), pinchamos en URL.
Nos dira la direccion IP nuestra, pero si nos fijamos, arriva , en la direccion web, despues de ? Copiamos ese código, llamado hashkey.

Nos vamos a nuestro router, y accedemos a la DDNS (Dynamic DNS), creamos un perfil y ponemos freednsafraid, nuestro nombre pacopicapiedra.mooo.com y el hashkey, ya lo tenemos.

Otra opcion es descargarse un Script, pero no me funcionó.


El Script seria:
Creo el script de la siguiente manera: sudo nano /etc/cron.d/freedns_update.sh, lo abro y pego esto. 
#!/bin/sh # freedns_update.sh: Update the public IP on freedns.afraid.org only if it has changed. ## Place this script in the cron's job directory /etc/cron.d and assign the proper permissions ## and owner ## sudo chmod 500 /etc/cron.d/freedns_update.sh ## sudo chown root:root /etc/cron.d/freedns_update.sh ## Add to /etc/crontab to execute on reboot and every 5 minutes ## Edit /etc/crontab and append these two lines: ## @reboot root /etc/cron.d/freedns_update.sh >/dev/null ## */5 * * * * root /etc/cron.d/freedns_update.sh >/dev/null #Use your own values DOMAIN=pacopicapiedra.mooo.com HASHKEY=todo lo que va despues del signo? de la direccion URL del enlace del subdominio= UPDATE_URL="http://freedns.afraid.org/dynamic/update.php?${HASHKEY}" current_ip=$(wget -q --output-document - http://checkip.dyndns.org | grep -o '[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}') registered_ip=$(ping -qn -c 1 $DOMAIN | head -n 1 | grep -o '[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}') if [ "${current_ip}" != "${registered_ip}" ]; then wget -q --read-timeout=0.0 --waitretry=5 --tries=400 --output-document /dev/null $UPDATE_URL if [ $? -eq 0 ]; then echo "$(date +"%b %_d %T") $(hostname) $0: IP address updated on freedns.afraid.org: new IP '${current_ip}', old IP '${registered_ip}'" >> /var/log/messages else echo "$(date +"%b %_d %T") $(hostname) $0: ERROR IP address could not be updated on freedns.afraid.org: current IP '${current_ip}', registered IP '${registered_ip}'" >> /var/log/messages fi fi 

EN la web de freedns Me voy al panel izquierdo -> Dynamic DNS, me voy abajo, y en el subdominio esta Direct URL, le pincho , obtengo la url, y a partir del signo ? de la direccion, obtengo el hask key que la pongo despues de HASHKEY=xxxxxxxxxx 

Salvo y cierro.

* Dale permisos al script.

sudo chmod 500 /etc/cron.d/freedns_update.sh
sudo chown root:root /etc/cron.d/freedns_update.sh

para darle permisos a la carpeta.

* Programa una tarea para que el script se ejecute automaticamente.

Abro crontab para programar una tarea:

sudo nano /etc/crontab

En el final del archivo añades 2 nuevas lineas: 

@reboot root /etc/cron.d/freedns_update.sh >/dev/null */5 * * * * root /etc/cron.d/freedns_update.sh >/dev/null 

Quedando asi:

# /etc/crontab: system-wide crontab

# Unlike any other crontab you don't have to run the `crontab'

# command to install the new version when you edit this file

# and files in /etc/cron.d. These files also have username fields,

# that none of the other crontabs do.


SHELL=/bin/sh

PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin

# m h dom mon dow user   command

17 *   * * *   root    cd / && run-parts --report /etc/cron.hourly

25 6   * * *   root   test -x /usr/sbin/anacron || ( cd / && run-parts --report /etc/cron.daily )

47 6   * * 7   root   test -x /usr/sbin/anacron || ( cd / && run-parts --report /etc/cron.weekly )

52 6   1 * *   root   test -x /usr/sbin/anacron || ( cd / && run-parts --report /etc/cron.monthly )

#

@reboot root /etc/cron.d/freedns_update.sh >/dev/null */5 * * * * root 

/etc/cron.d/freedns_update.sh >/dev/null 


Salvo


PASO 5: Reinicias cron para que se ejecute el script por primera vez.

Restablezco el servicio con 

sudo /etc/init.d/cron restart

Me sale esto por la terminal

odroid@odroid:~$ sudo /etc/init.d/cron restart

[sudo] password for odroid: 

[ ok ] Restarting cron (via systemctl): cron.service.

odroid@odroid:~$ 

 

 

Al final dispongo de una unica duda, dado mis escasos concocimientos en php y sql.

 

No puedo indexar archivos de video o musica (archivos locales), me explico.

 

dentro de la carpeta donde estan todas las paginas html, var/www/html, el servidor reconoce las paginas y la carpeta fotos donde estan indexadas con las paginas html, por tanto , en las pagina se pueden observar las fotos, estan bien referenciadas, pero a la hora de indexar un archivo local de video o musica, da igual donde lo ponga, u con la direccion que lo ponga, no me lo coge, he puesto dentro , fuera de direccion de carpetas donde estan alojadas alas paginas, ya no se que hacer, he provado de todo.

 

¿sabeis donde puedo meter los archivos como videos o musica para que sean reconocidos en la direccion que apunta el link de mi pagina web? y sean mostrados en la pagina web, o descargados. Preferiblemente mostrados.

 

Esque, El NVU, en Windows, indexar direccion relativa a un archivo de musica o video en un link, y al guardar el html y abrirlo en tu navegador , a modo de prueba local, el video se muestra en el navegador.

 

Mi pagina web es:

 

repositoryofmechanisms.mooo.com

 

 

Muchas Gracias

 

 

Compartir este post


Enlace al post
Compartir en otros sitios

Lo que tu tienes es digamos un servidor web en tu casa con la placa odroid siempre enchufada para estar online y asi puedes acesar tu página en qualquier lugar . Creo que es esto. Andube mirando sobre el problema de los videos y di con esto → https://articulate.com/support/article/mp4-videos-require-a-mime-type-on-your-server-to-play-properly

https://community.spiceworks.com/topic/1943597-how-to-play-videos-on-apache-server

https://developer.mozilla.org/pt-BR/docs/Web/HTML/formatos_midia_suportados

 

https://www.vivaolinux.com.br/topico/Apache-Web-Server/Stream-de-video

 

En el html debes especificar el source del video como en el script de ejemplo que en el último link.

Compartir este post


Enlace al post
Compartir en otros sitios

Lo primero Gracias por contestar, tengo el mismo problema planteado en mas de 5 webs diferentes y ninguno me ha conestado.

 

Estoy mirando los links que me has pasado.

 

Es cierto que mi linux, esta muy pelado, encuanto a drivers codecs, para poder visualizar videos, de hecho no puedo visualizar mp4 dentro del software donde esta alojado del servidor.

 

Creo que es algo mas sencillo, voy a poner un ejemplo, cuando estoy en windows, probando a modo local las paginas web, es decir, no atraves de internet ni del servidor, si no probando a modo local, quiero decir, abriendolas con mi navegador las paginas html que estan dentro de la carpeta, al ponerles la direccion de la carpeta donde estan los videos, en el navegador mozilla por ejemplo me sale esto en la siguiente foto enlazada

 

https://mega.nz/#!QcdjQCKT!qYnhLraWN3KPqMi60F0YZm7qdMVYGOrYlAEjrirZI1g

 

Abro el inspector para ver como esta hecho, y tengo lo siguiente:

 

html, head y script en la siguiente foto enlazada

 

https://mega.nz/#!VFUwgAzB!cHHbUwE6vTmpqoJRLLC3Uv3XoBSnTRS-wFkRIEiWN9w

 

la siguiente parte

 

https://mega.nz/#!QUdkBayJ!6hn64u0QPzC7nVncrP2DxopuFdTAm_aX_ZQdHE4dO5Q

 

 

Cuando se accede al video

 

 

https://mega.nz/#!BUMmEa6Q!akYeKMvij1Ppq0g0GmXjovl8b5DcXb3nE8cL2MkEvEg

 

 

No tengo ni idea de lo que es html5, me he descargado unos pdfs de manuales y libros de html5 que teneis

 

HTML5 Programming with JavaScript For Dummies

proHTML5Performance

 

Pero insisto en que es mas facil porque, no se que hacer con el codigo del script que he visto para soportar diferentes tipos de extension de archivos:

 

Uno de ellos:

 


  <!doctype html>
  <html>



<link rel="stylesheet" type="text/css" href="full.css">
  <style>
video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}


</style>
  <!-- Actual video file is 480x360 -->
  <video id="video_background" controls autoplay>
      <!-- .mp4 file must come first for Safari.  IE9 will also play it. -->
      <source src="video.mp4" />
      <!-- Firefox 4.x, Google Chrome, and Opera will play the .webm format -->
      <source src="video.webm" />
      <!-- Firefox 3.5/3.6 will only play .ogv files -->
      <source src="video.ogv" />
      <!-- If all else fails, the script below will try to launch the Flash player. -->
      <embed
          src="YTPlayer.swf"
          flashvars="movieName=video&autoStart=true"
          width=480
          height=390
          allowFullScreen=true
          type="application/x-shockwave-flash"
          pluginspage="http://get.adobe.com/flashplayer" />
      </video>
  </td></tr></table>
  <br>
  <font size=+1></font>
 
  </center></body></html>

Podria meter tambien el mkv?

 

Como haria el script? lo copio y lo pego en el codigo html de mi pagina web? En que pagina?

 

Esto me revasa, no seria mejor que me instalara los drivers o codecs en mi S.O de linux donde esta alojado del Servidor ?

 

No se que hacer, el script lo tengo que poner en el html donde enlace con un link la direccion de archivo (video)?

 

 

Bueno he hecho lo siguiente, aunque el Nvu no soporta html5 por ser de 1999, he programado en html lo siguiente.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta charset="utf-8" />
  <title>T&iacute;tulo del documento</title>


  <meta content="Nombre del Autor" name="author" />

  <meta content="Descripci&oacute;n de la p&aacute;gina" name="description" />

  <meta content="etiqueta1, etiqueta2, etiqueta3" name="keywords" />

  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

</head>

<body>

<a href="../index.html">volver</a><br />

<br />

<video controls="">
<source src="/media/odroid/Maxtor/albert1.mp4" type="video/mp4">Desculpe; seu navegador n&atilde;o
suporta v&iacute;deos HTML5 em WebM com VP8 ou MP4 com H.264.<!-- Você pode embutir um Flash player aqui, para exibir seu vídeo mp4 em navegadores antigos -->
</source></video>
<video controls=""><source src="Albert%20Speer%20&amp;%20Karl%20Doenitz%20interview.mp4" type="video/mp4">Desculpe; seu navegador n&atilde;o
suporta v&iacute;deos HTML5 em WebM com VP8 ou MP4 com H.264.<!-- Você pode embutir um Flash player aqui, para exibir seu vídeo mp4 em navegadores antigos -->
</source></video>
</body>

</html>

 

 

el video no se puede observar, sin embargo , cuando lo he provado a modo local en windows, si que ha ido, pero en el servidor no,

 

Dejo el enlace>

 

 

http://repositoryofmechanisms.mooo.com/video1.html

 

Bueno voy a generar otro html , le voy a  llamar video2 y voy a ponerle el codigo coloreado que he referenciado al principio, del ultimo link de la pagina que me haveis pasado.

 

<!doctype html>
  <html>

<link rel="stylesheet" type="text/css" href="full.css">
  <style>
video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}


</style>
  <!-- Actual video file is 480x360 -->
  <video id="video_background" controls autoplay>
      <!-- .mp4 file must come first for Safari.  IE9 will also play it. -->
      <source src="video.mp4" />
      <!-- Firefox 4.x, Google Chrome, and Opera will play the .webm format -->
      <source src="video.webm" />
      <!-- Firefox 3.5/3.6 will only play .ogv files -->
      <source src="video.ogv" />
      <!-- If all else fails, the script below will try to launch the Flash player. -->
      <embed
          src="/media/odroid/Maxtor/albert1.mp4"
          flashvars="movieName=video&autoStart=true"
          width=480
          height=390
          allowFullScreen=true
          type="application/x-shockwave-flash"
          pluginspage="http://get.adobe.com/flashplayer" />
      </video>
  </td></tr></table>
  <br>
  <font size=+1></font>
 
  </center></body></html>

 

 

Podeis observar en el siguiente enlace

 

http://repositoryofmechanisms.mooo.com/video2.html

 

 

tampoco me va.

 

Ambas direcciones tienen mi disco duro externo, no se si es por permisos, o me falta poner algo en el codigo, porque la direccion la tengo clara. media/odroid/Maxtor/albert1.mp4"

 

 

Ahora voy a probar hacer un video3, pero en source le voy a meter una url de youtube

 

quedando asi>

 

<!doctype html>
  <html>

<link rel="stylesheet" type="text/css" href="full.css">
  <style>
video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}


</style>
  <!-- Actual video file is 480x360 -->
  <video id="video_background" controls autoplay>
      <!-- .mp4 file must come first for Safari.  IE9 will also play it. -->
      <source src="video.mp4" />
      <!-- Firefox 4.x, Google Chrome, and Opera will play the .webm format -->
      <source src="video.webm" />
      <!-- Firefox 3.5/3.6 will only play .ogv files -->
      <source src="video.ogv" />
      <!-- If all else fails, the script below will try to launch the Flash player. -->
      <embed
          src="https://www.youtube.com/watch?v=szdbKz5CyhA"
          flashvars="movieName=video&autoStart=true"
          width=480
          height=390
          allowFullScreen=true
          type="application/x-shockwave-flash"
          pluginspage="http://get.adobe.com/flashplayer" />
      </video>
  </td></tr></table>
  <br>
  <font size=+1></font>
 
  </center></body></html>

 

enlace

 

http://repositoryofmechanisms.mooo.com/video3.html

 

tampoco me tira, por lo menos ya se que no es de los videos...

Editado por Eloy Beltran

Compartir este post


Enlace al post
Compartir en otros sitios

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invitado
Responder en este tema...

×   Has incluido contenido con formato.   Eliminar formato

  Sólo se permiten 75 emoticonos como máximo.

×   Tu enlace ha sido insertado automáticamente.   Deshacer y mostrar como enlace

×   Su contenido anterior ha sido restaurado.   Limpiar editor

×   No puedes pegar imágenes directamente. Súbelas a algún hosting de imágenes y pega la dirección URL

Conéctate para seguir esto  

×
×
  • Crear Nuevo...