A implantação do front-end customizado é realizada servindo os arquivos gerados na pasta
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:
<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.