Cómo instalar Angular en Ubuntu 22.04

julio 31, 2023

Angular.js es un framework JavaScript gratuito y de código abierto que se utiliza para crear aplicaciones dinámicas. Te permite utilizar HTML como lenguaje de plantilla para ampliar la sintaxis de HTML y expresar los componentes de tu aplicación de forma clara y sucinta. Ofrece un conjunto de herramientas para desarrollar, actualizar y probar el código. Tiene muchas funciones, como gestión de formularios, enrutamiento, etc.

Este tutorial te mostrará cómo instalar Angular.js con Nginx como proxy inverso en Ubuntu 22.04.

Requisitos previos

Un servidor que ejecute Ubuntu 22.04.
Una contraseña de root configurada en el servidor.

Cómo empezar

Antes de empezar, es una buena idea actualizar todos los paquetes del sistema a la última versión. Puedes actualizarlos todos ejecutando el siguiente comando:

apt update -y
apt upgrade -y

Una vez actualizados todos los paquetes, puedes instalar otras dependencias necesarias con el siguiente comando:

apt install curl gnupg2 gnupg git wget -y

Una vez que hayas terminado, puedes pasar al siguiente paso.

Instalar Node.js

También necesitarás instalar la última versión estable de Node.js de tu servidor. Primero, añade el repositorio de Node.js utilizando el siguiente comando:

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -

Deberías obtener la siguiente salida:

## Run `sudo apt-get install -y nodejs` to install Node.js 16.x and npm
## You may also need development tools to build native addons:
     sudo apt-get install gcc g++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null
     echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     sudo apt-get update && sudo apt-get install yarn

A continuación, instala el paquete Node.js con el siguiente comando:

apt install nodejs

Una vez instalado Node.js, puedes verificar la versión de Node utilizando el siguiente comando:

node --version

Obtendrás la siguiente salida:

v16.17.0

Instalar Angular CLI

A continuación, tendrás que instalar Angular CLI en tu servidor. Angular CLI es una herramienta de línea de comandos que te permite crear y gestionar una aplicación Angular a través de una interfaz de línea de comandos.

En primer lugar, actualiza el paquete NPM a la última versión con el siguiente comando:

npm install npm@latest -g

A continuación, instala Angular CLI con el siguiente comando:

npm install -g @angular/cli

Una vez instalada la CLI de Angular, puedes verificar la versión de Angular con el siguiente comando:

ng version

Deberías obtener la siguiente salida:

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 14.2.3
Node: 16.17.0
Package Manager: npm 8.19.2 
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1402.3 (cli-only)
@angular-devkit/core         14.2.3 (cli-only)
@angular-devkit/schematics   14.2.3 (cli-only)
@schematics/angular          14.2.3 (cli-only)

Crear una aplicación Angular de ejemplo

En esta sección, crearemos una aplicación Angular de ejemplo.

Ejecuta el siguiente comando para crear una nueva aplicación llamada myapp:

ng new myapp

Obtendrás la siguiente salida:

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE myapp/src/styles.css (80 bytes)
CREATE myapp/src/test.ts (749 bytes)
CREATE myapp/src/assets/.gitkeep (0 bytes)
CREATE myapp/src/environments/environment.prod.ts (51 bytes)
CREATE myapp/src/environments/environment.ts (658 bytes)
CREATE myapp/src/app/app-routing.module.ts (245 bytes)
CREATE myapp/src/app/app.module.ts (393 bytes)
CREATE myapp/src/app/app.component.css (0 bytes)
CREATE myapp/src/app/app.component.html (23115 bytes)
CREATE myapp/src/app/app.component.spec.ts (1070 bytes)
CREATE myapp/src/app/app.component.ts (209 bytes)
? Packages installed successfully.

A continuación, cambia el directorio al directorio myapp y ejecuta la aplicación con el siguiente comando:

cd myapp
ng serve --host 0.0.0.0 --port 8000

Si todo va bien, obtendrás la siguiente salida:

? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes

? Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.10 MB | 
polyfills.js          | polyfills     | 318.00 kB | 
styles.css, styles.js | styles        | 210.08 kB | 
main.js               | main          |  49.83 kB | 
runtime.js            | runtime       |   6.51 kB | 

                      | Initial Total |   2.67 MB

Build at: 2022-09-18T07:17:07.899Z - Hash: d94baf4d66e9fad0 - Time: 26751ms

** Angular Live Development Server is listening on 0.0.0.0:8000, open your browser on http://localhost:8000/ **


? Compiled successfully.

Pulsa CTRL + C para detener la aplicación. Vamos a crear un archivo de servicio systemd para la aplicación Angular.

Crear un archivo de servicio systemd para Angular

Puedes crear un archivo de servicio systemd para gestionar la aplicación Angular.

nano /lib/systemd/system/myapp.service

Añade las siguientes líneas:

[Unit]
Description=MyWeb Application
After=network-online.target

[Service]
Restart=on-failure
WorkingDirectory=/root/myapp
ExecStart=/usr/bin/ng serve --port 8000
CPUAccounting=true
CPUQuota=50%
MemoryAccounting=true
MemoryLimit=1024M

[Install]
WantedBy=multi-user.target

Guarda y cierra el archivo y vuelve a cargar el demonio systemd para aplicar los cambios:

systemctl daemon-reload

A continuación, inicia y habilita el servicio Angular con el siguiente comando:

systemctl start myapp
systemctl enable myapp

Ahora puedes comprobar el estado del servicio Angular con el siguiente comando:

systemctl status myapp

Obtendrás la siguiente salida:

? myapp.service - MyWeb Application
     Loaded: loaded (/lib/systemd/system/myapp.service; disabled; vendor preset: enabled)
     Active: active (running) since Sun 2022-09-18 07:28:42 UTC; 28s ago
   Main PID: 56301 (ng serve --port)
      Tasks: 11 (limit: 4579)
     Memory: 380.1M (limit: 1.0G)
        CPU: 14.152s
     CGroup: /system.slice/myapp.service
             ??56301 "ng serve --port 8000" "" "" "" "" "" "" "" "" "" "" "" "" "" ""

Sep 18 07:28:42 ubuntu2204 systemd[1]: Started MyWeb Application.
Sep 18 07:28:49 ubuntu2204 ng[56301]: - Generating browser application bundles (phase: setup)...

Ahora puedes gestionar fácilmente tu aplicación Angular mediante systemd. Una vez que hayas terminado, puedes continuar con el siguiente paso.

Configurar Nginx como proxy inverso para Angular

En este punto, la aplicación Angular está iniciada y escucha en el puerto 8000. Sin embargo, es una buena idea configurar Nginx como proxy inverso para acceder a la aplicación Angular a través del puerto 80.

En primer lugar, instala el paquete del servidor web Nginx utilizando el siguiente comando:

apt install nginx -y

Una vez instalado Nginx, crea un archivo de configuración de Nginx:

nano /etc/nginx/conf.d/app.conf

Añade las siguientes líneas:

server {  
       listen 80;
       server_name app.example.com;
       location / {  
                  proxy_pass http://localhost:8000;  
                  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;  
               }  
}

Guarda y cierra el archivo cuando hayas terminado, luego verifica que el Nginx no tenga ningún error de sintaxis con el siguiente comando:

nginx -t

Obtendrás la siguiente salida:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

A continuación, reinicia el servicio Nginx para aplicar los cambios:

restart nginx

También puedes comprobar el estado del Nginx con el siguiente comando:

systemctl status nginx

Deberías obtener la siguiente salida:

? nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Sun 2022-09-18 07:24:51 UTC; 6s ago
       Docs: man:nginx(8)
    Process: 55161 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 55162 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
   Main PID: 55163 (nginx)
      Tasks: 3 (limit: 4579)
     Memory: 3.3M
        CPU: 28ms
     CGroup: /system.slice/nginx.service
             ??55163 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
             ??55164 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
             ??55165 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""

Sep 18 07:24:51 ubuntu2204 systemd[1]: Starting A high performance web server and a reverse proxy server...
Sep 18 07:24:51 ubuntu2204 systemd[1]: Started A high performance web server and a reverse proxy server.

Acceder a Angular Web UI

En este punto, Nginx está configurado como proxy inverso para la aplicación Angular. Ahora puedes acceder a ella utilizando la URL http://app.example.com. Deberías ver tu aplicación Angular en la siguiente pantalla:

Conclusión

¡Enhorabuena! Has instalado correctamente Angular con Nginx como proxy inverso en Ubuntu 22.04. Ahora puedes desarrollar y desplegar una aplicación dinámica en la web utilizando el framework Angular.js. No dudes en preguntarme si tienes alguna duda.

Cómo instalar Angular en Ubuntu 22.04

Requisitos previos

Cómo empezar

Instalar Node.js

Instalar Angular CLI

Crear una aplicación Angular de ejemplo

Crear un archivo de servicio systemd para Angular

Configurar Nginx como proxy inverso para Angular

Acceder a Angular Web UI

Conclusión

También te podría gustar...

Entradas recientes

Cómo instalar Angular en Ubuntu 22.04

Requisitos previos

Cómo empezar

Instalar Node.js

Instalar Angular CLI

Crear una aplicación Angular de ejemplo

Crear un archivo de servicio systemd para Angular

Configurar Nginx como proxy inverso para Angular

Acceder a Angular Web UI

Conclusión

También te podría gustar...

Cómo configurar un resolvedor de DNS local con Unbound en Debian

Cómo instalar CSF (Config Server Firewall) en Debian 12

Cómo instalar y utilizar Podman en CentOS 8

Entradas recientes