Como você implanta aplicativos Angular?

Como você implanta aplicativos Angular quando eles atingem a fase de produção?

Todos os guias que eu vi até agora (inclusive no angular.io ) contam com um servidor lite para servir e o browserSync para refletir as mudanças - mas quando você termina o desenvolvimento, como pode publicar o aplicativo?

Importo todos os .jsarquivos compilados na index.htmlpágina ou minifico-os usando gulp? Eles vão trabalhar? Preciso do SystemJS na versão de produção?

Na verdade, você está aqui tocando duas perguntas em uma.

O primeiro é como hospedar seu aplicativo? .
E como a @toskv mencionou, sua pergunta realmente ampla demais para ser respondida e depende de várias coisas diferentes.

O segundo é: Como você prepara a versão de implantação do aplicativo? .
Você tem várias opções aqui:

1. Implante como está. Apenas isso - sem minificação, concatenação, mudança de nome, etc. Transpile todo o seu projeto ts, copie todas as suas fontes js / css / ... resultantes + dependências para o servidor de hospedagem e você estará pronto.

2. Implemente usando ferramentas especiais de empacotamento, como webpackou systemjsconstrutor.
   Eles vêm com todas as possibilidades que estão faltando no # 1.
   Você pode compactar todo o código do aplicativo em apenas alguns arquivos js / css / ... que você faz referência em seu HTML. systemjsO construtor ainda permite que você se livre da necessidade de incluir systemjscomo parte do seu pacote de implantação.

3. Você pode usar a ng deploypartir do Angular 8 para implantar seu aplicativo a partir da sua CLI. ng deployprecisará ser usado em conjunto com sua plataforma de escolha (como @angular/fire). Você pode conferir os documentos oficiais para ver o que funciona melhor para você aqui

Sim, você provavelmente precisará implantar systemjse agrupar outras bibliotecas externas como parte do seu pacote. E sim, você poderá agrupá-los em apenas alguns arquivos js mencionados na sua página HTML.

Você não precisa fazer referência a todos os seus arquivos js compilados da página - systemjspois um carregador de módulos cuidará disso.

Sei que parece confuso - para ajudar você a começar o # 2, aqui estão dois aplicativos de amostra realmente bons:

Construtor SystemJS: semente angular2

WebPack: iniciador do angular2 webpack

Resposta simples. Use a CLI angular e emita o

ng build 

comando no diretório raiz do seu projeto. O site será criado no diretório dist e você poderá implantá-lo em qualquer servidor da web.

Isso criará para teste, se você tiver configurações de produção em seu aplicativo, deverá usar

ng build --prod

Isso criará o projeto no distdiretório e isso pode ser enviado ao servidor.

Muito aconteceu desde que publiquei esta resposta. A CLI está finalmente na 1.0.0, portanto, seguindo este guia, atualize seu projeto antes que você tente compilar. https://github.com/angular/angular-cli/wiki/stories-rc-update

Com a CLI Angular é fácil. Um exemplo para o Heroku:

1. Crie uma conta Heroku e instale a CLI

2. Mova o angular-clidep para o dependenciesin package.json(para que ele seja instalado quando você pressionar o Heroku.

3. Adicione um postinstallscript que será executado ng buildquando o código for enviado ao Heroku. Adicione também um comando start para um servidor Node que será criado na etapa a seguir. Isso colocará os arquivos estáticos para o aplicativo em um distdiretório no servidor e iniciará o aplicativo posteriormente.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

4. Crie um servidor Express para servir o aplicativo.

// 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);

5. Crie um controle remoto Heroku e empurre para exibir o aplicativo.

heroku create
git add .
git commit -m "first deploy"
git push heroku master

Aqui está uma rápida descrição que fiz com mais detalhes, incluindo como forçar solicitações para usar HTTPS e como lidar com PathLocationStrategy:)

Eu uso com para sempre :

1. Crie seu aplicativo Angular com a pasta angular-cli to distng build --prod --output-path ./dist

2. Crie o arquivo server.js no caminho do aplicativo 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. Comece para sempre forever start server.js

Isso é tudo! seu aplicativo deve estar em execução!

Espero que isso ajude, e espero tentar durante a semana.

1. Criar aplicativo Web no Azure
2. Crie o aplicativo Angular 2 no código vs.
3. Webpack para bundle.js.
4. Transferir o perfil publicado do site do Azure xml
5. Configure a implantação do Azure usando https://www.npmjs.com/package/azure-deploy com o perfil do site.
6. Implantar.
7. Prove o creme.

Se você testar um aplicativo como eu no localhost ou tiver alguns problemas com a página em branco, eu uso este:

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

Explicação:

ng build

Compile o aplicativo, mas no código há muitos espaços, guias e outras coisas que tornam o código capaz de ser lido por humanos. Para servidor, não é importante a aparência do código. É por isso que eu uso:

ng build --prod --build-optimizer 

Isso torna o código para produção e reduz o tamanho [ --build-optimizer] permite reduzir mais código].

Então, no final, adiciono --base-href="http://127.0.0.1/my-app/"para mostrar ao aplicativo onde está o 'quadro principal' [em palavras simples]. Com ele Você pode ter até vários aplicativos angulares em qualquer pasta.

Para implantar o aplicativo Angular2 em um servidor de produção, primeiro e acima de tudo, verifique se o aplicativo é executado localmente na sua máquina.

O aplicativo Angular2 também pode ser implantado como um aplicativo de nó.

Portanto, crie um arquivo de ponto de entrada do nó server.js / app.js (meu exemplo 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'));
});

Inclua também express como uma dependência no seu arquivo package.json.

Em seguida, implante-o no seu ambiente preferido.

Eu montei um pequeno blog para implantação no IIS. siga o link

Para implantar seu aplicativo no IIS, siga as etapas abaixo.

Etapa 1: Construa seu aplicativo Angular usando o comando ng build --prod

Etapa 2: Após a compilação, todos os arquivos são armazenados na pasta dist do caminho do seu aplicativo.

Etapa 3: Crie uma pasta em C: \ inetpub \ wwwroot pelo nome QRCode .

Etapa 4: Copie o conteúdo da pasta dist para a pasta C: \ inetpub \ wwwroot \ QRCode .

Etapa 5: Abra o Gerenciador do IIS usando o comando (Window + R) e digite inetmgr clique em OK.

Etapa 6: Clique com o botão direito do mouse em Site Padrão e clique em Adicionar Aplicativo .

Etapa 7: Digite o nome alternativo 'QRCode' e defina o caminho físico como C: \ inetpub \ wwwroot \ QRCode .

Etapa 8: abra o arquivo index.html e localize a linha href = "\" e remova '\'.

Etapa 9: agora navegue no aplicativo em qualquer navegador.

Você também pode acompanhar o vídeo para entender melhor.

URL do vídeo: https://youtu.be/F8EI-8XUNZc

Se você implantar seu aplicativo no Apache (servidor Linux), poderá seguir as seguintes etapas: Siga as seguintes etapas :

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

Etapa 2 . (Copie dist para o servidor) e depois a pasta dist criada, copie a pasta dist e implante-a no diretório raiz do servidor.

Passo 3 . Cria um .htaccessarquivo na pasta raiz e cole-o no diretório.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>

Você obtém o menor e mais rápido pacote de produção de carregamento compilando com o compilador Ahead of Time e agita / modifica com o rollup, conforme mostrado no livro de receitas angular do AOT aqui: https://angular.io/docs/ts/latest/cookbook /aot-compiler.html

Isso também está disponível com a CLI angular, como foi dito nas respostas anteriores, mas se você não criou seu aplicativo usando a CLI, deve seguir o livro de receitas.

Também tenho um exemplo de trabalho com materiais e gráficos SVG (apoiados pelo Angular2) que inclui um pacote criado com o livro de receitas AOT. Você também encontra todas as configurações e scripts necessários para criar o pacote. Confira aqui: https://github.com/fintechneo/angular2-templates/

Fiz um vídeo rápido demonstrando a diferença entre o número de arquivos e o tamanho de uma compilação AoT compilada versus um ambiente de desenvolvimento. Ele mostra o projeto no repositório do github acima. Você pode vê-lo aqui: https://youtu.be/ZoZDCgQwnmQ

Implantação Angular 2 em páginas do Github

Testando a implantação do Angular2 Webpack em ghpages

Primeiro, obtenha todos os arquivos relevantes da distpasta do seu aplicativo, para mim foram os: + arquivos css na pasta de ativos + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

Em seguida, empurre esses arquivos no repositório que você criou.

1 - Se você deseja que o aplicativo seja executado no diretório raiz - crie um repositório especial com o nome [yourgithubusername] .github.io e envie esses arquivos na ramificação principal

2 - Onde, como se você quiser criar essas páginas no subdiretório ou em uma ramificação diferente da raiz, crie uma ramificação gh-pages e empurre esses arquivos nessa ramificação.

Nos dois casos, a maneira como acessamos essas páginas implantadas será diferente.

No primeiro caso, será https: // [yourgithubusername] .github.io e, no segundo caso, será [yourgithubusername] .github.io / [Repo name] .

Se suponha que você deseja implantá-lo usando o segundo caso, certifique-se de alterar o URL base do arquivo index.html no dist, pois todos os mapeamentos de rotas dependem do caminho fornecido e ele deve ser definido como [/ branchname].

Link para esta página

https://rahulrsingh09.github.io/Deployment

Git Repo

https://github.com/rahulrsingh09/Deployment

Para uma maneira rápida e barata de hospedar um aplicativo angular, uso a hospedagem do Firbase. É gratuito na primeira camada e muito fácil de implantar novas versões usando a Firebase CLI. Este artigo aqui explica as etapas necessárias para implantar seu aplicativo angular 2 de produção no Firebase: https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

Em resumo, você executa o ng build --prodque cria uma pasta dist no pacote e é a pasta que é implantada no Firebase Hosting.

É fácil implantar o Angular 2 no azure

1. Corre build --prod , que irá gerar uma pasta dist com tudo incluído em poucos arquivos, incluindo index.html.

2. Crie um grupo de recursos e um aplicativo Web dentro dele.

3. Coloque seus arquivos de pastas dist usando FTP. No azure, ele procurará index.html para executar o aplicativo.

É isso aí. Seu aplicativo está sendo executado!

A partir de 2017, a melhor maneira é usar o angular-cli (v1.4.4) para seu projeto angular.

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

Você não precisa adicionar --aot explicitamente, pois está ativado por padrão com --prod.

Você pode adicionar explicitamente o suporte à CDN adicionando:

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

se você planeja usar o CDN para hospedagem, o que é consideravelmente rápido.

Com a Angular CLI , você pode usar o seguinte comando:

ng build --prod

Ele gera uma pasta dist com tudo que você precisa para implantar o aplicativo.

Se você não pratica com servidores da Web, recomendo usar o Angular to Cloud . Você só precisa compactar a pasta dist como arquivo zip e enviá-la na plataforma.

Eu diria que muitas pessoas com experiência na Web antes do angular estão acostumadas a implantar seus artefatos da web em uma guerra (por exemplo, jquery e html em um projeto Java / Spring). Acabei fazendo isso para resolver o problema do CORS, depois de tentar manter meus projetos angulares e REST separados.

Minha solução foi mover todo o conteúdo angular (4), gerado com a CLI, do meu aplicativo para MyJavaApplication / angular. Então modifiquei minha compilação do Maven para usar o maven-resources-plugin para mover o conteúdo de / angular / dist para a raiz da minha distribuição (por exemplo, $ project.build.directory} / MyJavaApplication). Angular carrega recursos da raiz da guerra por padrão.

Quando comecei a adicionar roteamento ao meu projeto angular, modifiquei ainda mais o maven build para copiar index.html de / dist para / WEB-INF / app. E, adicionou um controlador Java que redireciona todas as chamadas de descanso do lado do servidor para o índice.

Basta seguir o link abaixo,

Altere a página Index.html Caminhos do arquivo de script Altere o caminho component.html, caso ocorra um erro que não foi possível encontrar o local

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy