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

De MediaWiki
Ir a la navegación Ir a la búsqueda
(Página creada con «= Prerrequisitos = Unha instalación de Nginx como [https://wiki.cifprodolfoucha.es/index.php?title=Instalaci%C3%B3n,_configuraci%C3%B3n_e_uso_de_nginx a feita nesta secci…»)
 
 
(No se muestran 12 ediciones intermedias del mismo usuario)
Línea 5: Línea 5:
 
  apt install curl
 
  apt install curl
 
  curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
 
  curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
−
Pode ser preciso isto (no meu caso non foi así):
+
 
 +
Podemos ver todas as versións de Node.js disponibles en Debian 11:
 
  apt policy nodejs
 
  apt policy nodejs
  
 +
E despois instalamos:
 
  apt install -y nodejs
 
  apt install -y nodejs
  
Línea 25: Línea 27:
 
  14.1.1
 
  14.1.1
  
−
= Correndo e visualizando o proxecto =
+
= Creando o proxecto =
 
  cd /var/www
 
  cd /var/www
 
  mkdir angular
 
  mkdir angular
Línea 32: 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 build
 +
 
 +
Se habrá llevado a cabo el setup inicial del proyecto.
 +
 
 +
<gallery>
 +
File:Ng_new_options.PNG| Ng new options
 +
File:Npm_i_ng_build.PNG | npm i e ng build
 +
</gallery>
 +
 
 +
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
 +
 
 +
[[File:ng_a_clase_do_peque_ok.PNG|400px]]
  
 
= Referencias =
 
= Referencias =
−
* https://openwebinars.net/academia/aprende/nginx-servidor-web-linux-debian/
+
* [https://openwebinars.net/academia/aprende/nginx-servidor-web-linux-debian/ Crea tu servidor web con Nginx sobre Linux]
 +
* [https://itslinuxfoss.com/how-to-install-node-js-on-debian-11/ How to install node.js on Debian 11]
 +
* [https://www.markuptag.com/how-to-install-angular-with-cli/ How To Install Angular With CLI (and how to start a new project)]
 +
* [https://phoenixnap.com/kb/update-node-js-version How to Update Node.js to Latest Version]

Revisión actual del 18:46 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

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

Ng a clase do peque ok.PNG

Referencias

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