Despliegue del Frontend de Angular

1. Explicación

Hay que implementar un sistema de despliegue continuo (CI/CD) que permite publicar automáticamente un proyecto Angular en un servidor VPS mediante GitHub Actions

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. Sincronizamos con GITHUB

Elige una de las dos y no pongas contraseña de cifrado de la clave privada

ssh-keygen -t ed25519 -C "github-alumno" -f ~/.ssh/clave_github_001

ssh-keygen -t ed25519

Esto genera:

~/.ssh/clave_github_001           →  clave privada
~/.ssh/clave_github_001.pub   → clave pública

Subimos la clave pública (clave_github_001.pub):

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

• Title: Portátil clase DAM

• Key: pegar el contenido del .pub

• Type: Authentication Key

5.1. Subimos clave pública

La clave pública que vamos a subir es la que se encuentra en:

clave_github_001.pub

Vamos al GitHub:

GitHub → Settings → SSH and GPG keys → New SSH key

Verificamos que podemos conectarnos:

ssh -i ~/.ssh/clave_github_001 -T git@github.com

Añadimos la clave al .ssh/config

Host github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/clave_github_001
  IdentitiesOnly yes

Ahora seguiremos estos pasos para todos los proyectos que queramos gestionar:

1. Creo repo vacío en GitHub
2. Inicializo repo local
3. Enlazo por SSH
4. Primer push

5.2. Creación repositorio vacío

Creamos nuevo repositorio:

• Repository name: angular-002

• Description: Repositorio de prácticas Angular: Git, GitHub por SSH y despliegue en servidor VPS.

• Visibility: Public

• README: Desmarcado

• .gitignore: Desmarcado

• License: Desmarcado

Nos dan las instrucciones para sincronizar el repositorio, pero todavía no:

5.3. Git local

Ahora preparamos nuestro git local:

Inicializar Git local

git init
git branch -M main
git status
git add .
git commit -m "....."

Enlazar con el repo remoto (SSH)

git remote add origin git@github.com:damiansu/angular-002.git
git remote -v # comprobamos
git branch -M main
git push -u origin main

Y vemos que se sube el repositorio completo:

6. Crear una SSH key para el VPS

Creamos un acceso por ssh al server por claves autorizadas

ssh-keygen -t ed25519 -C "deploy-angular-002" -f ~/.ssh/clave_vps_angular_002

Autorizar la pública en el VPS, subimos la pública al server

nano /root/.ssh/authorized_keys

Comprobamos que desde el terminal por ssh nos conectamos:

ssh -i ~/.ssh/clave_vps_angular_002 root@desplegando123.com

Guardamos secrets en GitHub al repositorio angular-002

Repo → Settings → Secrets and variables → Actions

• VPS_HOST = desplegando123.com (o tu IP)

• VPS_USER = root

• VPS_PATH = /var/www/html

• VPS_SSH_KEY = contenido completo de ~/.ssh/clave_vps_angular_002 (privada)

7. Crear GitHub Actions

Crear GitHub Actions para compilar y subir el dist

Creamos el archivo: .github/workflows/deploy.yml

name: Deploy Angular to VPS (Apache)

on:
  push:
    branches: [ "main" ]

jobs:
  build-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: "20"

      - run: npm ci
      - run: npm run build -- --configuration production

      - name: Inspect dist
        run: |
          ls -la dist
          ls -la dist/* || true
          ls -la dist/*/browser || true

      # AJUSTA EL path cuando veas la estructura en logs
      - name: Deploy via rsync
        uses: burnett01/rsync-deployments@7.0.1
        with:
          switches: -avzr --delete
          path: dist/posts-get/browser/
          remote_path: ${{ secrets.VPS_PATH }}
          remote_host: ${{ secrets.VPS_HOST }}
          remote_user: ${{ secrets.VPS_USER }}
          remote_key: ${{ secrets.VPS_SSH_KEY }}

El despliegue copia únicamente el contenido de la carpeta browser, ya que contiene directamente el index.html que Apache sirve desde /var/www/html.

8. Commit del workflows

Commit del workflow

git add .github/workflows/deploy.yml
git commit -m "Deploy Angular to /var/www/html"
git push

Esperamos a que el workflow termine en verde:

Abrimos el navegador: