Como você implanta aplicativos Angular?

194

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?

Joseph Girgis
fonte

Respostas:

91

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

em meio a
fonte
1
Eu também recomendaria o JSPM ( jspm.io ): info aqui gist.github.com/robwormald/429e01c6d802767441ec e o projeto seed aqui github.com/madhukard/angular2-jspm-seed
Harry
Após 6 meses em que Angular2 está em rc5 e será lançado em breve, essa resposta ainda é relevante porque faz referência ao projeto de semente angular2. Ótimo projeto, muitos colaboradores!
precisa saber é o seguinte
3
Ainda estou massivamente confuso com o ponto (1). O que significa implantar 'COMO ESTÁ'? Isso significa copiar também todos os 50000 arquivos node_module? Estou tentando implantar o exemplo HEROES e não sei o que adicionar como fonte de script no arquivo de índice.
Oliver Watkins
1
Sim - significa copiar todas as suas dependências, incluindo as node_modulestambém. Nota - você deve copiar apenas as dependências necessárias para a execução do programa. Não copie deps que são usados ​​apenas para desenvolvimento (por exemplo, gulp / grunt / etc).
Entre
1
Sim. Nesse arquivo, system.js é instruído sobre o que é e onde carregar de todas as suas dependências.
Entre
88

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

Nate Bunney
fonte
Como você faz isso? Após o início rápido do Angular 2, eu executo esse comando em vez de 'npm start' e recebo 'ng command not found'
Rahly
1
@NateBunney Eu sou novo na cena de desenvolvimento web. Estou confuso. ng build produz um monte de arquivos na pasta dist. Digamos que você esteja usando o Spring Boot como servidor Web, copie e cole esses arquivos na pasta pública de inf-Web no Spring Boot? Ou você precisa de um servidor nodejs na frente do boot para servir o ng2 dist?
Srikanth
3
Por que isso não está na documentação? Parece uma omissão enorme!
Kokodoko
Lembre-se de que a primeira versão do Angular 2 tem apenas um mês.
Nate Bunney #
1
@ user1460043, sim, mas existe uma solução fácil para o seu problema. Basta rolar um novo projeto CLI angular e copie seu diretório src no projeto CLI.
Nate Bunney
21

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"
}
  1. 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);
  1. 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:)

cienki
fonte
acrescentando angular-cli em dependências aumentar o tamanho do dist como lidar com isso
Janak Bhatta
7

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!

Yakir Tsuberi
fonte
6

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.
user6402762
fonte
58
Por favor, não questione esse tipo de coisa, pois é apenas compatível com o Azure. É como dizer que, se você estiver usando o Angular, só poderá usar os serviços do Google Cloud.
Oznmuyes
2
Útil saber que existe um módulo npm para implantar no Azure.
Anthony Brenelière 15/03
1
@ user6402762 +1 para Prove o creme.
Leonardo Wildt
Estou tentando implantar meu aplicativo Angular 4 usando esta resposta, mas continuo recebendo erros como esse Can't resolve 'node-uuid' in path\azure-deploy\lib. Isso ainda é possível? Eu configurei a etapa 5 app.modulee não tenho certeza se fiz as etapas 3 e 4 corretamente. Você poderia esclarecer isso?
Wouter Vanherck
6

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.

WatchTanis
fonte
5

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

Oduwole Oluwasegun
fonte
5

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

Avadhesh Maurya
fonte
4

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>
Sumit Jaiswal
fonte
que tipo de servidor? deve ser um servidor nginx ou o que isso conterá os dist
famas23
Pode ser o Tomcat, sua escolha. Eu diria que use o que você está familiarizado.
Wallace Howery
Qualquer Linux Apache ou outro servidor, onde as regras de .htaccess sejam usadas.
Sumit Jaiswal
@TamaghnaBanerjee, verifique se o servidor re-mode está ativado ou não?
Sumit Jaiswal
3

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

Peter Salomonsen
fonte
Obrigado por uma referência aos documentos e por mencionar a compilação do AOT. O valor parece real,"This cookbook describes how to radically improve performance by compiling Ahead of Time (AOT) during a build process."
aero
1
Obrigado pelo feedback - se você não encontrou tempo para testar a compilação do AoT, adicionamos um vídeo mostrando a diferença em número de arquivos e tamanho (usando o projeto github mencionado na resposta).
Peter Salomonsen
Impressionante! Obrigado por ser tão prestativo Peter!
aero
2

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

Rahul Singh
fonte
1

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.

npesa92
fonte
Obrigado - foi a maneira mais simples que pude encontrar.
22719 Brian
1

É 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!

Malatesh Patil
fonte
Somente se você iniciar seu projeto com angular-cli no?
Portekoi
Não é assim. Se você não iniciou seu projeto angular2 usando angular-cli, é possível criar o projeto para produção. Somente você precisa ter o angular-cli instalado em sua máquina no momento da compilação. Use o npm install -g @ angular / cli para instalar o angular-cli globalmente.
Malatesh Patil
1

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.

Kay
fonte
1

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.

Bruno Oliveira
fonte
1

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.

Wallace Howery
fonte