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 build
Se habrá llevado a cabo el setup inicial del proyecto.
Ng new options
npm i e ng build
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.
IMPORTANTE. Se queremos que os cambios do código fonte tomen efecto teremos que facer de novo ng build.
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.aclasedopeque.com
