Laboratorio 2: Introducción a Apache

Objetivos

Durante esta práctica, los alumnos serán capaces de:

Instalar, configurar y administrar de manera básica el servidor de Web Apache en un sistema Linux.
Crear páginas con contenido estático.
Escribir scripts CGI en JavaScript para producir páginas con contenido dinámico.

Esta actividad promueve las siguientes habilidades, valores y actitudes: análisis y síntesis, capacidad de resolver problemas, creatividad, y uso eficiente de la informática y las telecomunicaciones.

Descripción de la actividad

NOTA IMPORTANTE: Las actividades de la práctica se pueden elaborar de manera individual o en parejas. El reporte de la práctica de laboratorio debe ser desarrollado de manera individual.

Instala el servidor de Web Apache en tu sistema de Ubuntu Linux. Desde la terminal teclea:
```
sudo apt-get install apache2
```
Verifica que esté funcionando el servidor usando el siguiente URL desde tu navegador: http://localhost/
Configura Apache para que sepa donde encontrar los archivos de tu sitio Web. En $HOME/www/static residirá todo tu contenido estático, y en $HOME/www/cgi-bin estarán los scripts CGI para generar contenido dinámico. Para crear los directorios mencionados, teclea desde la terminal:
```
cd

mkdir www

cd www

mkdir static

mkdir cgi-bin
```

Abre el archivo /etc/apache2/sites-enabled/000-default con privilegios de administrador (root). Desde la terminal teclea:

gksudo gedit /etc/apache2/sites-enabled/000-default

Edita dicho archivo para que Apache pueda utilizar los directorios recién creados. Reemplaza username por el nombre de usuario correcto:

<VirtualHost *:80>
    # Coloca aquí el correo electrónico del administrador de Apache
    ServerAdmin Webmaster@localhost username@example.com

    DocumentRoot /var/www /home/username/www/static
    <Directory />
        Options FollowSymLinks
        AllowOverride None
    </Directory>
    <Directory /var/www/ /home/username/www/static/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride None
        Order allow,deny
        allow from all
    </Directory>

    ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/ /home/username/www/cgi-bin/
    <Directory "/usr/lib/cgi-bin" /home/username/www/cgi-bin>
        AllowOverride None
        Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
        Order allow,deny
        Allow from all
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log

    # Possible values include: debug, info, notice, warn, error, crit,
    # alert, emerg.
    LogLevel warn

    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Siempre que se modifique la configuración de Apache es necesario reiniciarlo para que los cambios surtan efecto. Desde la terminal teclea:

sudo /etc/init.d/apache2 restart

Además de la opción restart, se puede invocar el comando anterior con las opciones stop y start para detener e iniciar el servidor de Web Apache, respectivamente.

Al reiniciar, detener e iniciar el servidor Web Apache aparece el siguiente mensaje:

apache2: Could not reliably determine the server's fully qualified domain name,
using 127.0.1.1 for ServerName

Para evitar que aparezca este mensaje, se debe crear (usando privilegios de administrador) un archivo de texto llamado name en el directorio /etc/apache2/conf.d, cuyo contenido debe ser la siguiente línea:

ServerName localhost

Crea una hoja de estilos estilos.css y una página de bienvenida index.html para probar que la configuración de tu sitio Web sea correcta. Ambos archivos deben localizarse en el directorio www/static.

/* Archivo: estilos.css */

body {
    background: #FFF;
    color: #000080;
    font-family: sans-serif;
    font-size: medium;
    margin: 20px;
}

h1 {
    color: #069;
    font-size: 230%;
    border-bottom: 4px solid #069;
    margin: 10px 0px 20px 0px;
    padding: 0px;
}

table {
    border-collapse: collapse;
    border: 1px solid #000000;
    padding: 0px;
    margin-bottom: 10px;
    color: #000000;
    background: #E6E6FA;
}

td {
    border: 1px solid #000000;
    padding: 10px;
    text-align: left;
}

th {
    border: 1px solid #000000;
    padding: 10px;
    color: #008080;
    background: #B0E0E6;
    text-align: center;
}

<!-- Archivo: index.html -->

<!DOCTYPE html>

<html lang="es">

    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="/estilos.css"/>
        <title>El Chorrito</title>
    </head>

    <body>

        <h1>El Chorrito</h1>

        <p>
            <strong>Autor: Francisco Gabilondo Soler</strong>
        </p>
        <p>
            La gota de agua que da la nube<br/>
            como regalo para la flor<br/>
            en vapor se desvanece<br/>
            cuando se levanta el sol;<br/>
            y nuevamente al cielo sube<br/>
            hasta la nube que la soltó.<br/>
            La gotita sube y baja,<br/>
            baja y sube<br/>
            al compás de esta canción:<br/>
        </p>
        <p>
            Allá en la fuente<br/>
            había un chorrito,<br/>
            se hacía grandote<br/>
            se hacía chiquito;<br/>
            allá en la fuente<br/>
            había un chorrito,<br/>
            se hacía grandote<br/>
            se hacía chiquito;<br/>
            estaba de mal humor,<br/>
            pobre chorrito tenía calor<br/>
            estaba de mal humor,<br/>
            pobre chorrito tenía calor.
        </p>
    </body>

</html>

Apunta nuevamente tu navegador a http://localhost/. Debes poder ver la página index.html rendereada de la manera esperada.

Ahora revisaremos que los scripts CGI también funcionen correctamente. En el directorio www/cgi-bin coloca el siguiente archivo fuente de JavaScript llamado ahorita.js:

#!/usr/bin/env node

// Archivo: ahorita.js

'use strict';

// Imprimir encabezados de la respuesta
console.log('Content-type: text/html; charset=utf-8');

// MUY IMPORTANTE: Imprimir una línea en blanco para delimitar
// los encabezados del cuerpo de la respuesta.
console.log();

console.log('<!DOCTYPE html>                                 \n' +
'                                                            \n' +
'<html lang="es">                                            \n' +
'                                                            \n' +
'    <head>                                                  \n' +
'        <meta charset="utf-8"/>                             \n' +
'        <link rel="stylesheet" href="/estilos.css"/>        \n' +
'        <title>La hora de ahorita</title>                   \n' +
'    </head>                                                 \n' +
'                                                            \n' +
'    <body>                                                  \n' +
'                                                            \n' +
'        <h1>La hora de ahorita</h1>                         \n' +
'                                                            \n' +
'        <p>                                                 \n' +
'            La fecha y hora del servidor Web en este        \n' +
'            momento es: <strong>%s</strong>                 \n' +
'        </p>                                                \n' +
'                                                            \n' +
'        <p>                                                 \n' +
'            [<a href="">Actualizar</a>]                     \n' +
'        </p>                                                \n' +
'                                                            \n' +
'    </body>                                                 \n' +
'                                                            \n' +
'</html>', new Date());

Es indispensable que este archivo tenga permisos de ejecución. Teclea desde la terminal (en el directorio www/cgi-bin):

chmod +x ahorita.js

Usa el siguiente URL desde tu navegador para ver el resultado: http://localhost/cgi-bin/ahorita.js

Escribe un nuevo script CGI en JavaScript llamado ambiente.js que imprima en orden lexicográfico (alfabético) los nombres de todas las variables de ambiente que estén disponibles junto con sus valores asociados, utilizando una tabla de HTML parecida a la siguiente:

Variable	Valor
DOCUMENT_ROOT	/home/username/www/static
GATEWAY_INTERFACE	CGI/1.1
HTTP_ACCEPT	text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
...	...

Las variables de ambiente se pueden obtener en Node.js usando la propiedad env del objeto process.

El URL para el script debe ser: http://localhost/cgi-bin/ambiente.js

¿Qué se debe entregar?

Para entregar tu trabajo individual, sigue las siguientes instrucciones:

Escribe el reporte de la práctica tal como se detalla en el documento Reportes de laboratorio. El nombre del archivo fuente de AsciiDoc debe ser reporte_lab2_A0MMMMMMM.txt, en donde A0MMMMMMM corresponde a tu matrícula. A partir del código fuente de AsciiDoc debes generar el archivo HTML correspondiente. Dicho archivo se debe llamar reporte_lab2_A0MMMMMMM.html. Coloca ambos archivos dentro del directorio www.
Crea un archivo tarball con todo el contenido del directorio www. Nombra a este archivo lab2.tgz. Este archivo se puede crear desde la terminal tecleando lo siguiente (asegúrate que te encuentres en el mismo nivel que el directorio www):
```
tar czf lab2.tgz www
```
Usando el Sistema de Entrega de Tareas Automatizado (SETA), entrega el archivo tarball.

Fecha límite: Martes, Febrero 5.

Evaluación

Esta actividad será evaluada usando los siguientes criterios:

50%	Implementación de los requerimientos.
50%	Reporte de la práctica de laboratorio.
DA	El programa y/o reporte es un plagio.

Desarrollo de aplicaciones distribuidas

Laboratorio 2: Introducción a Apache

Objetivos

Descripción de la actividad

¿Qué se debe entregar?

Evaluación