Compilações e implantações
Quais estruturas de frontend podem ser criadas automaticamente por Static Web Apps?
Os Aplicativos Web estáticos podem criar automaticamente:
- Aplicativos populares de página única (SPA), incluindo: React, Vue.js, Angular, Blazor WebAssembly
- Geradores de locais estáticos comumente usados, incluindo: Next.js, Nuxt.js, Gatsby, Hugo, Jekyll, Eleventy
Para saber mais, consulte Configurar estruturas de frontend.
O que acontece durante o processo de compilação?
O mecanismo de compilação dos Aplicativos Web Estáticos do Azure é alimentado pelo Oryx, que cria o frontend e a API do seu aplicativo.
Quando seu aplicativo é criado, o Oryx deteta 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 build script ou build:azure fornecido no arquivo package.json do seu aplicativo.
Posso personalizar o processo de compilação?
Se quiser ter controle total sobre como criar seu aplicativo, você pode configurar suas próprias etapas de compilação no fluxo de trabalho do GitHub ou no pipeline do Azure DevOps do aplicativo. Em seguida, você pode usar a tarefa Static Web Apps GitHub Actions ou Azure Pipelines para implantar seu aplicativo. Certifique-se de definir skip_app_build como true. Para saber mais, consulte Configuração de compilação.
O skip_app_build comando só é suportado para aplicativos frontend. O aplicativo de API deve ser criado pela tarefa Ações do GitHub dos Aplicativos Web Estáticos do Azure ou Pipelines do Azure.
Meu aplicativo React falha ao construir com a mensagem "Tratando avisos como erros porque process.env.CI = true". Como faço para corrigir esse erro?
Se seu aplicativo usa create-react-app, seu comando build trata avisos como erros ao ser executado em um ambiente de integração contínua (CI), como Ações do GitHub ou Pipelines do Azure. Se você tiver avisos em seu aplicativo, ele não será compilado. Para corrigir esses problemas, modifique seu aplicativo para remover os avisos. Se você quiser que a compilação seja bem-sucedida, mesmo que haja avisos, atualize o script de compilação em package.json para desdefinir a variável de CI ambiente:
"scripts": {
"build": "CI= react-scripts build"
}
Como faço para alterar a ramificação no GitHub?
Para alterar a ramificação a partir da qual criar e implantar, atualize os nomes das ramificações no fluxo de trabalho do GitHub do seu aplicativo. Por exemplo, se você quiser alterar seu aplicativo para criar e implantar a partir de uma ramificação chamada release, atualize a on seção 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 visualização, talvez seja necessário redefinir o token de implantação.
Tenho que executar a ação/tarefa Static Web Apps em um agente de compilação do Linux GitHub Actions ou Azure Pipelines?
O mecanismo de compilação dos Aplicativos Web Estáticos do Azure é executado em um contêiner do Linux Docker, portanto, só pode ser executado em um agente de compilação do Linux.
Como implanto um aplicativo que usa o Git Large File Storage (LFS)?
No fluxo de trabalho do GitHub, configure a Ação para habilitar o actions/checkout LFS:
- uses: actions/checkout@v2
with:
submodules: true
lfs: true
Tenho que limpar manualmente ou invalidar o cache após uma implantação?
Os Aplicativos Web Estáticos do Azure lidam automaticamente com a invalidação de cache. Quando uma implantação é concluída, todas as solicitações recebem a versão mais recente dos seus arquivos. No entanto, os arquivos ainda podem ser armazenados em cache nos navegadores dos usuários ou em uma CDN, se você tiver configurado uma. Para controlar como os navegadores e CDNs armazenam seu conteúdo em cache, configure os cabeçalhos apropriados no arquivo de configuração do seu aplicativo.
Posso usar ambientes de pré-produção se implantar com o Azure Pipelines?
Atualmente, os ambientes de pré-produção são suportados apenas para as Ações do GitHub.
Hosting
Os Static Web Apps suportam domínios personalizados e certificados TLS?
Você pode configurar seu aplicativo para usar domínios personalizados, incluindo domínios do apex. Os Aplicativos Web estáticos fornecem automaticamente um certificado TLS gratuito quando você adiciona um domínio personalizado. Para saber mais, consulte 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 responseOverridesseção do arquivo de configuração.
Como posso garantir que a minha aplicação é implementada numa 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 gerenciado do Azure Functions é implantado. Se precisar do seu aplicativo Functions em uma região que não ofereça suporte a funções gerenciadas, você poderá usar o recurso Traga seu próprio aplicativo Functions com um aplicativo Functions implantado separadamente.
Como configuro meu aplicativo Web estático atrás do Gateway de Aplicativo do Azure ou de uma CDN como o Azure Front Door?
Os Aplicativos Web Estáticos do Azure incluem a distribuição global dos ativos estáticos do seu aplicativo. Se quiser maximizar sua presença global ou precisar de recursos avançados, você pode adicionar uma rede de distribuição de conteúdo dedicada (CDN) ou o Gateway de Aplicativo do Azure.
Para restringir o tráfego a uma CDN específica, configure a CDN para adicionar um cabeçalho contendo um valor secreto predefinido a cada solicitação e configure os Aplicativos Web estáticos para exigir o cabeçalho. Para restringir o tráfego a um Gateway de Aplicativo do Azure, configure seu aplicativo para permitir apenas o tráfego do IP do Gateway de Aplicativo.
Além disso, configure seu aplicativo para permitir o encaminhamento dos nomes de host da CDN ou do Application Gateway.
Para saber mais sobre como configurar o Azure Front Door, consulte este tutorial.
Como faço para ativar a compactação Gzip ou Brotli?
Para ativos com extensões de arquivo de formatos de texto populares, como .html, .csse .js, os Aplicativos Web Estáticos do Azure servem automaticamente versões compactadas com Gzip ou Brotli de seus ativos estáticos se o cliente oferecer suporte a isso.
Para outros tipos de ficheiros, as Aplicações Web Estáticas permitem-lhe incluir uma versão comprimida de Brotli do seu ficheiro com uma .br extensão. Por exemplo, se você tiver um arquivo não compactado chamado app.wasm, poderá adicionar uma versão compactada nomeada app.wasm.br ao seu aplicativo. Esta versão é servida automaticamente se um cliente que suporta solicitações app.wasmBrotli.
Por que meu aplicativo Web estático retorna um erro 404 quando acesso uma rota existente?
A maioria das estruturas de frontend, como React, Angular ou Blazor WebAssembly, usa o roteamento do lado do cliente para lidar com a navegação. As rotas do lado do cliente são conhecidas apenas pelo aplicativo em execução no navegador. Se você solicitar uma rota do lado do cliente de Aplicativos Web estáticos, ela 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 seu aplicativo.
Configuração
Como configuro variáveis de ambiente para meu aplicativo?
Há diferentes tipos de variáveis de ambiente que você pode definir para seu aplicativo. Configure 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 usadas pela API da sua aplicação, use as definições da aplicação. Para saber mais, consulte Visão geral da configuração.
As Aplicações Web Estáticas suportam identidade gerida?
Os Aplicativos Web estáticos suportam identidade gerenciada, mas são usados apenas para recuperar segredos de autenticação do Cofre de Chaves.
Se você precisar de referências de identidade gerenciada ou Cofre de Chaves em sua API, use o recurso traga seu próprio aplicativo Functions para usar um aplicativo Functions separado que use identidade gerenciada.
Autenticação
Quantos utilizadores podem iniciar sessão na minha aplicação Web estática?
As Aplicações Web Estáticas não têm um limite para o número de utilizadores que podem iniciar sessão na sua aplicação. Você pode atribuir funções personalizadas a até 25 usuários usando o sistema de convites interno. Se você precisar atribuir funções personalizadas a mais usuários, poderá usar uma função de API para atribuir funções programaticamente.
Como faço para usar a recuperação do token de acesso de um usuário ou declarações do provedor de identidade?
Você pode recuperar o token de acesso e as declarações do usuário ao usar uma função de API para gerenciamento de funções.
Estou limitado a usar um único provedor de identidade?
Ao usar a autenticação interna de aplicativos Web estáticos, os usuários podem fazer login com qualquer um dos provedores de identidade suportados. Se quiser impedir que os utilizadores iniciem sessão com um fornecedor de identidade específico, pode bloqueá-lo.
Se você estiver usando autenticação personalizada, poderá configurar um ou mais provedores de identidade.
Funções da API
Como faço para escrever minhas APIs usando uma versão de idioma ou idioma que os Static Web Apps não suportam?
Os aplicativos de função gerenciada de Aplicativos Web estáticos não oferecem suporte a todos os idiomas ou versões de idioma suportados pelo Azure Functions. Você pode usar o recurso trazer seu próprio aplicativo Functions para vincular um aplicativo Functions separado ao seu aplicativo Web estático.
Como faço para criar funções sem servidor que respondem a eventos diferentes de HTTP?
Os aplicativos de função gerenciada em Static Web Apps são otimizados para cenários de API e suportam apenas gatilhos HTTP. Se você precisar usar outros tipos de gatilho suportados pelo Azure Functions, como para trabalhos cron ou Durable Functions para fluxos de trabalho com monitoração de estado, você pode usar o recurso traga seu próprio aplicativo Functions para vincular um aplicativo Functions separado ao seu Aplicativo Web estático.
Geral
Quais são as limitações do plano Free?
O plano gratuito inclui muitos dos mesmos recursos do plano Standard, como distribuição global, domínios personalizados, certificados TLS gratuitos, funções de API gerenciadas e muito mais. No entanto, se você precisar de mais largura de banda, um contrato de nível de serviço (SLA) ou recursos avançados, considere o plano Padrão. Para saber mais, consulte Planos e cotas de hospedagem.
Posso alterar o plano de hospedagem depois de criar meu aplicativo?
Você pode fazer upgrade do plano Gratuito para o Padrão 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 Standard.
Posso desenvolver meu aplicativo Web estático localmente sem implantá-lo?
A maioria das estruturas frontend fornece um servidor de desenvolvimento para executar seu aplicativo localmente. No entanto, se você quiser usar funções de autenticação ou API, pode ser difícil testar todos os recursos do seu aplicativo sem implantá-lo no Azure. Para executar seu aplicativo localmente, você pode usar a interface de linha de comando (CLI) dos Aplicativos Web Estáticos, que emula a experiência na nuvem, incluindo autenticação, e se integra às Ferramentas Principais do Azure Functions para executar suas funções de API. Há também uma extensão de código do Visual Studio de aplicativos Web estáticos que você pode usar para implantar seu aplicativo no Azure.
Como posso obter ajuda ou sugerir uma nova funcionalidade?
Se precisar de ajuda ou tiver uma sugestão, você pode criar um problema no repositório GitHub do Static Web Apps.
Para obter ajuda imediata com um problema, entre em contato com o suporte do Azure.