Visual Studio Code から Office アドインを発行してAzure

Office アドインを発行する方法の 1 つは、Web アプリをAzureに展開することです。この記事では、アドイン専用マニフェストを使用し、Office アドイン用 Yeoman Generator を使用して作成されたアドインのエンドツーエンドフローを示します。

注:

Visual Studio を使用して作成した Office アドインの発行の詳細については、「Visual Studio を使用してアドインを発行する」を参照してください。
この記事で説明するプロセスは、 Microsoft 365 の統合マニフェストを使用するアドインには適用されません。 Microsoft 365 Agents Toolkit を使用して作成されたアドインでは、統合マニフェストが使用されます。エージェントツールキットを使用して作成したアドインの発行については、「クラウドに Teams アプリをデプロイする」と「最初の Teams アプリをデプロイする」を参照してください。後者の記事は Teams タブアプリに関する記事ですが、エージェントツールキットで作成された Office アドインに適用できます。

他のユーザー向けに発行する

Office アドインには、マニフェストファイルと Web アプリが含まれています。マニフェストは、アドインをサポートする Office アプリや Web アプリの URL など、キーの詳細を定義します。

開発中は、localhost でアドインを実行します。他のユーザーに発行するには、Web アプリをデプロイし、デプロイされた URL を使用するようにマニフェストを更新します。

このプロセスは、Azure Storage 拡張機能を使用して Visual Studio Code で直接完了できます。

前提条件

アドイン専用マニフェストを使用する Office アドイン用 Yeoman ジェネレーターを使用して作成された Office アドインプロジェクト。
Visual Studio Code。
Azure ストレージアカウントを作成するためのAzure アカウントとアクセス許可。

Visual Studio コードを使用して発行する

注:

これらの手順は、Office アドイン用 Yeoman ジェネレーターを使用して作成されたプロジェクトでのみ機能し、アドインのみのマニフェストを使用します。エージェントツールキットを使用してアドインを作成した場合、または Yeoman ジェネレーターを使用してアドインを作成し、Microsoft 365 の統合マニフェストを使用している場合は適用されません。

Visual Studio Code (VS Code) のルートフォルダーからプロジェクトを開きます。
[ ビュー>Extensions (Ctrl+Shift+X) を選択して、[拡張機能] ビューを開きます。
Azure Storage 拡張機能を検索してインストールします。
インストールすると、アクティビティバーにAzure アイコンが追加されます。拡張機能にアクセスするには、それを選択します。 アクティビティバーが非表示の場合は、[表示>Appearance>Activity Bar] を選択して開きます。
[サインインしてAzure] を選択して、Azure アカウントにサインインします。 Azure アカウントがまだない場合は、[Azure アカウントの作成] を選択してアカウントを作成します。指定した手順に従ってアカウントを設定します。
サインインすると、Azureストレージアカウントが拡張機能に表示されます。まだお持ちでない場合は、[ ストレージアカウントの作成 ] コマンドを使用して作成します。 a-zと0-9のみでグローバルに一意のアカウント名を使用します。既定では、米国西部に同じ名前のストレージアカウントとリソースグループが作成されます。これらの設定は、Azure portalで変更できます。
ストレージアカウントを右クリック (または選択して長押し) し、[ 静的 Web サイトの構成] を選択します。インデックスドキュメント名と 404 ドキュメント名を入力するように求められます。インデックスドキュメント名を既定の index.html から taskpane.html に変更します。また、404 ドキュメント名を変更することもできますが、必須ではありません。
ストレージアカウントをもう一度右クリック (または長押し) し、今度は [ 静的 Web サイトの参照] を選択します。開いたブラウザーウィンドウから、Web サイトの URL をコピーします。
プロジェクトのマニフェストファイルを開き、localhost URL へのすべての参照 ( https://localhost:3000など) をコピーした URL に変更します。このエンドポイントは、新しく作成されたストレージアカウントの静的 Web サイト URL です。マニフェストファイルに変更を保存します。
コマンドラインプロンプトまたはターミナルウィンドウを開き、アドインプロジェクトのルートディレクトリに移動します。次のコマンドを実行して、運用環境のデプロイ用にすべてのファイルを準備します。
```
npm run build
```
ビルドが完了すると、アドインプロジェクトのルートディレクトリにある dist フォルダーに、以降の手順で展開するファイルが含まれます。
VS Code で、エクスプローラーに移動し、dist フォルダーを右クリック (または選択して長押し) し、[Azure Storage 経由で静的 Web サイトにデプロイ] を選択します。メッセージが表示されたら、前に作成したストレージアカウントを選択します。
デプロイが完了したら、前に作成したストレージアカウントを右クリック (または選択して保持) し、[ 静的 Web サイトの参照] を選択します。これにより、静的な Web サイトが開き、作業ウィンドウが表示されます。
最後に、マニフェストファイルをサイドロードします。その後、アドインは、デプロイした静的 Web サイトから読み込まれます。

Excel 用のカスタム関数をデプロイする

アドインにカスタム関数がある場合は、Azure ストレージアカウントで有効にする手順がいくつかあります。まず、CORS を有効にして、Office がfunctions.json ファイルにアクセスできるようにします。

Azure ストレージアカウントを右クリック (または選択して長押し) し、[ポータルで開く] を選択します。
[設定] グループで、[ リソース共有 (CORS)] を選択します。検索ボックスを使用してこれを見つけることもできます。

次の設定を使用して、 BLOB サービス の新しい CORS ルールを作成します。

プロパティ	値
許可される配信元	*
許可されるメソッド	GET
許可されるヘッダー	*
公開されているヘッダー	Access-Control-Allow-Origin
最大年齢	200

[保存] を選択します。

注意

この CORS 構成では、サーバー上のすべてのファイルがすべてのドメインで一般公開されていることを前提としています。

次に、JSON ファイルの MIME の種類を追加します。

という名前の src フォルダーに新しいファイル web.config作成します。

次の XML を挿入し、ファイルを保存します。

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

webpack.config.js ファイルを開きます。
ビルドの実行時に web.config をバンドルにコピーする plugins の一覧に次のコードを追加します。
```
new CopyWebpackPlugin({
  patterns: [
  {
    from: "src/web.config",
    to: "src/web.config",
  },
 ],
}),
```
コマンドラインプロンプトを開き、アドインプロジェクトのルートディレクトリに移動します。次に、次のコマンドを実行して、すべてのファイルをデプロイ用に準備します。
```
npm run build
```
ビルドが完了すると、アドインプロジェクトのルートディレクトリ内の dist フォルダーに、展開するファイルが含まれます。
展開するには、VS Code エクスプローラーで dist フォルダーを右クリック (または選択して長押し) し、[Azure Storage 経由で静的 Web サイトにデプロイ] を選択します。メッセージが表示されたら、前に作成したストレージアカウントを選択します。 dist フォルダーを既に展開している場合は、Azure ストレージ内のファイルを最新の変更で上書きするかどうかを確認するメッセージが表示されます。

更新プログラムの展開

前に説明したのと同じ方法で、Web アプリケーションに更新プログラムをデプロイします。マニフェストを変更するには、マニフェストをユーザーに再配布する必要があります。これを行うプロセスは、発行方法によって異なります。アドインの更新の詳細については、「 Office アドインを管理する」を参照してください。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-06-12