Publicar um suplemento desenvolvido com o Código do Visual Studio

  • Artigo

Este artigo descreve como publicar um Suplemento do Office criado com o gerador Yeoman e desenvolvido com o Código do Visual Studio (VS Code) ou qualquer outro editor.

Observação

Publicar um suplemento para que outros usuários acessem o

Um Suplemento do Office é formado por um aplicativo Web e um arquivo de manifesto. O aplicativo Web define a interface do usuário e a funcionalidade do suplemento, enquanto o manifesto especifica o local do aplicativo Web e define as configurações e os recursos do suplemento.

Enquanto estiver desenvolvendo, você pode executar o suplemento no servidor Web local (localhost). Quando estiver pronto para publicá-lo para outros usuários acessarem, você precisará implantar o aplicativo Web e atualizar o manifesto para especificar a URL do aplicativo implantado.

Quando o suplemento estiver funcionando conforme desejado, você pode publicá-lo diretamente por meio de Visual Studio Code usando a extensão de Armazenamento do Azure.

Usando o Visual Studio Code para publicar

Observação

Essas etapas funcionam apenas para projetos criados com o gerador Yeoman e que usam o manifesto formatado por XML. Eles não se aplicam se você criou o suplemento usando o Kit de Ferramentas do Teams ou o criou com o gerador Yeoman e ele usa o manifesto unificado para o Microsoft 365.

  1. Abra seu projeto de sua pasta raiz em Visual Studio Code (VS Code).

  2. Selecione Exibir>Extensões (Ctrl+Shift+X) para abrir a exibição Extensões.

  3. Pesquise a extensão de Armazenamento do Azure e instale-a.

  4. Depois de instalado, um ícone do Azure será adicionado à Barra de Atividades. Selecione-a para acessar a extensão. Se a Barra de Atividades estiver oculta, abra-a selecionando Exibir Barra> deAtividades deAparência>.

  5. Selecione Entrar no Azure para entrar em sua conta do Azure. Se você ainda não tiver uma conta do Azure, crie uma selecionando Criar uma Conta do Azure. Siga as etapas fornecidas para configurar sua conta.

    Entre no botão do Azure selecionado na extensão do Azure.

  6. Depois de entrar, você verá suas contas de armazenamento do Azure aparecerem na extensão. Se você ainda não tiver uma conta de armazenamento, crie uma usando a opção Criar Conta de Armazenamento na paleta de comandos. Nomeie sua conta de armazenamento como um nome globalmente exclusivo, usando apenas 'a-z' e '0-9'. Observe que, por padrão, isso cria uma conta de armazenamento e um grupo de recursos com o mesmo nome. Ele coloca automaticamente a conta de armazenamento no oeste dos EUA. Isso pode ser ajustado online por meio de sua conta do Azure.

    Selecionando contas > de armazenamento Criar conta de armazenamento na extensão do Azure.

  7. Clique com o botão direito do mouse em sua conta de armazenamento e selecione Configurar Site Estático. Você será solicitado a inserir o nome do documento de índice e o nome do documento 404. Altere o nome do documento de índice do padrão index.html para taskpane.html. Você também pode alterar o nome do documento 404, mas não é necessário.

  8. Clique com o botão direito do mouse em sua conta de armazenamento novamente e, desta vez, selecione Procurar Site Estático. Na janela do navegador aberta, copie a URL do site.

  9. Abra o arquivo de manifesto do projeto (manifest.xml) e altere todas as referências à URL de localhost (como https://localhost:3000) para a URL copiada. Esse ponto de extremidade é a URL do site estático para sua conta de armazenamento recém-criada. Salve as alterações no arquivo de manifesto.

  10. Abra um prompt de linha de comando ou uma janela de terminal e vá para o diretório raiz do seu projeto de suplemento. Execute o comando a seguir para preparar todos os arquivos para implantação de produção.

    npm run build

    Quando a compilação for concluída, a pasta distno diretório raiz do projeto de suplemento incluirá os arquivos que você implantará nas etapas subsequentes.

  11. No VS Code, acesse o Explorer e clique com o botão direito do mouse na pasta dist e selecione Implantar no Site Estático por meio do Armazenamento do Azure. Quando solicitado, selecione a conta de armazenamento que você criou anteriormente.

    Selecione a pasta dist, clique com o botão direito do mouse e selecione Implantar no Site Estático por meio do Armazenamento do Azure.

  12. Quando a implantação for concluída, clique com o botão direito do mouse na conta de armazenamento que você criou anteriormente e selecione Procurar Site Estático. Isso abre o site estático e exibe o painel de tarefas.

  13. Por fim, o sideload do arquivo de manifesto e o suplemento serão carregados do site estático que você acabou de implantar.

Implantar funções personalizadas para o Excel

Se o suplemento tiver funções personalizadas, haverá mais algumas etapas para habilitá-las na conta de Armazenamento do Azure. Primeiro, habilite o CORS para que o Office possa acessar o arquivo functions.json.

  1. Clique com o botão direito do mouse na conta de armazenamento do Azure e selecione Abrir no Portal.

  2. No grupo Configurações, selecione CORS (compartilhamento de recursos). Você também pode usar a caixa de pesquisa para encontrar isso.

  3. Crie uma nova regra CORS com as seguintes configurações.

    Propriedade Valor
    Origens permitidas *
    Métodos permitidos OBTER
    Cabeçalhos permitidos *
    Cabeçalhos expostos Access-Control-Allow-Origin
    Idade máxima 200

  4. Selecione Salvar.

Cuidado

Essa configuração cors pressupõe que todos os arquivos em seu servidor estejam publicamente disponíveis para todos os domínios.

Em seguida, adicione um tipo MIME para arquivos JSON.

  1. Crie um novo arquivo na pasta /src chamada web.config.

  2. Insira o XML a seguir e salve o arquivo.

    <?xml version="1.0"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

  3. Abra o arquivo webpack.config.js.

  4. Adicione o código a seguir na lista de plugins para copiar o web.config no pacote quando o build for executado.

    new CopyWebpackPlugin({
  patterns: [
  {
    from: "src/web.config",
    to: "src/web.config",
  },
 ],
}),

  5. Abra um prompt de linha de comando e vá para o diretório raiz do seu projeto de suplemento. Em seguida, execute o comando a seguir para preparar todos os arquivos para implantação.

    npm run build

    Quando o build for concluído, a pasta dist no diretório raiz do projeto de suplemento conterá os arquivos que você implantará.

  6. Para implantar, no vs code Explorer, clique com o botão direito do mouse na pasta dist e selecione Implantar no Site Estático por meio do Armazenamento do Azure. Quando solicitado, selecione a conta de armazenamento que você criou anteriormente. Se você já implantou a pasta dist , será solicitado se quiser substituir os arquivos no armazenamento do Azure com as alterações mais recentes.

Implantar atualizações

Ao adicionar recursos ou corrigir bugs no suplemento, você precisará implantar as atualizações. Se o suplemento for implantado por um ou mais administradores em suas organizações, algumas alterações de manifesto exigirão que o administrador consenta com as atualizações. Os usuários serão bloqueados do suplemento até que o consentimento seja concedido. As alterações de manifesto a seguir exigirão que o administrador consenta novamente.

Observação

Sempre que você fizer uma alteração no manifesto, você deve aumentar o número de versão do manifesto.

Confira também