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.