deployment - navigationend - Aplicación Publishing Angular 2(implementación)

title angular 6

Question

Finalmente terminé la parte difícil de mi aplicación angular 2, y quiero verla en vivo en el servidor.

Tengo alojamiento web Linux. Estoy alojando sitios web PHP y SQL y me pregunto cómo puedo alojar la aplicación angular 2, ya que la estoy ejecutando usando npm start .

Alguien me habló de Amazon EC2, pero no estoy seguro de cómo funciona, ya que es la primera vez que ofrezco esta aplicación.

Leí esto: sobre la publicación de la aplicación Angular 2 y noté que necesito compilar mi aplicación con JSPM (?) Y usarla de alguna manera. Así que traté de usarlo. creó la carpeta jspm_packages en la raíz de mi aplicación, pero no tengo idea de lo que significaba ni cómo usarla.

• ¿Alguna ayuda sobre cómo publicar mi aplicación en un alojamiento web o en Amazon EC2 / De otra forma puedo permitir que otras personas vean y usen mi aplicación? Mi aplicación es Angular2 y Laravel como back-end.

Answer 1

De hecho, hay dos pasos aquí:

• Empaquete su aplicación con Gulp u otras herramientas como Webpack / JSPM. Ver esta pregunta en el caso de Gulp:
  • ¿Cómo implemento una aplicación Angular 2 + Typescript + systemjs?
• Suba los archivos correspondientes dentro de un servidor web estático.

Para el segundo paso, el servidor puede alojarse en EC2, por ejemplo. Pero puedes notar que incluso puedes alojarlo en Github con gh-páginas. Creo que este enlace podría ayudarlo: https://gist.github.com/chrisjacob/833223 . De hecho, depende de tu necesidad ...

Answer 2

Si te refieres al Elastic Beanstalk nodejs ec2, entonces esta respuesta es la mejor para ti, ya que me tomó un tiempo darme cuenta de esto, pero resultó ser más fácil de lo que pensaba:

1. Siguiendo este enlace con algunas modificaciones que hice para evitar /usr/bin/env: node: No such file or directory , agregué el siguiente script

.ebextensions/angular2deployment.config

files:
"/opt/elasticbeanstalk/env.vars" :
mode: "000775"
owner: root
group: users
content: |
export NPM_CONFIG_LOGLEVEL=error
export NODE_PATH=`ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin
"/opt/elasticbeanstalk/hooks/appdeploy/pre/50npm.sh" :
mode: "000775"
owner: root
group: users
content: |
#!/bin/bash
. /opt/elasticbeanstalk/env.vars
function error_exit
{
eventHelper.py --msg "$1" --severity ERROR
exit $2
}
#install not-installed yet app node_modules
if [ ! -d "/var/node_modules" ]; then
mkdir /var/node_modules ;
fi
if [ -d /tmp/deployment/application ]; then
ln -s /var/node_modules /tmp/deployment/application/
fi
OUT=$([ -d "/tmp/deployment/application" ] && cd /tmp/deployment/application && $NODE_PATH/node $NODE_PATH/npm install 2>&1) || error_exit "Failed to run npm install. $OUT" $?
echo $OUT
"/opt/elasticbeanstalk/hooks/configdeploy/pre/50npm.sh" :
mode: "000666"
owner: root
group: users
content: |
#no need to run npm install during configdeploy

2. Eliminar node_modules & dist folder si lo tiene, ambos no son necesarios.
3. Ejecute npm install && npm start (este paso debe ser exitoso), tenga en cuenta que estoy usando el paquete predeterminado de angular2. Json Consulte Despliegue angular.IO
4. Si # 3 es exitoso, entonces puede volver a eliminar node_modules nuevamente
5. Seleccione Todos los archivos y carpetas en el proyecto (asegúrese de que .ebextensions se seleccione .ebextensions ), y luego .ebextensions , no comprima la carpeta superior (tendrá un subdirectorio durante la implementación que interrumpirá la implementación)
6. ¡Ahora puede desplegar ese archivo comprimido y disfrutarlo!

Si está usando MacOS, mientras comprime, macos agregará una carpeta macos que romperá la implementación, asegúrese de usar una herramienta que no agregue este directorio adicional, en mi caso utilicé YemuZip

Nota adicional: EC2 beanstalk elástico ejecutará npm install y npm start , es por eso que recomendaría ejecutarlos y asegurarme de que estén bien en su entorno local.