Instalación de Apache Server en OpenSUSE para tener nuestro propio servidor web.

Vamos a crear y configurar un servidor web en Linux para alojar nuestra página web. Requisitos: - Windows como host (máquina local) con Oracle VirtualBox instalado. - Máquina virtual (en adelante vm) con sistema operativo Linux, usaremos Opensuse Leap 15.6 (en adelante suse).
La idea es desarrollar la aplicación web en local (Windows) con el IDE o framework elegido. Después ese código lo tenemos que colocar de alguna manera en la vm para poder compilarlo y enviar los "ejecutables" a la ruta del servidor. Por ejemplo, yo tengo un proyecto de angular, edito código con sublime text y subo cambios a repositorio en GitLab. Aquí pongo un resumen de los pasos más generales.


Itinerario:

  • Instalar programas necesarios en Windows.

  • Desarrollar y compilar en local (en Windows).

  • Subir cambios a repositorio con git.

  • Instalar Linux, la distribución elegida es Opensuse Leap 15.6

  • Descargar el código del repositorio a la vm.

  • Compilar el proyecto para producción en el suse.

  • Copiar compilados a la carpeta de despliegue para que los muestre Apache.

Preparativos


En Windows:
Variará en función del lenguaje y del entorno de programación elegidos, en mi caso, Angular y Sublime Text. Necesitamos también Nodejs y Git instalados en Windows. Veamos los pasos en modo resumen:

  • Instalar Nodejs en Windows: Nodejs

  • Instalar Git en Windows. La instalación pide bastantes cosas, dejar todo por defecto. Instala Git Bash consola y GUI. Git para Windows

  • Abrir un terminal (CMD) con permisos de administrador, ir al raíz y ejecutar: 
     
            npm i -g @angular/cli@latest
            npm install -g @angular/cli
  • IDE o editor preferido. En mi caso, Sublime Text.


Para Linux:
Lo primero es instalar Oracle VirtualBox, no es el objeto de este artículo, solamente indicar que se necesita una iso de opensuse leap 15.6 y crear la vm con suficiente espacio de disco duro, mínimo recomendado 30GB, deseable 50GB, si tenéis suficientes recursos: 8GB de ram y 4 núcleos.
Arrancamos la vm, se recomienda no tener varias vm en marcha para no saturar Windows. Recomiendo revisar lenguaje de teclado. Yo prefiero Konsole a xTerm como consola de comandos, hay que instalarlo ("sudo zypper install konsole"). Pasos:

  • Instalar Apache2.

  • Configuración firewall

  • Instalar de Nodejs, npm y Angular CLI

  • Subir (o descargar) código a la vm

  • Instalar Git.

  • Compilar el proyecto para producción en el suse.

  • Primer acceso en local.

Desarrollo en local

Una vez instaladas las herramientas necesarias en Windows tenemos todo listo para empezar a desarrollar la página web. Yo tengo una SPA, single page application, una página sencilla con html y css dentro del framework angular. El primer paso es crear la estructura, el proyecto, nos situamos en la carpeta de proyectos web y ejecutamos: 
 
        ng new nombreproyecto
Sobre las preguntas que hace, respondemos: angular routing: NO, CSS, Yes, Yes. Borrar todos los rastros de Git si los tiene para evitar conflictos en la primera sincronización con el repositorio remoto.
Ahora tenemos los archivos donde insertar el contenido, si seguimos con el ejemplo de angular, principalmente tendremos que tocar: index.html, styles.css, app.css y app.html. Añadimos nuestro código y lógicamente querremos ver los resultados, ejecutamos: 
 
        ng serve
Esto compila en dev y podremos ver la previa de nuestra web en un navegador, en Nuestra web en dev local.

Instalar Apache

Ahora pasamos a la vm, vamos a realizar las instalaciones necesarias para Linux. La instalación de apache en opensuse es rápida y limpia, es la instalación principal ya que es el servidor que va a alojar y gestionar nuestra web. 


 
        sudo zypper refresh
        sudo zypper update
        sudo zypper install apache2
        sudo systemctl enable apache2 > sólo la primera vez
        sudo systemctl start apache2
        sudo systemctl status apache2

Cómo instalar y configurar Apache en OpenSUSE

Habilitar http y https en firewall

Es necesario habilitar el firewall en suse para que permita el tráfico a los protocolos http y https, los cuales son servicios en linux. Lo hacemos ejecutando lo siguiente: 


 
        sudo firewall-cmd --permanent --add-service=http
        sudo firewall-cmd --permanent --add-service=https
        sudo firewall-cmd --zone=public --add-service=http --permanent
        sudo firewall-cmd --zone=public --add-service=https --permanent
        sudo firewall-cmd –reload

Instalación de Node.js, npm y Angular CLI

Ahora vamos a instalar las herramientas de código, yo he usado node y angular para desarrollar la SPA, single page aplication, una página sencilla con html y css dentro del framework angular. 


 
        sudo zypper refresh
        sudo zypper update
        sudo zypper se nodejs
        sudo zypper install nodejs22 npm
        node -v
        npm -v
        sudo npm install -g @angular/cli
        ng version
        Luego dentro del proyecto
        npm install

Subir (o descargar) código a la vm

Estamos desarrollando en local, una vez tenemos los cambios, lo subiremos a un repositorio de código (GitLab, GitHub, Bitbucket, etc) para tener versiones de nuestros cambios. Antes de instalar git en el suse para gestionar el código entre local y repositorio, vamos a aprovechar la opción de compartir carpetas entre el host y la vm para la primera vez que subimos el código a la vm. Podría hacerse con git, pero si copiamos toda la carpeta del proyecto, nos ahorramos unos pasos, ya que van también los archivos de git que ya tenemos en local.
Compartir carpetas en VirtualBox es sencillo, recomiendo compartir toda la carpeta de proyectos web o la del proyecto en el que estamos trabajando. Ahora vamos a la vm, directorio /media y ahí veremos la compartida, se trata de copiar toda la carpeta del proyecto a nuestro home (mejor como root): 

 
        sudo cp -r /ruta_carpeta_compartida/nombre_carpeta_proyecto /home/nombre_usuario

Instalar git en suse

Lo necesitamos para gestionar la descarga del código desde el repositorio remoto y eventualmente realizar algún cambio en el código aunque debería venir correcto desde dev, pero como no tenemos entorno de testing, pues seguramente tendremos que hacer correcciones aquí. 
 
        sudo zypper refresh 
        sudo zypper update 
        sudo zypper install git 
        En el directorio de proyectos: 
        git config --global user.email "bonride@gmail.com" 
        git config --global user.name "bonride" 
        git config --global credential.helper store

El credential.helper es para que la siguiente vez que los pida, los guarde. Se recomienda usar ssh en vez de credenciales directas, para nuestro caso, lo dejamos así por simplificar.
User: usuario de acceso a GitLab.
Pwd: contraseña de acceso a GitLab.
Comprobar con git status, git pull y git push.

Compilación del proyecto

Tenemos ya los archivos fuente en la carpeta de usuario del suse. Ahora vamos a compilarlos para generar los archivos que puede interpretar el servidor web.Para PRO, ejecutamos: 
 
        ng build --configuration production

Esto genera una carpeta dentro del proyecto Angular: dist/tu-nombre-de-app/, lo copiamos al servidor Apache: 

        sudo cp -r dist/apache/browser/* /srv/www/htdocs/apache

Cambiamos propietario y permisos: 

        sudo chown -R wwwrun:www /srv/www/htdocs/* 
        sudo chmod -R 755 /srv/www/htdocs/*

Acceso en local

Una vez que los compilados están en la ruta web del servidor apache y con los permisos y usuario/grupo correctos, podemos acceder a la web en local, sabiendo la ip del suse, ejemplo: 

 
        localhost:/srv/www/htdocs/apache # ls -lrt index.html  
        -rwxr-xr-x 1 wwwrun www 9070 Jan  1 06:33 index.html

En el navegador: 
 
        http://10.0.2.15/apache/
Y veremos nuestro index.html

Acceso a nuestra web desde internet

Para que el servidor web y la página sean accesibles desde Internet, es necesario añadir un port forwarding en la vm y alguna configuración más, estos son los pasos:


1. Abrir puertos en Windows. Entramos el router y añadimos:


  • Servicio: TCP.

  • Dirección IP: la ip LAN de nuestro Windows (CMD > ipconfig).

  • Protocolo: TCP.

  • Puerto LAN: 8080.

  • Puerto público: 8080.


Ejemplo con router Sercomm:

Reenvío de puertos en Windows

2. Configurar port forwarding en VirtualBox. Vm apagada, seleccionarla, configuración, red, reenvío de puertos. El host son los datos de Windows e invitado los datos de la vm.


Reenvío de puertos en la vm

3. Firewall de Windows, reglas de entrada, añadir regla. Ponerle nombre, marcar permitir conexión, luego en pestaña puertos poner TCP y 8080, el resto, por defecto.


Con esto ya tenemos redirigido el tráfico al apache server desde internet usando el puerto 8080 en el router / windows.

Prueba
Con apache levantado (systemctl status apache.service > debe estar active) y aplicada toda la configuración vista hasta ahora, vamos a hacer una prueba de acceso y visualización. Poned un index.html sencillo en /srv/www/htdocs y luego desde el movil, en un navegador y con datos móviles:


http://ip_pública:8080 > Si todo está correcto, debería mostrarse el index.html sencillo.