Extensão de front-end

Implantando o front-end customizado

261 views 22/01/2018 24/01/2018 gian-pasqualini 3

A implantação do front-end customizado é realizada servindo os arquivos gerados na pasta

dist

como uma pagina web.
O servidor web que disponibiliza o front-end customizado deve estar configurado para responder requisições via HTTPS.
Tendo estas premissas utilizaremos 2 serviços da amazon em conjunto para a disponibilização do front-end customizado, sendo eles:

  • S3: manterá os arquivos e os disponibilizará como uma pagina web
  • CloudFront: Adicionará a camada HTTPS aos arquivos do S3

Configuração do S3

Crie um bucket no S3

Copie todo o conteúdo da pasta dist para o bucket

Marque a opção “Bucket hosting” o bucket


Selecione a opção “Use this bucket to host a website” e informe “index.html” como index document

Configuração do CloudFront

Crie uma nova distribuição:

Selecione a distribuição do tipo Web

Nas propriedades informe o bucket do S3 criado para o campo “Origin Domain Name” e um id para sua distribuição no campo “Origin ID

Informe “index.html” para a propriedade “Default Root Object

 

Clique em create distribution no canto inferior da pagina.

O CloudFront iniciará o processo de disponibilização do conteúdo. quando concluído copie a url do campo “Domain Name” Ex.: d3tfg7xzbvvd1u.cloudfront.net

Implantando o front-end na plataforma

Para a implantação do front-end, recomenda-se esconder o menu da tela original e adicionar um alternativo, visando manter o caminho para a tela original intacto em caso de necessidade.

A adição de itens de menu se dá através da criação de um módulo, descrito no tutorial de Criação de menus

O Config.json utilizado pode ser o do próprio projeto de front-end, localizado em: <diretorio_do_projeto > src > static > config.json.

IMPORTANTE: como no projeto de exemplo as propriedades withCredentials e category devem ser setadas ex:

"path": {
<strong>"withCredentials": true,</strong>
<strong>"category": "iframe",</strong>
"menuId": "https://d3tfg7xzbvvd1u.cloudfront.net/"
}

A propriedade withCredentials define que as credenciais serão compartilhadas com a pagina que está sendo aberta através do item de menu

A propriedade category define como a pagina será aberta. Para este tutorial funcionará apenas como IFRAME (na mesma janela).

A propriedade menuId receberá a url copiada do campo Domain Name (Lembre-se de adicionar o endereço iniciando com “https“)

Após adicionado o menu, basta acessá-lo para abrir seu front-end customizado na plataforma.

 

Este artigo foi útil para você?