Observação:

Configurar o OCI Object Storage e o Oracle API Gateway para Hospedagem de Site Estático

Introdução

Se você tiver um aplicativo web que deseja hospedar no OCI (Oracle Cloud Infrastructure) e quiser configurar hospedagem de site estático, neste tutorial, percorreremos a configuração de hospedagem estática de um aplicativo web JavaScript compilado pela Ahead-of-Time (AOT) usando o OCI Object Storage e o Oracle API Gateway. A mesma abordagem pode ser aplicada a qualquer cenário em que você queira fornecer um arquivo estático via HTTP, seja para um aplicativo mais simples ou páginas da Web estáticas, e fornecer uma experiência on-line confiável aos seus usuários na plataforma OCI, tudo a um custo menor.

Objetivos

Entenda como aproveitar o OCI Object Storage e o Oracle API Gateway para hospedar sites estáticos para implantar e gerenciar com eficiência o conteúdo da web no Oracle Cloud Infrastructure.

Pré-requisitos

Tarefa 1: Criar um Bucket do Oracle Object Storage

Vamos começar criando um novo bucket no OCI Object Storage. Este bucket será usado para hospedar seu site estático.

Bucket do Armazenamento de Objetos

Tarefa 2: Fazer upload dos arquivos de distribuição no Bucket

Faça upload dos arquivos de distribuição do aplicativo no bucket criado na tarefa anterior. Os arquivos de distribuição do aplicativo geralmente estão localizados na pasta /dist do diretório do aplicativo e são a saída do build do webpack.

Arquivos de distribuição

Tarefa 3: Criar Solicitação Pré-autenticada

Para permitir que o Oracle API Gateway atenda aos arquivos de distribuição pela internet, crie uma solicitação pré-autenticada PAR para seu bucket de armazenamento de objetos no qual os arquivos de distribuição são armazenados.

Usaremos isso ao configurar o API Gateway.

Tarefa 4: Criar o Oracle API Gateway

O serviço Oracle API Gateway permite que você publique APIs com pontos finais privados acessíveis na sua rede e que você pode expor com endereços IP públicos se quiser que eles aceitem o tráfego da internet. Os pontos finais suportam validação de API, transformação de solicitação e resposta, CORS, autenticação e autorização e limitação de solicitação. Para obter mais detalhes, consulte Visão Geral do Oracle API Gateway.

  1. Navegue até Menu OCI, Serviços do Desenvolvedor, API Gateway e clique em Criar.

Observação: : Você precisará de uma Rede Virtual na Nuvem para implantar esse Oracle API Gateway, crie uma VCN se ela ainda não tiver sido criada.

Oracle API Gateway

Tarefa 5: Configurar a implantação do Oracle API Gateway

Depois que o Oracle API Gateway for criado com sucesso, navegue até Implantações e crie uma nova implantação.

  1. Selecione Criar do zero e defina o prefixo do Caminho como "/". Este será o caminho base do url.

    Implantação de Gateway

  2. Configure TLS, CORS etc. aqui ou clique em Próximo para passar para o próximo passo.

  3. Selecione Sem Autenticação e clique em Próximo. Não precisamos adicionar nenhuma autenticação para nosso site Static.

    Autenticação de Implantação

Tarefa 6: Adicionar Rotas

No assistente de Implantação de API, adicione rotas que estenderão o caminho base para nossas implantações.

  1. Digite /{req*} no campo de caminho.

    Caminho da implantação

  2. Selecione GET na lista drop-down Métodos.

  3. Selecione Editar múltiplos backends adicionados.

    Implantação de vários backends

  4. Selecione Caminho no campo seletor.

    Caminho da implantação

  5. Clique em Definir Backend.

  6. Crie uma regra padrão, digite Nome como padrão, Tipo de Correspondência como Qualquer um de e marque a caixa de seleção Tornar padrão, selecione backend como HTTP e informe o url de armazenamento de objetos para a página index.html no campo Url e clique em Criar.

    definição de backend

  7. Crie uma regra de arquivo js, digite Nome como regra js, Tipo de Correspondência como Curinga e *.js como expressão curinga, selecione backend como HTTP e digite o url do bucket de armazenamento de objetos seguido pela página {request.path[request]} no campo Url e clique em Criar. Sua URL será parecida com esta

    https://{namespace}.objectstorage.{region}.oci.customer-oci.com/n/{namespace}/b/{bucket-name}/o/${request.path[req]}

  8. Clique em Criar.

    definição de backend

  9. Crie regras semelhantes para arquivos css, html, txt, json de acordo com sua necessidade.

    backend definir todos

  10. Clique em Próximo e conclua a criação do Oracle API Gateway e aguarde que ele seja atualizado.

Tarefa 7: Teste

Recupere o URL de implantação e insira-o no seu Web browser e isso deve exibir seu aplicativo.

Observações:

  1. Se você não vir o aplicativo carregado, verifique se adicionou a política correta do Oracle API Gateway para acessar o Bucket de Armazenamento de Objetos.

  2. Não se esqueça de adicionar todos os diferentes tipos de arquivo que seu aplicativo tem na definição de backend.

  3. Somente aplicativos compilados AOT (Antes do Tempo) e sites estáticos podem ser configurados usando essa técnica. Verifique se o aplicativo foi compilado em código nativo do Javascript.

Confirmações

Autor - Mayank Kakani (Arquiteto de Nuvem do OCI)

Mais Recursos de Aprendizagem

Explore outros laboratórios no site docs.oracle.com/learn ou acesse mais conteúdo de aprendizado gratuito no canal YouTube do Oracle Learning. Além disso, visite education.oracle.com/learning-explorer para se tornar um Oracle Learning Explorer.

Para obter a documentação do produto, visite o Oracle Help Center.