Publicar um suplemento desenvolvido com o Código do Visual Studio
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
- Para saber mais sobre como publicar um Suplemento do Office criado usando o Visual Studio, confira Publicar o suplemento usando o Visual Studio.
- Para obter informações sobre como publicar um Suplemento do Office que você criou usando o Teams Toolkit, consulte Implantar o aplicativo Teams na nuvem e Implantar seu primeiro aplicativo teams. Este artigo é sobre aplicativos de guia do Teams, mas é aplicável aos Suplementos do Office criados com o Teams Toolkit.
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.
Abra seu projeto de sua pasta raiz em Visual Studio Code (VS Code).
Selecione Exibir>Extensões (Ctrl+Shift+X) para abrir a exibição Extensões.
Pesquise a extensão de Armazenamento do Azure e instale-a.
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>.
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.
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.
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
parataskpane.html
. Você também pode alterar o nome do documento 404, mas não é necessário.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.
Abra o arquivo de manifesto do projeto (
manifest.xml
) e altere todas as referências à URL de localhost (comohttps://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.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.
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.
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.
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.
Clique com o botão direito do mouse na conta de armazenamento do Azure e selecione Abrir no Portal.
No grupo Configurações, selecione CORS (compartilhamento de recursos). Você também pode usar a caixa de pesquisa para encontrar isso.
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 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.
Crie um novo arquivo na pasta /src chamada web.config.
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>
Abra o arquivo webpack.config.js.
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", }, ], }),
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á.
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.
- Alterações nas permissões solicitadas. Consulte Solicitando permissões para uso de API em suplementos e Noções básicas sobre permissões de suplemento do Outlook.
- Escopos adicionais ou alterados. (Não aplicável se o suplemento usar o manifesto unificado do Microsoft 365.)
- Eventos adicionais ou alterados do Outlook.
Observação
Sempre que você fizer uma alteração no manifesto, você deve aumentar o número de versão do manifesto.
- Se o suplemento usar o manifesto XML, consulte Elemento Versão.
- Se o suplemento usar o manifesto unificado, consulte propriedade version.
Confira também
Comentários
https://aka.ms/ContentUserFeedback.
Brevemente: Ao longo de 2024, vamos descontinuar progressivamente o GitHub Issues como mecanismo de feedback para conteúdos e substituí-lo por um novo sistema de feedback. Para obter mais informações, veja:Submeter e ver comentários