Exercício – Usar uma conta de armazenamento para hospedar um site estático

  • 15 minutos

Agora que a API é implantada na nuvem, como engenheiro da Tailwind Traders, você precisa atualizar o código do cliente e implantá-lo para dar suporte às mensagens do SignalR que chegam para o Azure Functions.

Atualizar o aplicativo cliente

  1. No Visual Studio Code, abra ./start/client/src/index.js e substitua todo o código para escutar mensagens do SignalR. O código obtém a lista de estoque inicial com uma solicitação HTTP e, em seguida, ouve atualizações da conexão do SignalR. Quando uma ação é atualizada, o cliente atualiza o preço da ação na interface do usuário.

    import './style.css';
import { BACKEND_URL } from './env';

const app = new Vue({
    el: '#app',
    data() {
        return {
            stocks: []
        }
    },
    methods: {
        async getStocks() {
            try {

                const url = `${BACKEND_URL}/api/getStocks`;
                console.log('Fetching stocks from ', url);

                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status} - ${response.statusText}`);
                }
                app.stocks = await response.json();
            } catch (ex) {
                console.error(ex);
            }
        }
    },
    created() {
        this.getStocks();
    }
});

const connect = () => {

    const signalR_URL = `${BACKEND_URL}/api`;
    console.log(`Connecting to SignalR...${signalR_URL}`)

    const connection = new signalR.HubConnectionBuilder()
                            .withUrl(signalR_URL)
                            .configureLogging(signalR.LogLevel.Information)
                            .build();

    connection.onclose(()  => {
        console.log('SignalR connection disconnected');
        setTimeout(() => connect(), 2000);
    });

    connection.on('updated', updatedStock => {
        console.log('Stock updated message received', updatedStock);
        const index = app.stocks.findIndex(s => s.id === updatedStock.id);
        console.log(`${updatedStock.symbol} Old price: ${app.stocks[index].price}, New price: ${updatedStock.price}`);
        app.stocks.splice(index, 1, updatedStock);
    });

    connection.start().then(() => {
        console.log("SignalR connection established");
    });
};

connect();

  2. Abra ./start/client/index.html e cole o código a seguir no lugar do DIV atual com o ID do app.

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css"
        integrity="sha256-8B1OaG0zT7uYA572S2xOxWACq9NXYPQ+U5kHPV1bJN4=" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <title>Stock Notifications | Enable automatic updates in a web application using Azure Functions and SignalR</title>
</head>

<body>
    <div id="app" class="container">
        <h1 class="title">Stocks</h1>
        <div id="stocks">
            <div v-for="stock in stocks" class="stock">
                <transition name="fade" mode="out-in">
                    <div class="list-item" :key="stock.price">
                        <div class="lead">{{ stock.symbol }}: ${{ stock.price }}</div>
                        <div class="change">Change:
                            <span
                                :class="{ 'is-up': stock.changeDirection === '+', 'is-down': stock.changeDirection === '-' }">
                                {{ stock.changeDirection }}{{ stock.change }}
                            </span>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"
        integrity="sha256-chlNFSVx3TdcQ2Xlw7SvnbLAavAQLO0Y/LBiWX04viY=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>
    <script src="bundle.js" type="text/javascript"></script>
</body>
</html>

    Essa marcação inclui um elemento de transição, que permite ao Vue.js executar uma animação sutil conforme os dados das ações mudam. Quando uma ação é atualizada, o bloco desaparece e volta a ser exibido rapidamente. Dessa forma, se a página estiver cheia de dados de ações, os usuários poderão ver facilmente quais ações sofreram mudanças.

  3. Adicione o seguinte bloco de script logo acima da referência a bundle.js para incluir o SDK do SignalR.

    <script src="https://cdn.jsdelivr.net/npm/@aspnet/signalr@1.0.3/dist/browser/signalr.js"></script>

Atualizar o .env do cliente

  1. Criar um arquivo de variáveis de ambiente na start/client pasta chamada .env.

  2. Adicione uma variável nomeada BACKEND_URL e adicione seu valor copiado da unidade 5.

    BACKEND_URL=https://YOUR-FUNTIONS-APP-NAME.azurewebsites.net

Criar um recurso de aplicativos Web estáticos do Azure e implantar o cliente

  1. Abra o portal do Azure para criar um novo recurso de Aplicativos Web Estáticos do Azure.

  2. Use as informações a seguir para concluir a guia Noções básicas de criação de recursos.

    Nome Valor
    Subscrição Selecione sua assinatura.
    Grupo de recursos Use o grupo de recursos stock-prototype.
    Nome do aplicativo Web estático Coloque seu nome após client. Por exemplo, client-jamie.
    Tipo de plano de hospedagem Selecione Gratuitamente.
    Fonte de implantação Selecione o GitHub.
    Organização Selecione sua conta do GitHub
    Repositório Pesquise e selecione mslearn-advocates.azure-functions-and-signalr.
    Ramo Selecione a ramificação principal.
    Predefinições de build Selecione Vue.js.
    Localização do aplicativo Digite /start/client.
    Local da API Deixe em branco.
    Local de saída Digite dist.

  3. Selecione o arquivo de fluxo de trabalho de visualização para examinar as configurações de implantação. A etapa Compilar e Implantar deve ser semelhante à seguinte:

    - 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_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: "/solution/client" # App source code path
    api_location: "" # Api source code path - optional
    output_location: "dist" # Built app content directory - optional
    ###### End of Repository/Build Configurations ######

  4. Selecione Fechar para salvar a alteração.

  5. Selecione Examinar + Criar e, em seguida, selecione Criar para criar o recurso. Aguarde a implantação ser concluída antes de continuar.

  6. Selecione Ir para o recurso para abrir o novo recurso de Aplicativo Web Estático do Azure.

  7. Na página Visão geral , copie o valor da URL . Esse valor é a URL base do aplicativo Web estático implantado.

Adicionar a variável BACKEND_URL ao repositório

O fluxo de trabalho precisa ter a variável de ambiente BACKEND_URL configurada para a URL base do aplicativo Azure Functions implantado na unidade 5.

  1. Em um navegador para a bifurcação do GitHub do repositório de exemplo, selecione Configurações –> Segurança –> Segredos e variáveis –> Ações.

  2. Selecione Variáveis e selecione Nova variável de repositório.

  3. Use a tabela a seguir para criar a variável:

    Nome Valor
    BACKEND_URL A URL base do aplicativo Azure Functions implantado. A URL deve estar no formato de https://<FUNCTIONS-RESOURCE-NAME>.azurewebsites.net

  4. Selecione Adicionar variável para salvar a variável no repositório.

Editar o fluxo de trabalho de implantação do GitHub

  1. No terminal do Visual Studio Code, extraia o novo arquivo de fluxo de trabalho do fork (origem).

    git pull origin main

  2. Abra o arquivo .github/workflows/azure-static-web-apps-*.yml.

  3. Altere o name valor na parte superior do arquivo para Client.

  4. Edite a etapa Compilar e Implantar para adicionar a propriedade env para a variável de BACKEND_URL ambiente.

    ```yaml
    name: Client - Azure Static Web Apps CI/CD
    
    on:
      push:
        branches:
          - main
      pull_request:
        types: [opened, synchronize, reopened, closed]
        branches:
          - main
    
    jobs:
      build_and_deploy_job:
        if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
        runs-on: ubuntu-latest
        name: Build and Deploy Job
        steps:

          - uses: actions/checkout@v3
            with:
              submodules: true
              lfs: false

          #Debug only - Did GitHub action variable get into workflow correctly?
          - name: Echo
            run: |
              echo "BACKEND_URL: ${{ vars.BACKEND_URL }}"

          - 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_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: "/solution/client" # 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: 
              BACKEND_URL: ${{ vars.BACKEND_URL }}

      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_123 }}
              action: "close"
    ```

  5. Salve e envie por push as alterações para o repositório.

    git add .
git commit -m "Add BACKEND_URL environment variable"
git push origin main

  6. Abra a guia Ações no repositório de fork do GitHub para inspecionar a implantação.

Atualizar CORS no aplicativo de funções

Por padrão, os aplicativos de funções não permitem solicitações CORS. Você precisa atualizar o aplicativo de funções para permitir solicitações do aplicativo Web estático.

  1. No portal do Azure, navegue até o aplicativo do Azure Functions criado na unidade 5.

  2. No menu à esquerda, selecione API –> CORS.

  3. Escolha Habilitar Acesso-Controle-Permitir-Credenciais.

  4. Adicione o valor que você copiou para a URL do recurso de Aplicativos Web Estáticos.

    Propriedade Valor
    Origens permitidas A URL base do aplicativo Web estático implantado.

  5. Selecione Salvar para salvar as configurações do CORS.

Testar a implantação do cliente

  1. Em um navegador, use a URL do aplicativo Web estático implantado para abrir o cliente.

  2. No portal do Azure, abra as ferramentas de desenvolvedor e observe o Console para ver quando os dados do SignalR referentes ao estoque atualizado são recebidos. Lembre-se de que os dados do SignalR não são solicitações HTTP, portanto, as atualizações não aparecem na guia Rede.

Parabéns! Você implantou seu aplicativo de estoque aprimorado com o SignalR!