Despliegue del Frontend de Angular

1. Explicación

Angular solo se necesita para DESARROLLAR y COMPILAR.
El servidor solo sirve archivos estáticos (HTML, CSS, JS).

Alumno / GitHub Actions
└── Angular + Node + ng build
        ↓
      dist/ (HTML, CSS, JS)
        ↓
VPS Ubuntu
└── Apache → sirve archivos estáticos

Aquí os dejo un proyecto funcionado en Angular:

1.1. Angular en el ordenador

https://nodejs.org/es/download

Node.js

node -v
npm -v

Angular

npm install -g @angular/cli
ng  version

1.2. Creación del proyecto

Creamos el proyecto

ng serve -o

2. Build de producción

Creamos el Build de producción que es lo que sube al VPS

ng build --configuration production

3. Configuración Apache2

apt install apache2

a2enmod rewrite

systemctl reload apache2

Rutas Angular (refresh no debe dar 404), lo vemos más adelante, ahora no

Crea el .htaccess en el VPS:

sudo nano /var/www/mi-app/.htaccess

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

sudo systemctl restart apache2

4. Subir la carpeta

Subimos la carpeta Browser

scp -r dist/mi-app/browser/* usuario@IP_DEL_VPS:/var/www/html/

Verificamos

5. GITHUB

ssh-keygen -t ed25519

Subimos la clave públic (id_ed25519.pub):

Profile → Settings → SSH and GPG keys → New SSH key:

• Title: Portátil clase DAM

• Key: pegar el contenido del .pub

• Type: Authentication Key