Edge Security Acceleration:Acelere a renderização de sites com Functions and Pages

2,1 Prepare o ambiente e os recursos

1. Faça login no console do OSS, acesse a página Buckets e clique em Create Bucket. Insira um Bucket Name, mantenha os demais padrões e clique em Create.

   

2. Selecione o bucket criado. Na página Files, descompacte o conjunto de imagens de produtos disponível em Arquivos de recursos e envie as imagens para o diretório raiz do bucket.

   

   Nota

   Armazene os recursos de imagem no diretório raiz do bucket do OSS.

2,2 Configure o domínio acelerado para recursos estáticos

1. No console do ESA, escolha Websites. Na coluna Verify, clique no site desejado.

2. No painel de navegação à esquerda, clique em Verify > Websites > Websites e adicione um registro DNS com base no Website.

   Parâmetro	Valor de exemplo
   Record Type	CNAME
   Hostname	images
   Add Record	Enabled
   Record Type	OSS
   Access Type	Private Access (Same-account)
   Proxy Status	Autorizado por padrão para acesso na mesma conta.
   Record Value	website-resources-shopping.*******.aliyuncs.com
   Origin Host	Follow Origin Domain Name

3. Selecione Image/Video para o tipo de registro e clique em Authorization.

4. Após criar o registro DNS, copie o OSS Bucket e o Record Value da página do assistente de configuração de CNAME.

   

5. Acesse o console do Alibaba Cloud DNS. No painel de navegação à esquerda, escolha Public DNS > Authoritative Domain Names. Na aba Authoritative Domain Names, localize o nome de domínio do site alvo e clique em DNS Settings.

6. Em DNS Settings, clique em Add Record. Adicione um registro com estas configurações e clique em OK.

   Parâmetro	Valor de exemplo
   Tipo de registro	CNAME
   Host record	images
   Valor do registro	images.example.com.**.*******.com
   TTL	10 minutos

7. Retorne à página do assistente de configuração de CNAME do Passo 4. Na etapa 3. Verify the CNAME record, clique em OK. Se o registro CNAME já estiver ativo, a configuração estará concluída.

   

   Nota

   O registro CNAME pode levar alguns minutos para entrar em vigor.

8. Insira http://<your_accelerated_domain_name>/1.png no navegador para verificar se a imagem é exibida.

   Nota

   Se ocorrer um erro 404, ajuste a URL para corresponder ao caminho do diretório de imagens. Por exemplo: http://<your_accelerated_domain_name>/images/1.png.

3,1 Prepare o ambiente

1. Faça login no console do ECS.

2. No painel de navegação à esquerda, escolha Instances & Images > Instances. Na barra de menu superior, selecione a região China (Hangzhou).

3. Na página Instances, clique em Create Instance. Em seguida, crie uma instância ECS na página de compra.

3,2 Implante recursos dinâmicos

1. Faça login no console do ECS.

2. No painel de navegação à esquerda, escolha Instances & Images > Instances. Na barra de menu superior, selecione a região China (Hangzhou).

3. Na página Instances, localize a instância desejada e clique no ID da instância para acessar a página de detalhes.

4. Clique em Remote Connection, selecione Connect via Workbench e clique em Log On Now. Insira a senha de login para concluir o acesso.

   

5. Baixe o código do site e os dados dos produtos em Arquivos de recursos, descompacte o pacote e envie os dois arquivos para o servidor ECS.

6. No arquivo ItemInfo.json, substitua images.example.com pelo nome de domínio acelerado configurado na Seção 2,2.

   Escolha File > Open New File Management > Upload File para enviar ambos os arquivos ao servidor.

   

7. No console do Workbench, execute os seguintes comandos para iniciar um servidor HTTP.

   cd /  # Go to the system root directory.
   nohup python -m http.server 80 &  # Start an HTTP service on port 80 in the background.

8. No navegador, insira http://<your_public_ip>/ItemsInfo.json para verificar se os dados dinâmicos do produto são retornados.

3,3 Configure o domínio acelerado para recursos dinâmicos

1. No console do ESA, escolha Websites. Na coluna Actions do site alvo, clique no ícone e selecione DNS Records.

2. No painel de navegação à esquerda, escolha DNS > Records.

3. Na página de lista de registros, clique em Websites, configure os parâmetros e clique em Websites.

   Parâmetro	Valor de exemplo
   Tipo de registro	A/AAAA
   Host record	www
   Status do proxy	Enabled
   Valor do registro/origem	10.0.x.x (O endereço IP público da instância ECS alvo)
   TTL	Auto

4. Selecione API para o tipo de registro e clique em OK.

5. Após criar o registro DNS, copie o Hostname e o Records da página do assistente de configuração de CNAME.

   Nota

   Mantenha esta página aberta. Você retornará a ela para verificar o registro CNAME no Passo 8.

   

6. Acesse o console do Alibaba Cloud DNS. No painel de navegação à esquerda, escolha Public DNS > Authoritative Domain Names. Na aba Authoritative Domain Names, localize o nome de domínio do site alvo e clique em DNS Settings.

7. Em DNS Settings, clique em Add Record. Adicione um registro com estas configurações e clique em OK.

   Parâmetro	Valor de exemplo
   Tipo de registro	CNAME
   Host record	www
   Valor do registro	www.example.com.**.*******.com (O valor do registro obtido no assistente de configuração de CNAME)
   TTL	10 minutos

8. Retorne à página do assistente de configuração de CNAME do Passo 5. Na etapa Add Record, clique em Query. Se o registro CNAME já estiver ativo, a configuração estará concluída.

   

   Nota

   O registro CNAME pode levar alguns minutos para entrar em vigor.

4,1 Crie o Functions and Pages

1. Faça login no console do ESA. No painel de navegação à esquerda, escolha Hostname > Record Value.

2. Clique em 3. Verify the CNAME record. Para o método de criação, selecione Query. Escolha o modelo Hello World e clique em Functions and Pages.

3. Insira um Functions and Pages, adicione uma descrição conforme necessário e clique em Submit.

4. Adicione um nome de domínio para o Functions and Pages.

   1. Faça login no console do ESA. No painel de navegação à esquerda, escolha Edge Computing > Functions and Pages.

   2. Na página de lista do Next, clique na função desejada.

   3. Na página de detalhes da função, alterne para a aba Routine Name e clique em Add Domain Name. Atribua o nome de domínio shopping.example.com à função de borda e clique em Functions and Pages.

   4. Na área de vinculação de domínio, localize o nome de domínio da função de borda recém-criado. Na coluna Edge Computing, clique em Functions and Pages. Na página de gerenciamento de registros DNS, copie o valor CNAME do nome de domínio da função de borda.

      

   5. Faça login no console do Alibaba Cloud DNS. No painel de navegação à esquerda, escolha Public DNS > Authoritative Domain Names. Na aba Authoritative Domain Names, localize o nome de domínio do site alvo e clique em DNS Settings.

   6. Em DNS Settings, clique em Add Record. Adicione um registro com estas configurações e clique em OK.

      Parâmetro	Descrição	Valor de exemplo
      Tipo de registro	Selecione o tipo de registro DNS.	CNAME
      Host record	Insira o host record com base no prefixo do domínio.	shopping
      Valor do registro	Insira o valor CNAME do domínio da função de borda.	shopping.example.com.**.*******.com
      TTL	Ciclo de atualização do DNS. Mantenha o valor padrão.	10 minutos

   7. Atualize a página de registros DNS e verifique se o CNAME Status do nome de domínio da função de borda mudou de To be configured para Configured.

      Nota

      O registro CNAME pode levar alguns minutos para entrar em vigor.

4,2 Configure um certificado de borda

O ESA criptografa requisições do cliente para o POP usando SSL/TLS. Para esta prática, solicite um certificado gratuito. Configure um certificado de borda.

1. No console do ESA, clique em Functions and Pages no painel de navegação à esquerda e clique no site desejado.

2. Na página de gerenciamento do site alvo, escolha SSL/TLS > Domain Name no painel de navegação à esquerda.

3. Na seção Edge Certificates, localize OK e clique na chave para ativá-lo.

   

4. Na seção Actions, localize View DNS Records e clique em Apply for Free Certificate. Configure os parâmetros e clique em OK.

   Parâmetro	Descrição	Valor de exemplo
   Autoridade certificadora	Use o valor padrão.	Let's Encrypt
   Nomes de domínio do certificado	Insira os nomes de domínio estático, dinâmico e da função de borda configurados nas etapas anteriores.	images.example.com www.example.com shopping.example.com

5. A emissão do certificado leva de 5 a 10 minutos. Após esse período, ele é implantado automaticamente no ESA.

4,3 Configure o protocolo e a porta de origem

Por padrão, o ESA usa HTTPS para busca na origem. Como a origem neste exemplo não suporta HTTPS, configure o ESA para usar HTTP.

1. No console do ESA, clique em Websites no painel de navegação à esquerda e clique no site desejado.

2. Na página de gerenciamento do site alvo, escolha Edge Certificates no painel de navegação à esquerda.

3. Na seção Certificate Management, localize Origin Protocol and Port e clique em Configure. Configure os parâmetros e clique em Websites.

   Parâmetro	Descrição	Valor de exemplo
   Protocolo de origem	Selecione HTTP pois a origem não suporta HTTPS.	HTTP
   Porta HTTP	Mantenha o valor padrão de 80.	80

   

4,4 Teste e publique a função de borda

1. Faça login no console do ESA e, no painel de navegação à esquerda, escolha SSL/TLS > Edge Certificates.

2. Na página de lista do Origin Certificates, clique na função desejada.

3. Na página de detalhes da função, alterne para a aba Code. Substitua a variável urlPrefix pelo seu nome de domínio de origem www.example.com e clique em Save.

   async function handleRequest(request) {
       const urlPrefix = 'www.example.com';
       // The request URL of the HTML file.
       const staticDataUrl = 'http://' + urlPrefix + '/index.html';
       // The request URL of the dynamic data.
       const dynamicDataUrl = 'http://' + urlPrefix + '/ItemsInfo.json';
   
       // Use the Cache API to query page skeleton data.
       const htmlCache = await cache.get(staticDataUrl);
       let html = '';
       if (htmlCache === undefined) {
           const htmlResponse = await fetch(staticDataUrl);
           html = await htmlResponse.text();
           await cache.put(staticDataUrl, new Response(html, { headers: [["cache-control", "max-age=1000"]] }));
       } else {
           html = await htmlCache.text();
       }
   
       // Fetch product data from the origin server.
       const jsonResponse = await fetch(dynamicDataUrl);
       const json = await jsonResponse.json();
   
       // Encapsulate dynamic data into div blocks.
       let itemsHtml = '';
       for (const item of json.data) {
           const itemHtml = `
               <div class="bg-white overflow-hidden shadow rounded-lg">
                           <div class="p-4">
                               <img class="h-48 w-full object-cover" src="${item.image}" alt="Placeholder image of a product">
                               <h3 class="mt-2 text-gray-900 text-sm font-medium">${item.title}</h3>
                               <div class="mt-4">
                                   <span class="original-price">${item.originalPrice}</span>
                               </div>
                               <div class="mt">
                                   <span class="text-gray-900 font-semibold">${item.discountPrice}</span>
                               </div>
       
                           </div>
                       </div>`;
           itemsHtml += itemHtml;
       }
   
       // Replace #(itemsHtml) in the static HTML with dynamic data.
       const finalHtml = html.replace("#(itemsHtml)", itemsHtml);
   
       // Return the HTML page rendered at a POP to the browser.
       return new Response(finalHtml, {
           headers: {
               "content-type": "text/html;charset=UTF-8",
           },
       });
   }
   
   export default {
       async fetch(request) {
           return handleRequest(request);
       },
   };
   

4. Clique em OK no canto superior direito para executar um teste local. Os logs de execução aparecem na seção inferior esquerda.

5. Após o sucesso do teste, clique em One-click Release para implantar o código em produção.

5,1 Verifique a solução

1. Após a publicação, verifique o resultado:

   • Abra um navegador e acesse o domínio da função de borda (por exemplo, https://<your_edge_function_domain_name>).

   • Confirme se a página carrega e se os dados do produto são renderizados dinamicamente.

   • Use as ferramentas de desenvolvedor do navegador para confirmar que os recursos estáticos estão em cache e que os dados dinâmicos são acelerados pelos POPs.

5,2 Limpe recursos (Opcional)

Se você não precisar mais desses recursos, exclua-os para evitar cobranças:

1. Exclua o site.

   Faça login no console do ESA. No painel de navegação à esquerda, clique em Websites. Na página de lista de Gerenciamento de Sites, clique em Functions and Pages na coluna Actions.

2. Exclua a função de borda.

   No console do ESA, escolha Edge Computing > Functions and Pages no painel de navegação à esquerda. Na página de lista do Functions and Pages, clique na função desejada. Na aba Basic Information, clique em Delete.

3. Libere a instância ECS.

   Faça login no console do ECS. Na página Instance, localize a instância desejada. Na coluna Actions, escolha Release e siga as instruções na tela para liberar a instância.

4. Exclua um grupo de segurança.

   Faça login no console do ECS. Na página Security Groups, localize o grupo de segurança desejado. Na coluna Actions, clique em Delete e siga as instruções na tela para excluir o grupo de segurança.