Configurando un proyecto Javascript con Angular en nginx
Sumario
Prerrequisitos
Unha instalación de Nginx como a feita nesta sección.
Instalación de Nodejs e Angular
apt install curl curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
Podemos ver todas as versións de Node.js disponibles en Debian 11:
apt policy nodejs
E despois instalamos:
apt install -y nodejs
Comprbamos versión de node instalada:
node -v v18.7.0
Comprobamos versión de npm instalada:
npm -v 8.15.0
Instalamos Angular:
npm install -g @angular/cli
Comprobamos versión de angular instalada:
ng version 14.1.1
Creando o proxecto
cd /var/www mkdir angular cd angular
ng help ng new No nome do proxecto inicia: aclasedopeque Queremos usar angular routing? Yes (sistema que ten angular internamente para xestionar a memoria para a aplicación) Qué formato de follas de estilo? Sass (linguaxe de programación para programar CSS)
O rematar pode dar un warning de que non hai instalado git. Pódese instalar:
apt install git
Accedemos a carpeta do proxecto e verificamos que a instalación foi correcta:
cd aclasedopeque npm i
Compilamos o proxecto.
ng builg
Se habrá llevado a cabo el setup inicial del proyecto. Accedemos al mismo:
cd dist/aclasedopeque ls
En src tendremos el código
cd .. cd .. cd src/app
Modificaremos un fichero fuente:
nano app.component.ts
Por ejemplo podemos editar el título.
Configuración de server block nginx
Nuestra aplicación es compilada, por eso no haremos un proxy como hicimos con spring boot.
cd /etc/nginx/sites-available/
server {
listen 80;
root /var/www/angular/aclasedopeque/dist/aclasedopeque;
index index.html index.htm;
server_name ng.aclasedopeque.com;
access_log /var/log/nginx/angular_access.log;
error_log /var/log/nginx/angular_error.log;
location / {
try_files $uri $uri/ /index.html?$args;
}
}
Creamos o enlace simbólico:
ln -s /etc/nginx/sites-available/ng.aclasedopeque.com /etc/nginx/sites-enabled/ng.aclasedopeque.com
Reiniciamos o Nginx para que tomen efecto os cambios:
systemctl restart nginx
Correndo o proxecto
Accedemos a ng.aclasedo.peque.com
