Diferencia entre revisiones de «Configurando un proyecto Javascript con Angular en nginx»

De MediaWiki
Ir a la navegación Ir a la búsqueda
Línea 34: Línea 34:
 
  ng help
 
  ng help
 
  ng new
 
  ng new
−
  aclasedopeque
+
   
 +
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
  
 
= Referencias =
 
= Referencias =

Revisión del 18:37 7 ago 2022

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

Correndo e visualizando 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

Referencias

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=Configurando_un_proyecto_Javascript_con_Angular_en_nginx&oldid=18270»