Compilações e implantações
Quais estruturas de front-end podem ser criadas automaticamente por Aplicativos Web Estáticos?
Os Aplicativos Web Estáticos podem compilar automaticamente:
- SPA (aplicativos de página única) populares, incluindo: React, Vue.js, Angular, Blazor, WebAssembly
- Geradores de sites estáticos comumente usados, incluindo: Next.js, Nuxt.js, Gatsby, Hugo, Jekyll, Eleventy
Para saber mais, consulte Configurar frameworks de front-end.
O que acontece durante o processo de compilação?
O mecanismo de compilação de Aplicativos Web Estáticos do Azure é alimentado pelo Oryx, que compila o front-end e a API do seu aplicativo.
Quando seu aplicativo é criado, o Oryx detecta as etapas de compilação e as executa automaticamente. Por exemplo, se seu aplicativo usa Node.js, ele instala pacotes usando npm ou yarn. Em seguida, ele executa o script build ou build:azure fornecido no arquivo package.json do seu aplicativo.
Posso personalizar o processo de compilação?
Se desejar ter controle total sobre a criação do seu aplicativo, é possível configurar as suas próprias etapas de compilação no fluxo de trabalho de GitHub do seu aplicativo ou pipeline do Azure DevOps. Você pode usar o GitHub Actions dos Aplicativos Web Estáticos ou a tarefa do Azure Pipelines para implantar seu aplicativo. Verifique se definiu skip_app_build como true. Para saber mais, confira configuração de compilação.
O comando skip_app_build só tem suporte para aplicativos de front-end. O aplicativo de API deve ser criado pelo GitHub Actions dos Aplicativos Web Estáticos do Azure ou pela tarefa do Azure Pipelines.
Meu aplicativo React falha ao compilar e exibe a mensagem "tratar avisos como erros porque process.env.CI = true". Como fazer para corrigir esse erro?
Se seu aplicativo usar create-react-app, seu comando de compilação tratará avisos como erros durante a execução em um ambiente de CI (integração contínua), como o GitHub Actions ou Azure Pipelines. Se houver avisos no aplicativo, ele não será compilado. Para corrigir esses problemas, modifique seu aplicativo para remover os avisos. Caso deseje que o build seja feito mesmo se há avisos, atualize o script do build em package.json para remover a definição da variável de ambiente CI:
"scripts": {
"build": "CI= react-scripts build"
}
Como fazer para alterar a ramificação no GitHub?
Para alterar a ramificação de onde compilar e implantar, atualize os nomes das ramificações no fluxo de trabalho de GitHub do seu aplicativo. Por exemplo, se desejar alterar seu aplicativo para compilar e implantar a partir de uma ramificação chamado release, atualize a seção on do seu fluxo de trabalho:
on:
push:
branches:
- release
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- release
Para Aplicativos Web Estáticos criados durante o período de versão prévia, talvez seja necessário redefinir o token de implantação.
É necessário executar a ação/tarefa dos Aplicativos Web Estáticos em um agente de compilação do GitHub Actions ou Azure Pipelines do Linux?
O mecanismo de compilação dos Aplicativos Web Estáticos do Azure é executado em um contêiner do Docker do Linux, portanto, ele só pode ser executado em um agente de compilação do Linux.
Como fazer para implantar um aplicativo que usa o LFS (Armazenamento de arquivos grandes) do Git?
Em seu fluxo de trabalho do GitHub, configure a ação actions/checkout para habilitar o LFS:
- uses: actions/checkout@v2
with:
submodules: true
lfs: true
É necessário limpar ou invalidar manualmente o cache após uma implantação?
Os Aplicativos Web Estáticos do Azure identificam automaticamente a invalidação de cache. Quando uma implantação é concluída, todas as solicitações recebem a última versão dos seus arquivos. No entanto, os arquivos ainda podem ser armazenados em cache nos navegadores dos usuários, ou em uma CDN, se tiver uma configurada. Configure os cabeçalhos apropriados no arquivo de configuração do aplicativo, para controlar como os navegadores e as CDNs armazenam em cache seu conteúdo.
Posso usar ambientes de pré-produção se eu implantar com o Azure Pipelines?
Há suporte para ambientes de pré-produção somente para GitHub Actions no momento.
Hosting
Os Aplicativos Web Estáticos dão suporte a domínios personalizados e certificados TLS?
Você pode configurar seu aplicativo para usar domínios personalizados, incluindo domínios Apex. Os Aplicativos Web Estáticos fornecem automaticamente um certificado TLS gratuito quando você adiciona um domínio personalizado. Para saber mais, confira Configurar um domínio personalizado com certificado gratuito.
Posso personalizar a página de erro 404 do meu aplicativo?
Você pode configurar páginas de erro personalizadas usando a seção responseOverrides do arquivo de configuração.
Como fazer para garantir que meu aplicativo seja implantado em uma região específica do Azure?
Os Aplicativos Web Estáticos do Azure são um serviço global. Os ativos estáticos do seu aplicativo são distribuídos globalmente. Ao criar seu aplicativo, você seleciona uma região onde o aplicativo Azure Functions gerenciado é implantado. Se você precisar do seu aplicativo de funções em uma região que não ofereça suporte a funções gerenciadas, poderá usar o recurso traga seu próprio aplicativo de funções com um aplicativo de funções implantado separadamente.
Como fazer para configurar meu Aplicativo Web Estático atrás do Gateway de Aplicativo do Azure ou uma CDN como a Azure Front Door?
Os Aplicativos Web Estáticos do Azure incluem distribuição global dos ativos estáticos do seu aplicativo. Se desejar maximizar sua memória global ou exigir recursos avançados, é possível adicionar uma rede de distribuição de conteúdo dedicada (CDN) ou um Gateway de Aplicativo Azure.
Para restringir o tráfego a uma CDN específica, configure sua CDN para adicionar um cabeçalho que contém um valor de segredo predefinido a cada solicitação e configurar Aplicativos Web Estáticos para exigir o cabeçalho. Para restringir o tráfego a um Gateway de Aplicativo Azure, Configure seu aplicativo para permitir somente o tráfego do IP do seu Gateway de Aplicativo.
Além disso, configure seu aplicativo para permitir o encaminhamento dos nomes do host da CDN ou do Gateway de Aplicativo.
Para saber mais sobre como configurar o Azure Front Door, consulte este tutorial.
Como fazer para habilitar a compactação Gzip ou Brotli?
Para ativos com extensões de arquivo de formatos de texto populares, como .html, .css e .js, os Aplicativos Web Estáticos do Azure automaticamente servem versões Gzip ou Brotli compactadas de seus ativos estáticos se o cliente oferecer suporte a ele.
Para outros tipos de arquivo, os Aplicativos Web Estáticos permitem que você inclua uma versão compactada Brotli do arquivo com uma extensão .br. Por exemplo, se você tiver um arquivo descompactado chamado app.wasm, poderá adicionar uma versão compactada chamada app.wasm.br ao seu aplicativo. Essa versão é servida automaticamente se um cliente que der suporte a Brotli solicitar app.wasm.
Por que meu Aplicativo Web Estático retorna um erro 404 ao acessar uma rota existente?
A maioria das estruturas de front-end como React, Angular, Blazor ou WebAssembly usam o roteamento do lado do cliente para identificar a navegação. As rotas do lado do cliente são conhecidas somente pelo aplicativo em execução no navegador. Se você solicitar uma rota do lado do cliente de Aplicativos Web Estáticos, ele retornará um erro 404 porque a rota não existe nos ativos implantados do seu aplicativo. Para corrigir esse problema, adicione uma rota de fallback ao arquivo de configuração do aplicativo.
Configuração
Como fazer para configurar variáveis de ambiente para o meu aplicativo?
Há diferentes tipos de variáveis de ambiente que você pode definir para seu aplicativo. Configurar variáveis que afetam o processo de compilação de front-end do seu aplicativo na configuração de compilação do seu aplicativo. Para configurar variáveis que são usadas pela API do seu aplicativo, use as configurações do aplicativo. Para saber mais, confira visão geral da configuração.
Os Aplicativos Web Estáticos dão suporte à identidade gerenciada?
Eles dão suporte à identidade gerenciada, mas são usados apenas para recuperar os segredos de autenticação do Key Vault.
Se precisar de identidade gerenciada ou referências de Key Vault em sua API, use o recurso traga seu próprio aplicativo de funções para usar um aplicativo de funções separado que usa a identidade gerenciada.
Autenticação
Quantos usuários podem fazer logon no meu Aplicativo Web Estático?
Os Aplicativos Web Estáticos não têm um limite para o número de usuários que podem fazer logon em seu aplicativo. Você pode atribuir funções personalizadas para até 25 usuários usando o sistema de convites internos. Se você precisar atribuir funções personalizadas a mais usuários, poderá usar uma função de API para atribuir funções programaticamente.
Como fazer para usar o token de acesso de um usuário ou as declarações do provedor de identidade?
Você pode recuperar o token de acesso do usuário e as declarações ao usar uma função de API para o gerenciamento de função.
Estou limitado a usar um único provedor de identidade?
Os usuários podem fazer logon com qualquer um dos provedores de identidade com suporte, ao usar a autenticação interna de Aplicativos Web Estáticos. Se desejar impedir que os usuários façam logon com um provedor de identidade específico, você poderá bloqueá-lo.
É possível configurar um ou mais provedores de identidade, se estiver usando a autenticação personalizada.
Funções de API
Como fazer para escrever minhas APIs usando uma versão de linguagem ou idioma para a qual os Aplicativos Web Estáticos não dão suporte?
Os aplicativos de funções gerenciadas dos Aplicativos Web Estáticos não oferecem suporte a todas as linguagens ou versões de idioma às quais o Azure Functions oferece suporte. Você pode usar o recurso traga seu próprio aplicativo de funções para vincular um aplicativo de funções a parte ao seu Aplicativo Web Estático.
Como fazer para criar funções sem servidor que respondem a eventos diferentes de HTTP?
Os aplicativos de funções gerenciados em Aplicativos Web Estáticos são otimizados para cenários de API e dão suporte apenas a gatilhos HTTP. Se você precisar usar outros tipos de gatilho com suporte pelo Azure Functions como para trabalhos cron ou Durable Functions para fluxos de trabalho com estado, você pode usar o recurso traga seu próprio aplicativo de funções para vincular um aplicativo de funções a parte ao seu Aplicativo Web Estático.
Geral
Quais são as limitações do plano gratuito?
O plano gratuito inclui muitos dos mesmos recursos que o plano Standard, como a distribuição global, os domínios personalizados, certificados TLS gratuitos, as funções de API gerenciadas e muito mais. No entanto, se precisar de mais largura de banda, um SLA (contrato de nível de serviço) ou recursos avançados, você deve considerar o plano Standard. Para saber mais, consulte planos de Hospedagem e Cotas.
Posso alterar o plano de hospedagem depois de criar meu aplicativo?
Você pode fazer upgrade do plano gratuito para o Standard a qualquer momento. Você também pode fazer o downgrade do plano Standard para o plano gratuito se não estiver usando recursos que exigem o plano padrão.
Posso desenvolver meu Aplicativo Web Estático localmente sem implantá-lo?
A maioria das estruturas de front-end fornece um servidor de desenvolvimento para executar seu aplicativo localmente. No entanto, se desejar usar funções de autenticação ou API, poderá ser difícil testar todos os recursos do seu aplicativo sem implantá-lo no Azure. Para executar seu aplicativo localmente, você pode usar a CLI (interface de linha de comando) de Aplicativos Web Estáticos, que emula a experiência de nuvem, incluindo a autenticação, e integra-se com o Azure Functions Core Tools para executar suas funções de API. Também há uma extensão do Visual Studio Code dos Aplicativos Web Estáticos que você pode usar para implantar seu aplicativo no Azure.
Como posso obter ajuda ou sugerir um novo recurso?
Se precisar de ajuda ou tiver uma sugestão, você pode criar um problema no repositório GitHub dos Aplicativos Web Estáticos.
Para obter ajuda imediata com um problema, entre em contato com o suporte do Azure.