Criar um aplicativo Web estático com uma API sem servidor

Artigo
10/21/2023

Saiba como executar localmente e, em seguida, 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 Azure Functions Node.js. Como este artigo usa uma versão de visualização do Azure Functions, ele é implantado como um aplicativo separado do aplicativo Web estático.

Aprenda a:

Executar localmente um aplicativo Web estático (SWA) com um aplicativo Azure Function
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 backend-endis fornecido pela CLI do aplicativo Web estático fornece:

A URL em React, , /api/todonão especifica o servidor ou o número da porta para a API. As solicitações que usam essa URL são bem-sucedidas localmente porque a CLI SWA gerencia o proxy para você.
Um emulador de autenticação local ao acessar /.auth/login/<provider>
Gestão e autorização de rotas

Autenticação neste exemplo

A autenticação neste exemplo é fornecida para usuários front-end do serviço Aplicativos Web Estáticos do Azure:

Login/Terminar sessão
Conteúdos públicos e privados

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 se destina à produção.

Você encontrará vários locais no código que não seguem as práticas recomendadas de segurança. Por exemplo, o código usa console.log para gravar no console do navegador.

Ao mudar para um ambiente de produção, você deve revisar e remover qualquer código que viole as práticas recomendadas de segurança para sua organização.

1. Prepare seu ambiente de desenvolvimento

Crie as seguintes contas:

Subscrição 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:

Nó.js v18+
Código do Visual Studio (VS Code)
CLI de Aplicativos Web Estáticos do Azure (SWA) instalada globalmente com -g sinalizador
Azure Functions Core Tools v4.0.5095+ (se executado localmente) instalado globalmente com -g o sinalizador
TypeScript v4+

2. Fork o repositório de exemplo no GitHub

Você precisa ter sua própria bifurcação do repositório de exemplo para concluir a implantação do GitHub. Durante o processo de bifurcação, você só precisa copiar o main ramo.

Fork o 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 exemplo 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, crie e execute o 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 with 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 você encontrar erros, o que pode acontecer dependendo da versão de vários pacotes e do seu ambiente, corrija os erros 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ê vê 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 o URL por proxy, http://localhost:4280. Deverá ver a seguinte página:
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. Introduza qualquer nome de utilizador falso e não altere o resto dos campos.

Depois que um usuário é autenticado, o front-end exibe informações privadas , como as variáveis de ambiente da API.

Screenshot of local React app with authentication complete.

O código-fonte do aplicativo Azure Function v4 para esta 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 é 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 de busca 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::

Tab:Configuração	valor
Noções básicas: Subscrição	selecione a subscrição que quer utilizar.
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 da função	Insira um nome globalmente exclusivo, como com 3 caracteres aleatórios adicionados no final, como `swa-apiswa-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 esta definição. 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: Configurações de ações do GitHub: implantação contínua	Selecione `Enable`.
Implantação: conta do GitHub	Selecione sua conta no GitHub.
Implantação: Organização	Selecione sua conta do GitHub, que você usou quando bifurcou o repositório de exemplo.
Implantação: repositório	Selecione o nome do repositório bifurcado, `azure-typescript-e2e-apps`.
Implantação: Filial	Selecione `main`.
Etiquetas	Não mude nada.
Rever + criar	Selecione `Create`.

A etapa adiciona um arquivo de fluxo de trabalho yaml do GitHub ao seu 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 tempo de execução do Nó de Função do Azure.js v4 com nome AzureWebJobsFeatureFlags e valor EnableWorkerIndexing.
Selecione Guardar para guardar a definiçã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 são destacadas no seguinte bloco yaml 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

Mudança de propriedade	Propósito
`name`	Encurte o nome para que você possa encontrá-lo facilmente na lista de ações do GitHub da sua bifurcação.
`paths`	Adicione a seção de 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 acionar 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.
etapa nomeada `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-o 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 da bifurcação.
Aguarde até que a ação seja concluída com êxito antes de continuar.
Em um navegador da Web, use o ponto de extremidade de API externo do aplicativo de função para verificar se o aplicativo 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 somente o aplicativo front-end.

Abra o portal do Azure e inicie sessão com a sua conta do Azure: Portal do Azure.

Use as seguintes informações para concluir as etapas de criação:

Prompt	Definição
Subscrição	selecione a subscrição que quer utilizar.
Grupo de Recursos	Selecione `Create new` e insira um novo para o grupo de recursos, como `first-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 - fonte	Selecione `GitHub`
Detalhes da implantação - GitHub	Faça login no GitHub, se necessário.
Detalhes da implantação - Organização	Selecione sua conta no GitHub.
Detalhes da implantação - Repositório	Selecione o repositório bifurcado chamado `azure-typescript-e2e-apps`.
Detalhes da implantação - Filial	Selecione a `main` ramificação.
Detalhes da construção - Build Presents	Selecione `Custom`.
Detalhes da compilação - Localização da aplicação	Introduzir `/app-react-vite`.
Detalhes da construção - Localização da api	Deixar em branco
Detalhes da construção - Local de saída	Insira o local do diretório de saída do front-end, `dist`.

Selecione Rever + criar e, em seguida, selecione Criar.
Quando o recurso for criado, selecione o Go to resource botão.
Na página Visão geral, anote o URL do seu aplicativo Web estático. Você precisa disso na próxima seção ao definir a configuração CORS da Função Azure.
O processo de criação cria um arquivo de fluxo de trabalho yaml do GitHub em seu repositório bifurcado. 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 pela criação e implantação do 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"

Mudança de propriedade	Propósito
`paths`	Adicione a seção de 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 acionar a implantação manualmente.
`workflow_dispatch`	Adicione `workflow_dispatch`somente enquanto aprende o processo de implantação e depurar 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 Vite.
`env`	Adicione as variáveis de ambiente necessárias para incluir a URL da API do Azure Function 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 esta amostra, pois ela tem efeitos colaterais não intencionais.

Salve o arquivo e adicione, confirme e envie-o 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 da bifurcação para seu aplicativo Web estático.
Seu aplicativo front-end é implantado no Azure. Agora você precisa configurar o aplicativo Azure Function para permitir solicitações CORS de seu aplicativo Web estático.

7. Configurar o CORS para seu aplicativo Azure Function

Ao usar um aplicativo Azure Function separado, em vez de um aplicativo Function gerenciado, você precisa configurar o CORS para permitir solicitações do seu aplicativo Web estático.

No portal do Azure, abra seu aplicativo Azure Function.
Na seção API -> CORS, adicione o 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 GitHub, exclua seu repositório bifurcado.

Resolução de Problemas

Este exemplo mantém uma lista de problemas e resoluções conhecidos. Se o seu problema não estiver listado, abra um problema.

URLs públicas de aplicativos Web estáticos e aplicativos funcionais

Você sempre pode encontrar a URL do seu aplicativo Web estático e a URL do seu aplicativo de função no portal do Azure, na página Visão geral de cada recurso. Esses URLs são públicos por padrão.