Ubuntu + Nginx + Subdomain -> app

ubuntu_nginx_hosting.txt

                     ------------- Hosting compartido a través de Nginx -------------
                 ---__________________________________________________________________---                    

    El objetivo será enlazar las distintas aplicaciones con un nombre específico dentro del dominio del servidor 
    compartido. Asumiendo que el dominio es "digitalservices.com" vamos a realizar la implementación tal que 
    tengamos el siguiente esquema:
    
    ____Esquema de APIS con Node JS
        
 HOST    |    CNAME   |  SUBDOMAIN   |         DOMAIN           |  PATH    |   TIPO   |  PROJECT  |  PORT   |  ENDPOINT
-------------------------------------------------------------------------------------------------------------------------
 http:// |     www    |  api.tasks   |   digitalservices.com    |   /      | API-REST | api-tasks |  4000   |  /api/v1 
 http:// |     www    |  api.users   |   digitalservices.com    |   /      | API-REST | api-users |  4001   |  /api/v1
 http:// |     www    |  api.auth    |   digitalservices.com    |   /      | API-REST | api-auth  |  4002   |  /api/v1
 ------------------------------------------------------------------------------------------------------------------------
 ------------------------------------------------------------------------------------------------------------------------
 

    ____Esquema de SPAS y páginas estáticas 
    
  HOST    |    CNAME   |  SUBDOMAIN   |         DOMAIN           |  PATH    | TIPO   |  PROJECT  |PORT | location
-------------------------------------------------------------------------------------------------------------------------
  http:// |     www    |    blog      |   digitalservices.com    |   /      |  SPA   | blog-react| 80  | /var/www/blog
  http:// |     www    |    dash      |   digitalservices.com    |   /      |  SPA   | dashboard | 80  | /var/www/dashboard
  http:// |            |              |   digitalservices.com    |   /      |  HTML  | intranet  | 80  | /var/www/intranet
  http:// |            |              |   digitalservices.com    |   /sign  |  HTML  |  login    | 80  | /var/www/sign
 ------------------------------------------------------------------------------------------------------------------------
 ------------------------------------------------------------------------------------------------------------------------

  ___Preparación del entorno

   - Para el ejemplo usamos un droplet de Digital Ocean con Ubuntu 22.04 y Nginx 
   - Actualizamos el sistema:                  apt update    
   - Instalamos apt install:                   snapd  -  tree  -  nano  -  nvm  -  git
   - Versión de Node utilizada:                nvm install Gallium
   - Instalaciones de Node JS globales:        nodemon - yarn - pm2 
   - Creamos un directorio de repositorios:    mkdir  repositories/
   
   
  ___Clonamos los tres proyectos de backend y los dos de frontend
  
    - Realizamos la build de cada proyecto para optimizar el código.
    - Ponemos a correr con PM2 las 3 API-REST  -> pm2 start dist/index.js --name "<API NAME>"
    - Creamos 4 directorios en /var/www/  :
                1 - blog
                2 - dash
                3 - intranet
                4 - sign
     
    - Movemos los archivos del build de cada front a su directorio correspondiente:
                blog_   mv ~/repositories/blog-react/build/*  /var/www/blog/
                dash_   mv ~/repositories/dashboard/build/*  /var/www/dash/
                
    - Creamos los index.html dentro de intranet/   y    sign/  cada uno con su estructura.
    
     
     
  ___Enrutamiento con Nginx para los servicios REST
    
    - Ahora que ya tenemos preparado el escenario vamos a comenzar por enrutar las APIS:
      
        1. Nginx tiene un una configuración por defecto en la cual permite 
           configuiraciones adicionales, aca entran en juegos los directorios de 
            - sites-available: son los sitos validos con la configuración de enrutamiento.
            - sites-enabled: son enlaces simbolicos a los archivos de configuración de la
                             carpeta sites-available.
         
        2. El proceso de creación de los archivos de configuración:
            - cp /sites-available/default  /sites-available/api.tasks
            - nano /sites-available/api.tasks:
                
              server {
                    server_name api.tasks.digitalservices.com www.api.tasks.digitalservices.com;  // CNAME : www

                    location /v1 {
                      proxy_pass http://localhost:4000/api/v1;
                      proxy_http_version 1.1;
                      proxy_set_header Upgrade $http_upgrade;
                      proxy_set_header Connection 'upgrade';
                      proxy_set_header Host $host;
                      proxy_cache_bypass $http_upgrade;
                    }
                    
                    location /v2 {
                      proxy_pass http://localhost:4000/api/v2;
                    }
                   ......
                   .....
              }
              ......
              .....
           
        3. Ahora generamos el enlace simbólico en los sitios habilitados:
            
              - ln -s /sites-available/api.tasks   /sites-enabled/api.tasks
              - nginx -t     -> nos retorna si la sintaxis fue aceptada
              - service nginx reload    o    service nginx restart 
              - service nginx status
              - En la url del navegador: 
                          http://api.tasks.digitalservices.com/v1
                          http://www.api.tasks.digitalservices.com/v1
            
    
   
  ___Enrutamiento con Nginx para los sitios státicos y las SPA
      
     1. El proceso de creación de los archivos de configuración:
            - cp /sites-available/default  /sites-available/blog
            - nano /sites-available/blog:

            server {
                  root /var/www/blog;

                  server_name blog.digitalservices.com www.blog.digitalservices.com;

                  index index.html;
                
                  .........
             }
            .....
            #Configuración válida para host CON SUBDOMINIO
            
     2. Para el caso del sitio de sign:  http://digitalservices.com/sign  :: login de la intranet
            - cp /sites-available/default  /sites-available/sign
            - nano /sites-available/sign:
        
            server {
                   listen       80;
                   server_name  digitalservices.com www.digitalservices.com;
                   access_log   logs/digitalservices.access.log  main;

                   location ~ ^/sign/(images|javascript|js|css|flash|media|static)/{                   
                        root    /var/www/sign/htdocs;
                        expires 30d;
                   }

                   location /sign {
                        root  /var/www/sign;
                        index index.html;
                   }
             }
             
         
     3. Finalmente repetimos el punto _3_ de la sección "Enrutamiento con Nginx para los servicios REST"
        para generar los enlaces simbolicos y recargar Nginx.
        
        
  
  ____Certificación SSL con Certbot
    
      Fuente: https://certbot.eff.org/instructions?ws=apache&os=ubuntufocal
      
      Una vez realizado el procedimiento de certbot podemos acceder a nuestras URL 
      anteponiento HTTPS.