¿Cómo se implementan las aplicaciones angulares?

194

¿Cómo se implementan las aplicaciones angulares una vez que alcanzan la fase de producción?

Todas las guías que he visto hasta ahora (incluso en angular.io ) cuentan con un servidor Lite para servir y browserSync para reflejar los cambios, pero cuando termine con el desarrollo, ¿cómo puede publicar la aplicación?

¿Importo todos los .jsarchivos compilados en la index.htmlpágina o los minimizo usando gulp? ¿Trabajarán ellos? ¿Necesito SystemJS en absoluto en la versión de producción?

Joseph Girgis
fuente

Respuestas:

91

En realidad, estás aquí tocando dos preguntas en una.

El primero es ¿Cómo alojar su aplicación? .
Y como @toskv mencionó, su pregunta realmente demasiado amplia para ser respondida y depende de muchas cosas diferentes.

El segundo es ¿Cómo prepara la versión de implementación de la aplicación? .
Tienes varias opciones aquí:

  1. Implementar como es. Solo eso: sin minificación, concatenación, cambio de nombres, etc. Transpile todos sus proyectos ts copie todas sus dependencias js / css / ... sources + resultantes en el servidor de hosting y estará listo para comenzar.
  2. Implemente utilizando herramientas de agrupación especiales, como webpacko systemjsgenerador.
    Vienen con todas las posibilidades que faltan en el # 1.
    Puede empaquetar todo el código de su aplicación en solo un par de archivos js / css / ... a los que hace referencia en su HTML. systemjsBuilder incluso le permite deshacerse de la necesidad de incluirlo systemjscomo parte de su paquete de implementación.

  3. Puede usar a ng deploypartir de Angular 8 para implementar su aplicación desde su CLI. ng deploydeberá usarse junto con su plataforma de elección (como @angular/fire). Puede consultar los documentos oficiales para ver qué funciona mejor para usted aquí

Sí, lo más probable es que necesite implementar systemjsy agrupar otras bibliotecas externas como parte de su paquete. Y sí, podrá agruparlos en solo un par de archivos js a los que hace referencia desde su página HTML.

Sin embargo, no tiene que hacer referencia a todos sus archivos js compilados de la página, systemjsya que un cargador de módulos se encargará de eso.

Sé que suena confuso: para ayudarlo a comenzar con el # 2, aquí hay dos aplicaciones de muestra realmente buenas:

Constructor de SystemJS: semilla angular2

WebPack : iniciador angular2 webpack

En medio de
fuente
1
También recomendaría JSPM ( jspm.io ): información aquí gist.github.com/robwormald/429e01c6d802767441ec y proyecto de semilla aquí github.com/madhukard/angular2-jspm-seed
Harry
Después de 6 meses cuando Angular2 está en rc5 y se lanzará pronto, esta respuesta sigue siendo relevante porque hace referencia al proyecto de semilla angular2. ¡Gran proyecto, muchos contribuyentes!
lame_coder
3
Todavía estoy enormemente confundido con el punto (1). ¿Qué significa desplegar 'TAL CUAL'? ¿Eso significa copiar todos los 50000 archivos node_module también? Estoy tratando de implementar el ejemplo HEROES y no estoy seguro de qué agregar como fuente de script en el archivo de índice.
Oliver Watkins el
1
Sí, significa copiar todas sus dependencias, incluidas las de node_modulestambién. Nota: debe copiar solo las dependencias necesarias para que se ejecute el programa. No copie deps que se usan solo para desarrollo (por ejemplo, gulp / grunt / etc).
En medio del
1
Si. En ese archivo system.js se indica qué son y dónde cargar desde todas sus dependencias.
En medio del
88

Respuesta simple Utilice la CLI angular y emita el

ng build 

comando en el directorio raíz de su proyecto. El sitio se creará en el directorio dist y puede implementarlo en cualquier servidor web.

Esto se construirá para la prueba, si tiene configuraciones de producción en su aplicación, debe usar

ng build --prod

Esto generará el proyecto en el distdirectorio y esto se puede enviar al servidor.

Mucho ha sucedido desde que publiqué esta respuesta. La CLI finalmente está en 1.0.0, así que siguiendo esta guía, actualice su proyecto antes de que intente compilar. https://github.com/angular/angular-cli/wiki/stories-rc-update

Nate Bunney
fuente
¿Cómo haces eso? Después del inicio rápido de Angular 2, ejecuto ese comando en lugar de 'npm start' y obtengo 'ng command not found'
Rahly
1
@NateBunney Soy nuevo en la escena de desarrollo web. Estoy confundido. ng build produce un montón de archivos en la carpeta dist. Supongamos que está utilizando Spring Boot como servidor web, ¿simplemente copia y pega esos archivos en la carpeta pública web-inf en Spring Boot? ¿O necesita un servidor nodejs delante del arranque de primavera para servir ng2 dist?
Srikanth el
3
¿Por qué no está esto en la documentación? Parece una gran omisión!
Kokodoko
Recuerde que la primera versión de Angular 2 tiene apenas un mes de antigüedad.
Nate Bunney el
1
@ user1460043, sí, pero hay una solución fácil para su problema. Simplemente haga rodar un nuevo proyecto CLI angular y copie su directorio src en el proyecto CLI.
Nate Bunney el
21

Con la CLI angular es fácil. Un ejemplo para Heroku:

  1. Cree una cuenta de Heroku e instale la CLI

  2. Mover el angular-clidep a la dependenciesde package.json(por lo que se instala cuando se presiona a Heroku.

  3. Agregue un postinstallscript que se ejecutará ng buildcuando el código se envíe a Heroku. Agregue también un comando de inicio para un servidor Node que se creará en el siguiente paso. Esto colocará los archivos estáticos para la aplicación en un distdirectorio en el servidor e iniciará la aplicación después.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}
  1. Cree un servidor Express para servir la aplicación.
// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);
  1. Cree un control remoto Heroku y presione para eliminar la aplicación.
heroku create
git add .
git commit -m "first deploy"
git push heroku master

Aquí hay un resumen rápido que hice que tiene más detalles, incluido cómo forzar solicitudes para usar HTTPS y cómo manejar PathLocationStrategy:)

cienki
fuente
agregar angular-cli en las dependencias aumenta el tamaño del dist cómo manejar esto
Janak Bhatta
7

Yo uso con siempre :

  1. Cree su aplicación angular con la carpeta angular-cli to distng build --prod --output-path ./dist
  2. Cree el archivo server.js en su ruta de aplicación angular:

    const express = require('express');
    const path = require('path');
    
    const app = express();
    
    app.use(express.static(__dirname + '/dist'));
    
    app.get('/*', function(req,res) {
        res.sendFile(path.join(__dirname + '/dist/index.html'));
    });
    app.listen(80);
  3. Empezar por siempre forever start server.js

¡Eso es todo! su aplicación debería estar ejecutándose!

Yakir Tsuberi
fuente
6

Espero que esto pueda ayudar, y espero poder intentarlo durante la semana.

  1. Crear aplicación web en Azure
  2. Cree la aplicación Angular 2 en código vs.
  3. Webpack para bundle.js.
  4. Descargue el perfil xml publicado del sitio de Azure
  5. Configure Azure-deploy usando https://www.npmjs.com/package/azure-deploy con el perfil del sitio.
  6. Desplegar.
  7. Prueba la crema.
usuario6402762
fuente
58
No haga Microsoft este tipo de cosas, ya que solo es compatible con Azure. Es como decir que si usa Angular, solo debería poder usar los servicios de Google Cloud.
ozanmuyes
2
Es útil saber que hay un módulo npm para implementar en Azure.
Anthony Brenelière
1
@ user6402762 +1 para probar la crema.
Leonardo Wildt
Estoy tratando de implementar mi aplicación web Angular 4 usando esta respuesta, pero sigo recibiendo errores como Can't resolve 'node-uuid' in path\azure-deploy\lib. ¿Sigue siendo posible? Configuré el paso 5 app.moduley no estoy seguro de haberlo hecho correctamente. ¿Podrías aclarar eso?
Wouter Vanherck
6

Si prueba la aplicación como yo en localhost o tendrá algunos problemas con la página en blanco, uso esto:

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

Explicación:

ng build

Crear una aplicación pero en el código hay muchos espacios, pestañas y otras cosas que hacen que el código pueda ser leído por humanos Para el servidor no es importante cómo se ve el código. Por eso uso:

ng build --prod --build-optimizer 

Esto hace que el código para producción y reduzca el tamaño [ --build-optimizer] permita reducir más código].

Así que al final agrego --base-href="http://127.0.0.1/my-app/"para mostrar la aplicación donde está 'marco principal' [en palabras simples]. Con él, puedes tener incluso múltiples aplicaciones angulares en cualquier carpeta.

WatchTanis
fuente
5

Para implementar su aplicación Angular2 en un servidor de producción, en primer lugar, asegúrese de que su aplicación se ejecute localmente en su máquina.

La aplicación Angular2 también se puede implementar como una aplicación de nodo.

Entonces, cree un archivo de punto de entrada de nodo server.js / app.js (mi ejemplo usa express)

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

Agregue también express como dependencia en su archivo package.json.

Luego impleméntelo en su entorno preferido.

He creado un pequeño blog para su implementación en IIS. seguir enlace

Oduwole Oluwasegun
fuente
5

Para implementar su aplicación en IIS, siga los pasos a continuación.

Paso 1: compila tu aplicación angular usando el comando ng build --prod

Paso 2: Después de compilar, todos los archivos se almacenan en la carpeta dist de la ruta de la aplicación.

Paso 3: Cree una carpeta en C: \ inetpub \ wwwroot por nombre QRCode .

Paso 4: copie el contenido de la carpeta dist en la carpeta C: \ inetpub \ wwwroot \ QRCode .

Paso 5: Abra el Administrador de IIS con el comando (Window + R) y escriba inetmgr, haga clic en Aceptar.

Paso 6: haga clic derecho en Sitio web predeterminado y haga clic en Agregar aplicación .

Paso 7: Ingrese el nombre de alias 'QRCode' y configure la ruta física a C: \ inetpub \ wwwroot \ QRCode .

Paso 8: Abra el archivo index.html y busque la línea href = "\" y elimine '\'.

Paso 9: ahora busque la aplicación en cualquier navegador.

También puede seguir el video para una mejor comprensión.

URL del video: https://youtu.be/F8EI-8XUNZc

Avadhesh Maurya
fuente
4

Si implementa su aplicación en Apache (servidor Linux) para que pueda seguir los siguientes pasos: Siga los siguientes pasos :

Paso 1 : ng build --prod --env=prod

Paso 2 . (Copie dist en el servidor), luego cree la carpeta dist, copie la carpeta dist e impleméntela en el directorio raíz del servidor.

Paso 3 . Crea el .htaccessarchivo en la carpeta raíz y lo pega en el.htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
Sumit Jaiswal
fuente
que tipo de servidor debería ser un servidor nginx o lo que contenga el dist
famas23
Podría ser Tomcat, tu elección. Yo diría que usa lo que estás familiarizado.
Wallace Howery
Cualquier Apache Linux u otro servidor, donde se utilizan las reglas .htaccess.
Sumit Jaiswal
@TamaghnaBanerjee, ¿comprobar que el modo de reescritura del servidor está habilitado o no?
Sumit Jaiswal
3

Obtiene el paquete de producción de carga más pequeño y rápido compilando con el compilador Ahead of Time, y agita / minimiza los árboles con un rollup como se muestra en el libro de cocina angular AOT aquí: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

Esto también está disponible con Angular-CLI como se dijo en las respuestas anteriores, pero si no ha creado su aplicación utilizando la CLI, debe seguir el libro de cocina.

También tengo un ejemplo de trabajo con materiales y gráficos SVG (respaldado por Angular2) que incluye un paquete creado con el libro de cocina AOT. También encontrará todas las configuraciones y scripts necesarios para crear el paquete. Compruébalo aquí: https://github.com/fintechneo/angular2-templates/

Hice un video rápido que demuestra la diferencia entre el número de archivos y el tamaño de una compilación compilada de AoT frente a un entorno de desarrollo. Muestra el proyecto desde el repositorio de github arriba. Puedes verlo aquí: https://youtu.be/ZoZDCgQwnmQ

Peter Salomonsen
fuente
Gracias por una referencia a los documentos y por mencionar la compilación de AOT. El valor suena real,"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
aero
1
Gracias por los comentarios: si no ha encontrado el tiempo para probar la compilación de AoT usted mismo, he agregado un video que muestra la diferencia en la cantidad de archivos y tamaño (usando el proyecto github al que se hace referencia en la respuesta).
Peter Salomonsen
¡Increíble! ¡Gracias por ser tan servicial Peter!
Aero
2

Despliegue angular 2 en páginas de Github

Prueba de implementación de Angular2 Webpack en ghpages

Primero obtenga todos los archivos relevantes de la distcarpeta de su aplicación, para mí fueron: + archivos css en la carpeta de activos + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Luego inserte estos archivos en el repositorio que ha creado.

1 - Si desea que la aplicación se ejecute en el directorio raíz, cree un repositorio especial con el nombre [yourgithubusername] .github.io e inserte estos archivos en la rama maestra

2 - Donde, como si quisiera crear estas páginas en el subdirectorio o en una rama diferente a la raíz, cree una rama gh-pages e inserte estos archivos en esa rama.

En ambos casos, la forma en que accedemos a estas páginas desplegadas será diferente.

Para el primer caso será https: // [yourgithubusername] .github.io y para el segundo caso será [yourgithubusername] .github.io / [Repo name] .

Si supone que desea implementarlo utilizando el segundo caso, asegúrese de cambiar la url base del archivo index.html en el dist, ya que todas las asignaciones de ruta dependen de la ruta que proporcione y debe establecerse en [/ branchname].

Enlace a esta página

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

Rahul Singh
fuente
1

Para una forma rápida y económica de alojar una aplicación angular, he estado usando el alojamiento Firbase. Es gratis en el primer nivel y es muy fácil implementar nuevas versiones con Firebase CLI. Este artículo aquí explica los pasos necesarios para implementar su aplicación angular de producción 2 en Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

En resumen, ejecuta lo ng build --prodque crea una carpeta dist en el paquete y esa es la carpeta que se implementa en Firebase Hosting.

npesa92
fuente
Gracias, esta fue la forma más sencilla que pude encontrar.
Brian Burns
1

Implementar Angular 2 en azul es fácil

  1. Ejecute ng build --prod , que generará una carpeta dist con todo incluido dentro de unos pocos archivos, incluido index.html.

  2. Cree un grupo de recursos y una aplicación web dentro de él.

  3. Coloque sus archivos de carpetas dist utilizando FTP. En azul buscará index.html para ejecutar la aplicación.

Eso es. Tu aplicación se está ejecutando!

Malatesh Patil
fuente
¿Solo si comienzas tu proyecto con angular-cli no?
Portekoi
Así no. Si no ha comenzado su proyecto angular2 usando angular-cli, puede construir el proyecto para la producción. Solo necesita tener angular-cli instalado en su máquina en el momento de la compilación. Use npm install -g @ angular / cli para instalar angular-cli globalmente.
Malatesh Patil
1

A partir de 2017, la mejor manera es usar angular-cli (v1.4.4) para su proyecto angular.

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

No necesita agregar --aot explícitamente, ya que está activado de forma predeterminada con --prod. Y el uso de --output-hashing es según su preferencia personal con respecto a la explosión de caché.

Puede agregar explícitamente soporte CDN agregando:

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

si planea usar CDN para hosting, lo cual es considerablemente rápido.

Kay
fuente
1

Con la CLI angular , puede usar el siguiente comando:

ng build --prod

Genera una carpeta dist con todo lo que necesita para implementar la aplicación.

Si no tiene práctica con servidores web, le recomiendo que use Angular to Cloud . Solo necesita comprimir la carpeta dist como archivo zip y subirla a la plataforma.

Bruno Oliveira
fuente
1

Diría que muchas personas con experiencia en la web antes de angular, están acostumbrados a desplegar sus artefactos web dentro de una guerra (es decir, jquery y html dentro de un proyecto Java / Spring). Terminé haciendo esto para solucionar el problema de CORS, después de intentar mantener mis proyectos angulares y REST separados.

Mi solución fue mover todos los contenidos angulares (4), generados con CLI, desde my-app a MyJavaApplication / angular. Luego modifiqué mi compilación Maven para usar maven-resources-plugin para mover el contenido de / angular / dist a la raíz de mi distribución (es decir, $ project.build.directory} / MyJavaApplication). Angular carga recursos desde la raíz de la guerra por defecto.

Cuando comencé a agregar enrutamiento a mi proyecto angular, modifiqué aún más la compilación maven para copiar index.html de / dist a WEB-INF / app. Y agregó un controlador Java que redirige todas las llamadas de descanso del lado del servidor al índice.

Wallace Howery
fuente