Criar um aplicativo Web estático com uma API sem servidor
Saiba como executar localmente e implantar um aplicativo Web estático com uma API sem servidor no Azure. Este tutorial usa a versão de visualização do modelo de programação mais recente do Nó do Azure Functions.js programação. Como este artigo usa uma versão de visualização do Azure Functions, ele é implantado como um aplicativo separado do aplicativo Web estático.
Saiba como:
- Executar localmente um aplicativo Web estático (SWA) com um aplicativo Função do Azure
- Proxy local de solicitações front-end para API back-end local usando a CLI SWA.
- Implante e execute o mesmo código remotamente.
O proxy entre o front-end e o back-endis fornecido pela CLI do aplicativo Web estático fornece:
- A URL no React,
/api/todo
, não especifica o número do servidor ou da porta para a API. Solicitações que usam essa URL são bem-sucedidas localmente porque a CLI do SWA gerencia o proxy para você. - Um emulador de autenticação local ao acessar
/.auth/login/<provider>
- Gerenciamento de rotas e autorização
Autenticação neste exemplo
A autenticação neste exemplo é fornecida para usuários front-end do serviço Aplicativos Web Estáticos do Azure:
- Logon/Logoff
- Conteúdo público e privado
Código-fonte neste exemplo
O código-fonte neste exemplo destina-se a aprender a criar e implantar um aplicativo Web estático com uma API sem servidor. O código não é para produção.
Você encontrará vários lugares no código que não seguem as práticas recomendadas de segurança. Por exemplo, o código é usado console.log
para gravar no console do navegador.
Ao migrar para um ambiente de produção, você deve revisar e remover qualquer código, o que viola as práticas recomendadas de segurança para sua organização.
1. Preparar o ambiente de desenvolvimento
Crie as seguintes contas:
- Assinatura do Azure - Criar uma conta gratuita do Azure
- Conta do GitHub - Você precisa de uma conta do GitHub para implantar neste tutorial.
Instale o seguinte no computador de desenvolvimento local:
- Node.js v18+
- VS Code (Visual Studio Code)
- CLI de Aplicativos Web Estáticos (SWA) do Azure instalada globalmente com
-g
sinalizador - Azure Functions Core Tools v4.0.5095+ (se estiver sendo executado localmente) instalado globalmente com
-g
sinalizador - TypeScript v4+
2. Faça o fork do repositório de amostra no GitHub
Você precisa ter sua própria bifurcação do repositório de amostra para concluir a implementação do GitHub. Durante o processo de bifurcação, você só precisa copiar a main
ramificação.
Faça uma bifurcação no repositório de exemplo: https://github.com/Azure-Samples/azure-typescript-e2e-apps
.
3. Clone o repositório de amostras bifurcado
Em um terminal bash, clone seu repositório bifurcado para o computador local. Não clone o repositório de amostra original. Um exemplo de URL é
https://github.com/YOUR-ACCOUNT-NAME/azure-typescript-e2e-apps
git clone YOUR-FORKED-REPO-URL
Instale dependências para o aplicativo front-end local:
cd app-react-vite && npm install
Instale dependências para o aplicativo back-end local:
cd ../api-inmemory && npm install && cd ..
4. Opcional, compilar e executar aplicativo local
O repositório de exemplo tem várias versões dos aplicativos front-end e back-end. As etapas a seguir usam a versão React 18 (Vite) do front-end e a versão do Azure Function v4 com Node.js do back-end com as /status
rotas e /todo
API.
Na raiz do aplicativo de exemplo, use a CLI SWA com o
./swa-cli.config.json
arquivo para criar os aplicativos front-end e back-end:swa build
Se surgirem erros, o que pode acontecer dependendo da versão de vários pacotes e de seu ambiente, corrija-os antes de continuar. É importante saber que seu projeto é compilado localmente com êxito antes de passar para a implantação nos Aplicativos Web Estáticos do Azure.
Na raiz do aplicativo de exemplo, use a CLI SWA para iniciar os aplicativos com um proxy.
swa start
Quando você vir as seguintes linhas no terminal bash, o projeto foi iniciado com êxito.
[swa] Serving static content: [swa] /workspaces/azure-typescript-e2e-apps/app-react-vite/dist [swa] [swa] Serving API: [swa] /workspaces/azure-typescript-e2e-apps/api-inmemory [swa] [swa] Azure Static Web Apps emulator started at http://0.0.0.0:4280. Press CTRL+C to exit.
Abra um navegador da Web para a URL por proxy,
http://localhost:4280
. Você deverá ver a página a seguir:Você pode entrar usando a autenticação fornecida pela CLI SWA. O processo simula a autenticação em aplicativos Web estáticos do Azure baseados em nuvem. O código front-end usa o
/.auth/me
ponto de extremidade para obter a identidade do usuário. Digite qualquer nome de usuário falso e não altere o restante dos campos.Depois que um usuário é autenticado, o front-end exibe informações privadas , como as variáveis de ambiente da API.
O código-fonte do aplicativo Azure Function v4 para essa API é:
import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions"; import { name, version } from '../../package.json'; function isObject(v) { return '[object Object]' === Object.prototype.toString.call(v); }; function sortJson(o){ if (Array.isArray(o)) { return o.sort().map(sortJson); } else if (isObject(o)) { return Object .keys(o) .sort() .reduce(function(a, k) { a[k] = sortJson(o[k]); return a; }, {}); } return o; } export async function status(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> { context.log(`Http function processed request for url "${request.url}"`); const sortedEnv = sortJson(process.env); return { jsonBody: { name, version, env: sortedEnv, requestHeaders: request.headers }}; }; app.http('status', { route: "status", methods: ['GET'], authLevel: 'anonymous', handler: status });
Expanda as seções pública e privada para ver o conteúdo da API ser exibido.
5. Criar um novo aplicativo do Azure Functions
A seção anterior de execução do aplicativo Web estático com a API era opcional. As seções restantes do artigo são necessárias para implantar o aplicativo e a API na nuvem do Azure.
Para usar a versão de visualização do tempo de execução do Azure Functions v4, você precisa criar um novo aplicativo do Azure Functions. Seu aplicativo Web estático também precisa ser recriado e reimplantado para usar o URI do aplicativo Azure Functions nas solicitações Buscar para a API em vez de usar uma API por proxy e gerenciada.
Em um navegador da Web, abra o portal do Azure para criar um novo aplicativo do Azure Functions: Criar novo aplicativo
Use as seguintes informações para criar o aplicativo de função::
guia:Configuração Valor Noções básicas: Assinatura Selecione a assinatura que deseja usar. Noções básicas: Grupo de Recursos Crie um novo grupo de recursos, como first-static-web-app-with-api
. O nome não é usado na URL pública do aplicativo. Os grupos de recursos ajudam você a agrupar e gerenciar recursos relacionados do Azure.Noções básicas: Detalhes da instância: Nome do aplicativo de função Insira um nome globalmente exclusivo, como swa-api
com 3 caracteres aleatórios adicionados no final, comoswa-api-123
.Noções básicas: detalhes da instância: código ou contêiner Selecione Code
.Noções básicas: Detalhes da instância: pilha de tempo de execução Selecione Node.js
.Noções básicas: Detalhes da instância: pilha de tempo de execução Selecione 18LTS
.Noções básicas: Sistema operacional Selecione Linux
.Noções básicas: Hospedagem Selecione Consumption
.Armazenamento: Conta de armazenamento Não altere isso. Uma nova conta de Armazenamento do Azure é criada para ajudar com eventos de função. Rede Não mude nada. Monitoramento: Application Insights: Habilitar o Application Insights Selecione Yes
. Não altere o nome padrão fornecido.Implantação: Ações do GitHub Configurações: implantação contínua Selecione Enable
.Implantação: conta do GitHub Selecione sua conta do GitHub. Implantação: Organização Selecione sua conta do GitHub, que você usou ao bifurcar o repositório de exemplo. Implantação: Repositório Selecione o nome do repositório bifurcado, azure-typescript-e2e-apps
.Implantação: Ramificação Selecione main
.Marcações Não mude nada. Examinar + criar Selecione Create
.A etapa adiciona um arquivo de fluxo de trabalho yaml do GitHub ao repositório bifurcado.
Quando o recurso for criado, selecione o
Go to resource
botão.Selecione Configurações -> Configuração e adicione uma definição de configuração para o Nó de Função do Azure.js tempo de execução v4 com nome
AzureWebJobsFeatureFlags
e valorEnableWorkerIndexing
.Clique em Salvar para salvar a configuração.
Em um terminal bash, use o git para puxar o novo arquivo de fluxo de trabalho yaml do repositório bifurcado do GitHub para o computador local.
git pull origin main
No Visual Studio Code, abra o novo arquivo de fluxo de trabalho yaml localizado em
./.github/workflows/
.O arquivo de fluxo de trabalho padrão fornecido para você assume que o código-fonte da função está na raiz do repositório e é o único aplicativo no repositório, mas esse não é o caso deste exemplo. Para corrigir isso, edite o arquivo. As linhas a serem editadas estão destacadas no bloco yaml a seguir e explicadas abaixo:
# Docs for the Azure Web Apps Deploy action: https://github.com/azure/functions-action # More GitHub Actions for Azure: https://github.com/Azure/actions # Deploy Azure Functions Node.js v4 runtime # with api-inmemory subdir name: Azure Function App - api-inmemory on: push: branches: - main paths: - 'api-inmemory/**' workflow_dispatch: env: AZURE_FUNCTIONAPP_PACKAGE_PATH: 'api-inmemory' # set this to the path to your web app project, defaults to the repository root NODE_VERSION: '18.x' # Azure Functions v4 runtime requires 18 VERBOSE: true # For debugging jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: 'Checkout GitHub Action' uses: actions/checkout@v2 - name: Setup Node ${{ env.NODE_VERSION }} Environment uses: actions/setup-node@v1 with: node-version: ${{ env.NODE_VERSION }} - name: 'Resolve Project Dependencies Using Npm' shell: bash run: | pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}' npm install npm run build --if-present npm run test --if-present popd - name: 'Upload artifact for deployment job' # For debugging uses: actions/upload-artifact@v3 with: name: azure-function-v4-app path: | ${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}} !${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}/node_modules !${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}}/dist - name: 'Run Azure Functions Action' uses: Azure/functions-action@v1 id: fa with: app-name: 'swa-api' # change this to your Azure Function app name slot-name: 'Production' package: ${{env.AZURE_FUNCTIONAPP_PACKAGE_PATH}} publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_123 }} scm-do-build-during-deployment: false enable-oryx-build: false
Alteração da propriedade Finalidade name
Encurte o nome para que você possa encontrá-lo facilmente na lista de ações do GitHub do seu fork. paths
Adicione a seção caminhos para limitar a implantação a ser executada somente quando o código da API do Azure Functions for alterado. Ao editar o arquivo de fluxo de trabalho, você pode disparar a implantação manualmente. AZURE_FUNCTIONAPP_PACKAGE_PATH
Ao usar uma subdireção para o código-fonte, esse precisa ser o caminho e o nome do subdiretório. VERBOSE
Essa configuração é útil para depurar o processo de compilação e implantação. passo nomeado Upload artifact for deployment job
Esta etapa cria um artefato para download. Isso é útil ao depurar exatamente quais arquivos são implantados em sua Função do Azure. O
Upload artifact for deployment job
é opcional. Ele é usado para entender e depurar quais arquivos são implantados no Azure Functions ou para usar esses arquivos em um ambiente separado.Salve o arquivo e adicione, confirme e envie de volta para o GitHub com o git:
git add . git commit -m "fix the workflow for a subdir" git push origin main
Em um navegador, execute novamente o fluxo de trabalho no GitHub na área de ações do garfo.
Aguarde a conclusão bem-sucedida da ação antes de continuar.
Em um navegador da Web, use o ponto de extremidade da API externa do aplicativo de função para verificar se o aplicativo foi implantado com êxito.
https://YOUR-FUNCTION-APP-NAME.azurewebsites.net/api/todo
O resultado JSON retornado para os dados na memória é:
{ "1": "Say hello" }
Anote o URL da sua função. Você precisa disso na próxima seção.
Você sabe que seu aplicativo Azure Function está funcionando na nuvem. Agora você precisa criar seu aplicativo Web estático na nuvem para usar a API.
6. Criar um novo aplicativo Web Estático do Azure
Esse processo de criação implanta o mesmo repositório de exemplo bifurcado do GitHub no Azure. Você configura a implantação para usar apenas o aplicativo front-end.
Abra o portal do Azure e entre com sua conta do Azure: portal do Azure.
Use as informações a seguir para concluir as etapas de criação:
Prompt Configuração Subscription Selecione a assinatura que deseja usar. Grupo de recursos Selecione Create new
e insira um novo para o grupo de recursos, comofirst-static-web-app
. O nome não é usado na URL pública do aplicativo. Os grupos de recursos ajudam a agrupar recursos usados para um único projeto.Tipo de plano de hospedagem Selecione Free
Azure Functions e detalhes de preparo Não altere o padrão. Você não está implantando a API de função no aplicativo Web estático. Detalhes da implantação - origem Selecione GitHub
Detalhes da implantação - GitHub Faça login no GitHub, se necessário. Detalhes da implantação - Organização Selecione sua conta do GitHub. Detalhes da implementação - Repositório Selecione o repositório bifurcado chamado azure-typescript-e2e-apps
.Detalhes da implantação - Branch Selecione a main
ramificação.Detalhes da compilação - Build Presents Selecione Custom
.Detalhes da compilação - Localização do aplicativo Digite /app-react-vite
.Detalhes da compilação - Localização da API Deixar em branco Detalhes da compilação - Local de saída Insira o local do diretório de saída do front-end, dist
.Selecione Examinar + criare Criar.
Quando o recurso for criado, selecione o
Go to resource
botão.Na página Visão geral, anote a URL do seu aplicativo Web estático. Você precisa disso na próxima seção ao definir a configuração CORS da Função do Azure.
O processo de criação cria um arquivo de fluxo de trabalho yaml do GitHub em seu repositório bifurcado do GitHub. Puxe essa alteração para baixo com o seguinte comando:
git pull origin main
A ação do GitHub encontrada em
./.github/workflows/azure-static-web-apps-*.yml
é responsável por criar e implantar o aplicativo front-end. Edite o arquivo para adicionar uma variável de ambiente para a URL da API de back-end baseada em nuvem. As linhas a serem editadas são destacadas no bloco yaml a seguir e explicadas abaixo do bloco yaml.name: Azure Static Web Apps CI/CD on: push: branches: - main paths: - 'app-react-vite/**' pull_request: types: [opened, synchronize, reopened, closed] branches: - main paths: - 'app-react-vite/**' workflow_dispatch: jobs: build_and_deploy_job: if: github.event_name == 'push' || github.event_name == 'workflow_dispatch' || (github.event_name == 'pull_request' && github.event.action != 'closed') runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkout@v2 with: submodules: true - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DUNE_123 }} repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) action: "upload" ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig app_location: "/app-react-vite" # App source code path api_location: "" # Api source code path - optional output_location: "dist" # Built app content directory - optional ###### End of Repository/Build Configurations ###### env: VITE_BACKEND_URI: https://swa-api-123.azurewebsites.net VITE_CLOUD_ENV: production close_pull_request_job: if: github.event_name == 'pull_request' && github.event.action == 'closed' runs-on: ubuntu-latest name: Close Pull Request Job steps: - name: Close Pull Request id: closepullrequest uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DUNE_123 }} action: "close"
Alteração da propriedade Finalidade paths
Adicione a seção caminhos para limitar a implantação a ser executada somente quando o código da API do Azure Functions for alterado. Ao editar o arquivo de fluxo de trabalho, você pode disparar a implantação manualmente. workflow_dispatch
Adicione workflow_dispatch
somente enquanto aprende o processo de implantação e depura quaisquer problemas na compilação do Vite. Remova essa linha, quando você continuar este código-fonte além deste artigo.if ... || github.event_name == 'workflow_dispatch'
Inclua o evento como permitido para gerar uma compilação somente enquanto aprende o workflow_dispatch
processo de implantação e depura quaisquer problemas na compilação do Vite.env
Adicione as variáveis de ambiente necessárias para incluir a URL da API de Função do Azure na compilação estática com o Vite. VITE_BACKEND_URL é a URL do seu aplicativo Azure Function. VITE_CLOUD_ENV é um parâmetro para indicar quando usar a URL VITE_BACKEND_URL. Não use NODE_ENV para este exemplo, pois ele tem efeitos colaterais não intencionais. Salve o arquivo e adicione, confirme e envie de volta para o GitHub com o git:
git add . git commit -m "fix the workflow for a subdir" git push origin main
Em um navegador, execute novamente o fluxo de trabalho no GitHub na área de ações do fork para seu aplicativo Web estático.
Seu aplicativo front-end é implantado no Azure. Agora você precisa configurar o aplicativo Função do Azure para permitir solicitações CORS de seu aplicativo Web estático.
7. Configurar o CORS para seu aplicativo Azure Function
Ao usar um aplicativo de Função do Azure separado, em vez de um aplicativo de Função gerenciado, você precisa configurar o CORS para permitir solicitações de seu aplicativo Web estático.
- No portal do Azure, abra seu aplicativo Azure Function.
- Na seção API -> CORS, adicione a URL do seu aplicativo Web estático à lista de origens permitidas.
8. Teste seu aplicativo Web estático
- Em um navegador, abra seu aplicativo Web estático.
- Interaja com o aplicativo para entrar, exibir informações públicas e privadas e sair novamente.
9. Limpe todos os recursos usados nesta série de artigos
Limpe todos os recursos criados nesta série de artigos.
- No portal do Azure, exclua seu grupo de recursos, que exclui o aplicativo Web estático e o aplicativo de função.
- No portal do GitHub, exclua seu repositório bifurcado.
Solução de problemas
Este exemplo mantém uma lista de problemas e resoluções conhecidos. Se o problema não estiver listado, abra um problema.
URLs públicas de aplicativo Web estático e aplicativo de função
Você sempre pode encontrar a URL do aplicativo Web estático e a URL do aplicativo de função no portal do Azure, na página Visão geral de cada recurso. Essas URLs são públicas por padrão.
Próximas etapas
Comentários
https://aka.ms/ContentUserFeedback.
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulteEnviar e exibir comentários de