Categoría: Nginx

Lo primero y más importante es tener un dominio principal apuntado a nuestro servidor y un subdominio como «api.midominio.com» ya que va a ser NECESARIO para que nos funcione correctamente el login y registro utilizando nuestro propio domino, ya que de no apuntarlo así el login lo intenta hacer contra localhost:4019 y falla.

Si no queremos tener dominio apuntado, no hace falta hacer nada y poner directamente la instrucción de docker sin personalizar vite_app_api_host ni nada, dejándolo todo default.

Obviamente tener docker instalado

Debemos generar una key:

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Hacemos pull de la imagen docker oficial:

# Funcionamiento con servidor MYSQL instalado en el propio servidor pero apuntando a IP externa ya que con localhost no tira
docker run -p 4019:4019 -p 4018:4018 \
  -e CB_ENCRYPTION_KEY=key_generada_anteriormente \
  -e CB_API_HOST=0.0.0.0 \
  -e CB_API_PORT=4019 \
  -e CB_DB_HOST=IP_PUBLICA_DEL_SERVIDOR_NO_LOCAHOST \
  -e CB_DB_PORT=3306 \
  -e CB_DB_NAME=chartbrew \
  -e CB_DB_USERNAME=user_bbdd \
  -e CB_DB_PASSWORD=password_bbdd \
  -e CB_REDIS_HOST=host.docker.internal \
  -e CB_REDIS_PORT=6379 \
  -e CB_REDIS_PASSWORD= \
  -e VITE_APP_CLIENT_HOST=http://localhost:4018 \
  -e VITE_APP_CLIENT_PORT=4018 \
  -e VITE_APP_API_HOST=https://api.midominio.com:4019 \
  razvanilin/chartbrew

MUUUUUUUY IMPORTANTE: hay que apuntar el VITE_APP_API_HOST a un dominio apuntado a este serviddor que haga las funciones de API y que esté bajo proxy de http://IPDELSERVIDOR:4019 si no va a dar problemas a la hora de realizar login y registro si queremos utilizar nuestro dominio.

Con esto ya estaría operativo respondiendo bajo la IP pública del servidor en el puerto 4018, si queremos apuntar un dominio tenemos que tocar la configuración de nginx y que el location apunte al proxy de la IP con el puerto. Este sería un fichero de ejemplo para Laravel Forge:

Esto iría en el bloque de server:

add_header X-Frame-Options "ALLOWALL";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";

Esto sería el bloque de Location que tenemos que sustituir:

# Aquí configuramos el proxy inverso
location / {
   proxy_pass http://IP_PUBLICA:4018;  
   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;
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header X-Forwarded-Proto $scheme;
}

Habilitar acceso externo a mysql

Editar el fichero /opt/easyengine/services/docker-compose.yml

En el bloque de “global-db:”
Añadir ( teniendo en cuenta las tabulaciones o dará error el compose)
ports:
- “3306:3306”

Esto mapeará el puerto 3306 del docker de mysql al puerto 3306 de la maquina principal. Por defecto ya permite la conexión desde cualquier host y no hay que tocar ninguna configuración especial de mysql ni nada.

Rehacer docker con el siguiente comando dentro de esa misma carpeta
docker-compose up -d

---

Para activar las admin tools y poder acceder a phpmyadmin y demás herramientas hay que utilizar el siguiente comando

ee admin-tools enable example.com

Las credenciales de acceso serán las indicadas en el sitio que pueden visualizarse con

ee site info example.com

Todo tiene una autenticación previa por htpasswd para dar mayor seguridad y cuyas credenciales pueden visualizarse ejecutando

ee auth list global

Para poner en livewire un recaptcha v2, se puede hacer de dos formas.

Poniendo directamente el texto:

<div id="captcha" class="mt-4" wire:ignore></div>

                                @error('captcha')
                                    <p class="mt-3 text-sm text-red-600 text-left">
                                        {{ $message }}
                                    </p>
                                @enderror
                            
                            <script src="https://www.google.com/recaptcha/api.js?onload=handle&render=explicit"
                                async
                                defer>
                            </script>
                            
                            <script>
                                var  handle = function(e) {
                                    widget = grecaptcha.render('captcha', {
                                        'sitekey': '{{ env('RECAPTCHAV2_SITEKEY') }}',
                                        'theme': 'light', // you could switch between dark and light mode.
                                        'callback': verify
                                    });
                            
                                }
                                var verify = function (response) {
                                    @this.set('captcha', response)
                                }
                            </script>Copiando directamente el código completo 

Si hubiera problemas porque hay «modals raros» habría que utilizar esta segunda versión, ya que hay que cargar el script de una manera especial. El div como tal es lo mismo pero cambia el javascript

En la vista:

   <script>
        var  handle = function(e) {
            widget = grecaptcha.render('captcha', {
                'sitekey': '{{ env('RECAPTCHAV2_SITEKEY') }}',
                'theme': 'light', // you could switch between dark and light mode.
                'callback': verify
            });

        }
        var verify = function (response) {
            @this.set('captcha', response)
        }
    </script>
    <script>

        document.addEventListener('DOMContentLoaded', () => {
            
            {{-- Para abrir el modal de alerta de precios --}}
            var myModal_alerta = new bootstrap.Modal(document.getElementById('modal_alerta_precio'));

            window.addEventListener('abrir_modal_alerta_precio', event => {
                var script = document.createElement('script');
                script.src = 'https://www.google.com/recaptcha/api.js?onload=handle&render=explicit';
                document.body.appendChild(script);
                myModal_alerta.show();
            });
            window.addEventListener('cerrar_modal_alerta_precio', event => {
                myModal_alerta.hide();
                var alerta_precio = new bootstrap.Modal('#aviso_alerta_precio');
                alerta_precio.show();

            });
            {{-- /Para abrir el modal de alerta de precios --}}
        });

Y luego en el componente

public $captcha = null;
 
public function updatedCaptcha($token)
{
    $response = Http::post(
        'https://www.google.com/recaptcha/api/siteverify?secret='.
        env('CAPTCHA_SECRET_KEY').
        '&response='.$token
    );
 
    $success = $response->json()['success'];
 
    if (! $success) {
        throw ValidationException::withMessages([
            'captcha' => __('Google thinks, you are a bot, please refresh and try again!'),
        ]);
    } else {
        $this->captcha = true;
    }
}
 
// validate the captcha rule
protected function rules()
{
    return [
        'captcha' => ['required'],
        // ...
    ];
}

Cogido de referencia de la web: https://coderflex.com/blog/enhancing-security-and-user-experience-leveraging-recaptcha-with-laravel-and-livewire#step-9-add-google-recaptcha

Para instalar un certificado intermedio simplemente hay que fusionar la clave pública con la clave intermedia proporcionada por el proveedor de SSL.

En globalsign es esta URL para sacar el certificado.
https://support.globalsign.com/ca-certificates/intermediate-certificates/organizationssl-intermediate-certificates

Simplemente se combinan ambos en un sólo fichero crt con el comando

cat clavepublic.crt claveintermedia.crt > certificado_generado_a_instalar.crt

Al hacer esto dentro del fichero certificado_generado_a_instalar.crt están uno detras del otro (eso es bien).

Si estamos utilizando por ejemplo Laravel Forge, copia la clave privada en el textarea de Private Key, y copiamos el crt generado en el textarea de Certificate.

Para desactivar el firewall que por defecto viene activado en las máquinas virtuales de Oracle hay que lanzar estos dos comandos.

sudo iptables -F
sudo netfilter-persistent save

Para poder hacer un import del bootstrap y poder usarlo hay que indicar esto en el app.js, muy importante el «window.bootstrap» ya que si no, no podemos usarlo en la sección de scripts.

import * as bootstrap from 'bootstrap';

window.bootstrap = bootstrap;

Para usar el «S3» de Oracle, hay que crear al igual que en Amazon una clave y secret para indicarla en el .env.

Hay que tener en cuenta 3 cosas:

1. Hay que poner a true el AWS_USE_PATH_STYLE_ENDPOINT.
2. Hay que personalizar el AWS_URL con el ENDPOINT + el NOMBREDELBUCKET
3. La región podemos cogerla del OCID.

Toda esta información se localiza fácilmente en la pantalla del Bucket.

Así quedaría un .env operativo para Oracle Cloud

AWS_ACCESS_KEY_ID=386***************************

AWS_SECRET_ACCESS_KEY=7CG**********************************************

AWS_DEFAULT_REGION=eu-paris-1

AWS_BUCKET=NOMBREDELBUCKET

AWS_ENDPOINT=https://NOMBREDELNAMESPACE.compat.objectstorage.eu-paris-1.oraclecloud.com

AWS_URL=https://NOMBREDELNAMESPACE.compat.objectstorage.eu-paris-1.oraclecloud.com/NOMBREDELBUCKET/

AWS_USE_PATH_STYLE_ENDPOINT=true

Para empezar a utilizar S3 de Amazon en Laravel es muy fácil.

Lo primero es crear un usuario en el apartado de IAM con permisos de s3full

Después creamos unas credenciales para acceder desde fuera y el KEY y el SECRET es lo que tenemos que poner en el .env

OJO hay que poner en el .env también el bucket y la region (ojo a esto).

Por ejemplo:

AWS_ACCESS_KEY_ID=A**************
AWS_SECRET_ACCESS_KEY=z****************************
AWS_DEFAULT_REGION=eu-west-1
AWS_BUCKET=exports-tentless-chaps-nerine ( el nombre de tu bucket )
AWS_USE_PATH_STYLE_ENDPOINT=false

Muy importante, por defecto aunque se ponga a público el bucket, cada vez que se sube un objeto por defecto se pone privado, hay que meter esta política específicamente para que cada vez que se haga una subida por defecto el fichero/foto se muestre sin problemas usando el Storage::disk(‘s3’)->url($row->imagen).

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "ARNDELBUCKET QUE SE VE EN LA PANTALLA DE AWA ARRIBA/*"
        }
    ]
}

cd /root/

wget https://nodejs.org/dist/v18.13.0/node-v18.13.0-linux-x64.tar.gz

tar xf node-v18.13.0-linux-x64.tar.gz

cd node-v18.13.0-linux-x64

mv bin/* /usr/local/bin

mv lib/* /usr/local/lib

node -v

npm -v

npx -v

Para nosotros

1. Generamos la key
   openssl genrsa -des3 -out ca.key 4096
   
2. Creamos nuestro certificado CRT con esa llave. Tendremos que responder varias preguntas que deben ser las mismas que si en un futuro lo queremos renovar (la renovación es la generación en sí de uno nuevo)
   Generar
   openssl req -new -x509 -days 365 -key ca.key -out ca.crt
   
   Ver información introducida
   openssl x509 -in ca.crt -noout -text

Para cada cliente

1. Generamos la key para el cliente
   openssl genrsa -des3 -out ayuntamientoquesea.key 4096
2. Generamos su certificado CSR. Hay que responder varias preguntas; responde a cada una, incluido el nombre común (CN) y la dirección de correo electrónico.
   openssl req -new -key ayuntamientoquesea.key -out ayuntamientoquesea.csr
3. Firmar el CSR con nuestro certificado y llave. Por lo general, hay que incrementar el número de serie con cada firma. Una vez que el certificado caduca, no es necesario volver a crear una nueva CSR; se puede firmar el mismo, lo que creará un nuevo certificado vinculado a esa clave pública. Si queremos 14 meses serían 410 días.
   openssl x509 -req -days 365-in ayuntamientoquesea.csr -CA ca.crt -CAkey ca.key -set_serial 01 -out ayuntamientoquesea.crt
4. Crear el PFX que pueda importar el usuario en el navegador
   openssl pkcs12 -export -out ayuntamientoquesea.pfx -inkey ayuntamientoquesea.key -in ayuntamientoquesea.crt -certfile ca.crt

Configurar NGINX para DOBLE FACTOR

Las líneas básicas para activar el doble factor deben aplicar en cada fichero de cada web del sites_availables, indicando la ruta exacta de donde está ubicado el certificado propio nuestro.

Si estamos usando HestiaCP hay que tocar las plantillas y configurar el sitio para que use esta plantilla. Normalmente lo que se suele hacer es clonar la plantilla que estamos usando (por ejemplo laravel) y a esa plantilla clonada meterle estas líneas. Las plantillas en hestia se encuentran en

cd /usr/local/hestia/data/templates/web/nginx/php-fpm/

Las líneas son las siguientes, a completar con lo indicado en el ENS

ssl_client_certificate /etc/nginx/innova/ca.crt;
ssl_verify_client on;

El nombre del ayuntamiento hay que meterlo en Section

El nombre de swpolicial en «Unidad Organizativa Software«

En el «asunto» que es «Company» hay que poner el «nombre del ayuntamiento – swpolicial«

El emisor si está bien poner «SWPOLICIAL»

El número de serie podría ser el 0000 (0007 almonte) IDAYUNTAMIENTO YMD de cuando se genera