O que vem nesta série de postagens:
- 1: - ;
- 2: S2I HTTP-, NGINX, OpenShift -;
- 3: OpenShift .
Em primeiro lugar, precisamos do OpenShift instalado. Estaremos usando o minishift, que permite que você execute o OpenShift em uma máquina virtual em computadores Windows, Mac ou Linux. Para colocar as mãos no minishift, baixe o Red Hat Container Development Kit (CDK) e siga estas instruções para instalá-lo e executá-lo. Mais informações podem ser encontradas no CDK documentação e na documentação sobre o OKD.io local .
Após o minishift ser iniciado, você precisa fazer o login e configurar o projeto, o que é feito em apenas dois comandos:
$ oc login
$ oc new-project web-apps
Isso pressupõe que você já tenha Node.js 8+ e npm 5.2+ instalado.
Se você abriu este artigo apenas para descobrir quais são esses dois comandos mágicos, pule para a parte final. Caso contrário, prossiga no texto!
O que é um aplicativo da web moderno?
Em primeiro lugar, precisamos decidir o que queremos dizer com "aplicativo da web moderno" e como ele difere do chamado aplicativo Node.js "puro".
Para nós, um aplicativo da web moderno é algo como React, Angular ou Ember, com uma etapa de construção que gera HTML, JavaScript e CSS estáticos. Durante a fase de construção, várias tarefas são normalmente executadas, como concatenação, transpilação (Babel ou Typescript) e minificação de arquivo. Cada uma das principais estruturas tem seu próprio processo de construção e pipeline, mas ferramentas como Webpack, Grunt e Gulp também se enquadram nesta categoria. E todas essas ferramentas usam Node.js para executar processos de construção.
No entanto, o conteúdo estático gerado (compilado) neste estágio não precisa necessariamente de um processo de nó para atendê-lo. Sim, você pode usar algo como o módulo de serviço aqui , que é ótimo para desenvolvimento, pois permite que você veja rapidamente a aparência do site. Mas para implantações de produção, geralmente é recomendado usar algo como NGINX ou Apache HTTP Server.
Por outro lado, um aplicativo de nó "puro" usará o processo Node.js para iniciar e pode ser algo como um aplicativo Express.js (ou seja, um servidor REST API) - geralmente não tem uma etapa de construção (sim sim, estamos cientes do Typescript). Geralmente, as dependências de desenvolvimento não são instaladas, pois só precisamos daquelas usadas para executar o aplicativo.
Você pode ler sobre como implantar um aplicativo de nó "puro" no OpenShift usando nossa imagem S2I do Node.js, por exemplo, aqui .
Implantar um aplicativo da web no OpenShift
Agora que descrevemos a diferença entre um aplicativo da web moderno e um aplicativo Node.js, vamos mostrar como realmente implantar nosso aplicativo da web para OpenShift.
Aqui, implantaremos um aplicativo React e um aplicativo Angular moderno. Ambos os projetos podem ser criados rapidamente usando as ferramentas CLI apropriadas: create-react-app eangular/ cli. Este será um dos dois comandos que aparecem no título deste artigo.
React app
Se o create-react-app já estiver instalado globalmente, ótimo. Caso contrário, apenas execute o comando apropriado com npx, assim:
$ npx create-react-app react-web-app
Nota: npx é um executor de comando único que está incluído no npm 5.2+, veja aqui para detalhes .
Este comando criará um novo aplicativo React, e você deverá ver algo assim na tela:
Supondo que você esteja no diretório do projeto recém-criado, você pode executar o segundo comando para implantar nosso aplicativo no OpenShift:
$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose
Agora, o console do OpenShift será semelhante a este:
E este é o console da web após iniciar o aplicativo:
Antes de passar para o aplicativo Angular, vamos dar uma olhada no que nosso último comando faz.
Ele começa com npx nodeshift - aqui executamos o módulo nodeshift usando npx , o que facilita a implantação de aplicativos de nó no OpenShift.
Agora vamos analisar as opções que são passadas para o nodeshift. O primeiro é --strictSSL = false.
Como temos um minishift e ele usa um certificado autoassinado, precisamos informar ao nodeshift isso para que não haja erros de segurança (na verdade, dizemos isso para a biblioteca de solicitações escondida sob o capô).
Em seguida, vem a opção longa --dockerImage = nodeshift / ubi8-s2i-web-app --imageTag = 10.x. Ela diz ao nodeshift para usar a nova imagem do Web App Builder com uma tag 10.x.
Agora dizemos à imagem S2I que queremos usar yarn: --build.env YARN_ENABLED = true. Finalmente, o sinalizador --expose diz ao nodeshift para criar uma rota OpenShift para nós, de modo que possamos obter uma URL acessível pela web para nosso aplicativo.
Como este é um artigo da série OpenShift Fast Track, a imagem S2I aqui usa o módulo de serviço para servir os arquivos estáticos gerados. No próximo post, mostraremos como usar essa mesma imagem S2I com o NGINX.
App angular
Agora vamos criar um aplicativo Angular. A primeira etapa é criar nosso novo aplicativo usando a CLI Angular. Novamente, se você não o instalou globalmente, pode iniciá-lo com npx:
$ npx @angular/cli new angular-web-app
Este comando criará um novo projeto Angular e nós, como é o caso do aplicativo React, apenas executaremos outro comando para implantá-lo:
$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose
Semelhante ao caso React, o console da web OpenShift será semelhante a este:
E este, respectivamente, é o console da web quando você inicia o aplicativo:
Agora vamos dar uma olhada no comando de implantação. É muito semelhante ao React, mas existem diferenças importantes.
As diferenças estão no sinalizador build.env: para Angular, escrevemos --build.env OUTPUT_DIR = dist / angular-web-app, e há dois pontos aqui.
Primeiro, removemos a variável YARN_ENABLED, pois não estamos usando yarn para nosso projeto Angular.
Em segundo lugar, adicionamos a variável OUTPUT_DIR = dist / angular-web-app. Portanto, a imagem S2I, por padrão, procurará seu código compilado no diretório de construção. O React usa build por padrão, portanto, não configuramos esse parâmetro no exemplo anterior. Mas o Angular usa outras coisas para sua saída compilada. Portanto, escrevemos que o parâmetro ist / <PROJECT_NAME> em nosso caso é igual a dist / angular-web-app.
Conclusão
Para aqueles que pularam a análise dos exemplos acima e vieram aqui desde o início do artigo, mostramos os dois comandos com os quais a implantação é realizada:
React:
$ npx create-react-app react-web-app
$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose
Angular:
$ npx @angular/cli new angular-web-app
$ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose
Recursos adicionais
Hoje você viu como implantar de forma rápida e fácil um aplicativo da web moderno no OpenShift usando a nova imagem S2I Web App Builder. Nossos exemplos usam a versão da comunidade desta imagem, mas a Red Hat já lançou o Red Hat Openshift Application Runtime (RHOAR) , então tome cuidado.
Na próxima postagem, mostraremos como usar uma nova imagem S2I junto com uma imagem de servidor HTTP existente, como NGINX, usando a cadeia de construção OpenShift para organizar implantações de produção.
A terceira parte desta série se concentrará em como organizar um fluxo de trabalho de desenvolvimento para um aplicativo na plataforma OpenShift.
Também recomendamos baixar e revisar o e-book gratuito Deploying to OpenShift .