Despliegue #

Para realizar un despliegue en producción, no existe un único método, ya que cada desarrollador puede tener sus preferencias. A continuación, se detalla un método que puede seguir y que es un buen punto de partida.

Prerrequisitos #

Cuando crea su aplicación por primera vez, se recomienda hacerlo desde la línea de comandos:

aoc-cli n a --name app-template

Este comando creará un directorio llamado app-template (puede usar el nombre que desee) y dentro copiará la plantilla que hemos confeccionado: aoc-app-template. Además, preconfigurará aspectos como los datos de conexión a su base de datos PostgreSQL.

Es aconsejable utilizar una base de datos PostgreSQL local para su desarrollo. De igual manera, debe tener una base de datos PostgreSQL para producción. Puede instalar PostgreSQL utilizando los paquetes proporcionados por su distribución de Linux, una imagen Docker oficial, o un servicio en la nube gestionado.

Compilación manual para producción #

Si utiliza un despliegue con Docker (explicado más abajo), no será necesario que realice la compilación manualmente. Sin embargo, a continuación se detalla el proceso de compilación manual.

Compilación de cliente #

npm run build:production 

Este comando ejecuta ng build con la configuración production, especificada en el archivo angular.json.

Es posible especificar configuraciones adicionales en angular.json y crear archivos en src/environments/, tal como src/environments/environment.mi_configuración.ts, ajustando los reemplazos de archivos (fileReplacements). En tal caso, puede crear una entrada en "scripts" en el package.json de la siguiente manera:

{
  "scripts": {
    "build:mi_configuración": "ng build --configuration=production,mi_configuración"
  }
}

Encontrará más información sobre ello en la referencia de Angular cli

Cuando se haya completado la compilación, encontrará el código compilado en el directorio dist.

Compilación de servidor #

npm run build

Este comando tsc para compilar código Typescript en JavaScript. Es posible que desee ajustar la configuración de tsconfig.json o tsconfig.prod.json según sus necesidades.

Cuando se haya completado la compilación, encontrará el código compilado en el directorio dist.

Ejecución en producción #

Para que el servidor Node.js con Express sea capaz de servir al cliente Angular, será necesario que copie (o cree un enlace) el contenido del directorio dist de la compilación cliente al directorio dist de la compilación servidor. Luego al arrancar el servidor con node dist/index.js deberá poder acceder a su aplicación en http://localhost:3000 (a diferencia de http://localhost:4200 que es la dirección que se utiliza durante el desarrollo).

Despliegue con Docker #

En esta sección le detallaremos el despliegue mediante Docker y Docker compose y sobre un servidor Linux, por todas las ventajas que ello conlleva.

Si utiliza Docker para desplegar en producción, no es necesario que realice ninguna compilación ni ejecución manual.

Puede seguir las instrucciones de instalación oficiales.

Si ha creado la aplicación con aoc-cli, tendrá disponibles también los archivos Dockerfile y docker-compose.yml ya preconfigurados.

• El archivo Dockerfile define la imagen que se creará, utiliza una imagen node-alpine como base para compilar tanto el cliente como el servidor
• El archivo docker-compose.yml define el/los contenedor/es a ejecutar

Es bastante probable que necesite adaptar algunas configuraciones para producción, para ello tiene varias opciones:

• Definir otro entorno en el archivo aoc-server-config.json (recuerde que este archivo suele formar parte de su repositorio git)
• Definir una sobrescritura en el archivo aoc-server-secrets.json (este archivo está en .gitignore)
• O por último, usar variables de entorno "AOC_"

En la mayoría de casos lo más conveniente suele ser usar variables de entorno "AOC_", aunque también puede combinarlo con las demás estrategias si lo necesita.

En el archivo docker-compose.yml, puede bien definir usar un entorno diferente definido en aoc-server-config.json (AOC_CONFIG_ENV=mi_entorno), o bien sobrescribir directamente propiedades del entorno (e.g.: AOC_postgres_host):

    environment:
      # - AOC_CONFIG_ENV= # The config key from aoc-server-config.json that will be used, "base" otherwise
      # And/or override specific config values
      # - AOC_postgres_host=postgresql
      # - AOC_postgres_port=5432
      # - AOC_postgres_password=my_password
      - NODE_ENV=production
      - TZ=Europe/Madrid # Adapt according to your needs

Puede (re)crear su imagen con los comandos docker build --no-cache, y docker-compose up para arrancar el contenedor.

Consulte la documentación de Docker para aprender más.

Proxy inverso #

El servidor Node.js expone el puerto 3000 para conexión HTTP, pero en producción lo recomendado es tener un proxy inverso que sea el que gestiona las conexiones HTTP y exponga el puerto 443 (HTTPS) al exterior, comunicándose con Node.js a través del puerto 3000.

La imagen de Docker Swag es una buena candidata para ello. Le permite configurar un contenedor para que obtenga un certificado SSL y lo configure automáticamente por usted.

Aquí le proporcionamos una configuración nginx similar a la que podría tener que usar:

server {
    listen 80;
    server_name mi-servidor.com;

    # Redirect HTTP to HTTPS
    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name mi-servidor.com;

    include /config/nginx/ssl.conf;

    location / {
        proxy_pass http://app-template:3000;
        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;

        # Optional: For better security
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Port $server_port;
    }
}

Extra #

Internacionalización #

Los parámetros de internacionalización se pueden configurar en el apartado i18n del archivo angular.json. Por defecto, se usa el idioma Inglés de Estados Unidos (en otras palabras, las cadenas de origen han sido escritas en inglés).

Si desea utilizar otros idiomas, tendrá que adaptar su configuración del proxy inverso, puede encontrar más información en la documentación oficial de angular.

Otros contenedores #

Puede ser que a su stack quiera agragarle contenedores para realizar otras tareas, como por ejemplo logging o pool de conexiones pgbouncer.