SPFxハンズオン開発シリーズ第3回：Webパーツのデプロイ

Last updated at 2025-09-12Posted at 2025-09-12

はじめに

1.はじめに
モダンなSharePointサイトに独自の機能を組み込みたい、使いやすいUIを提供したい。そんなニーズに応えるのがSharePoint Framework（以降、SPFx）のWebパーツ開発です。 SPFxを活用することで、企業のポータルサイトや業務アプリを柔軟に拡張し、利便性の高いSharePointサイトを構築できます。

これまでの連載では、開発環境の構築からWebパーツの作成、ローカル環境での動作確認までを解説してきました。
本記事では、その次のステップとして「Webパーツを実際のSharePointサイトにデプロイする手順」を紹介します。
開発したWebパーツを組織内で利用できるようにするための流れを、アプリカタログへの展開からサイト上での利用方法まで、ハンズオン形式で分かりやすく紹介します。

2.連載の目次
・SPFxハンズオン開発シリーズ第1回：開発環境の構築
 ・SPFxハンズオン開発シリーズ第2回：Webパーツの開発
・SPFxハンズオン開発シリーズ第3回：Webパーツのデプロイ（※本記事）

1.開発の流れ

SPFxを用いたアプリ開発は、大きく5つのステップに分かれます。
SPFxハンズオン開発シリーズでは
第1回にてSTEP 01
第2回にてSTEP 02.03
第3回にてSTEP 04.05
の説明を行います。

2.パッケージ化

ローカル環境で動作確認したWebパーツは、そのままではSharePointに展開できません。
組織で利用する「アプリ」としてパッケージ化する必要があります。

〇パッケージ化手順

STEP 01 VSCodeの起動

STEP 01-1
Visual Studio Code（以降、VSCode）を起動します。
まだインストールしていない場合は、以下のリンクからインストールしてください。
URL: https://code.visualstudio.com/

STEP 02 ターミナルの起動

STEP 02-1
VSCodeのメニューから「ファイル」＞「フォルダーを開く」をクリックします。
STEP 01で作成したフォルダーを選択し、「フォルダーの選択」をクリックします。

STEP 02-2
「ターミナル」＞「新しいターミナル」をクリックしてターミナルを開きます。
※既にターミナルが開いている場合は、古いターミナルを閉じてください。

STEP 02-3
現在のディレクトリがプロジェクトフォルダを指していることを確認します。
※現在のディレクトリがプロジェクトフォルダでない場合、
　STEP03以降のコマンド実行に失敗する可能性があります。

STEP 03 パッケージ化

STEP 03-1
SPFxの本番環境向けにコードを最適化・圧縮します。
VSCodeのターミナルに以下のコマンドを入力し、Enterを押しコマンドを実行します。

gulp bundle --ship

STEP 03-2
SPFxを本番環境向けにパッケージ化します。
VSCodeのターミナルに以下のコマンドを入力し、Enterを押しコマンドを実行します。

gulp package-solution --ship

STEP 03-3
以下にパッケージ化されたアプリのファイル（.sppkgファイル）が作成されたことを確認します。
C:\SPFx_test\myApp\sharepoint\solution

3.アプリカタログへのアクセス

作成したパッケージを展開するには、アプリカタログにアクセスする必要があります。
アプリカタログには「テナント単位」と「サイトコレクション単位」の2種類があり、それぞれ利用範囲が異なります。
・　テナント単位のアプリカタログ
　　テナント全体で共有されるアプリカタログです。
　　アップロードすると、すべてのサイトで Web パーツを利用できます。
・　サイトコレクション単位のアプリカタログ
　　特定のサイトコレクションでのみ共有されるアプリカタログです。
　　アップロードすると、特定のサイトコレクションでのみWeb パーツを利用できます。
本章では、2通りのアクセス手順を解説します。

〇テナント単位のアプリカタログへのアクセス手順

STEP 01 SharePoint管理センターへアクセス

STEP 01-1
以下URLからSharePoint管理センターにアクセスします。
URL：https://{テナント}-admin.sharepoint.com
※アクセスにはSharePointテナント管理者の権限が必要となります。

STEP 02 [アプリ]セクションにアクセス

STEP 02-1
[その他の機能]＞[アプリ]セクションの[開く]の順にクリックします。

STEP 02-2
テナント単位のアプリカタログにアクセスできたことを確認します。

〇サイトコレクション単位のアプリカタログにアクセス

STEP 01 カスタムスクリプトの有効化

STEP 01-1
Windows PowerShellを管理者として実行します。

STEP 01-2
以下コードを実行し、実行ポリシーを変更します。

Set-ExecutionPolicy RemoteSigned

STEP 01-3
以下のコードを実行し、SharePoint管理センターに接続します。
※ {テナント}は自身の環境に合わせて置き換えます。

Connect-SPOService -Url "https://{テナント}-admin.sharepoint.com"

STEP 01-4
SharePoint管理センターに接続するユーザーを選択します。

STEP 01-5
以下のコードを実行し、対象サイトコレクションのカスタムスクリプトを許可します。
※ {テナント}{サイト内部名}は自身の環境に合わせて置き換えます。

Set-SPOSite -Identity "https://{テナント}.sharepoint.com/sites/{サイト内部名}" -DenyAddAndCustomizePages 0

STEP 01-6
以下のコードを実行し、カスタムスクリプト有効化されていることを確認します。
※Disabledと表示されることを確認します。
※ {テナント}{サイト内部名}は自身の環境に合わせて置き換えます。

Get-SPOSite -Identity "https://{テナント名}.sharepoint.com/sites/{サイト内部名}" | Select DenyAddAndCustomizePages

STEP 02 アプリカタログの有効化

STEP 02-1
Windows PowerShellを管理者として実行します。

STEP 02-2
以下のURLに遷移しサイトコレクション単位のアプリカタログが作成されていないことを確認します。
URL：https://{テナント}.sharepoint.com/sites/{サイトの内部名}/AppCatalog/Forms/AllItems.aspx

STEP 02-3
以下のコードを実行し、SharePoint管理センターに接続します。
※ {テナント}は自身の環境に合わせて置き換えます。

Connect-SPOService -Url "https://{テナント}-admin.sharepoint.com"

STEP 02-4
SharePoint管理センターに接続するユーザーを選択します。

STEP 02-5
以下のコードを実行し、テナント単位のアプリカタログを作成します。
※ {テナント}{サイト内部名}は自身の環境に合わせて置き換えます。

Add-SPOSiteCollectionAppCatalog -Site "https://{テナント}.sharepoint.com/sites/{サイト内部名}"

STEP 02-6
以下のURLに遷移しサイトコレクション単位のアプリカタログが作成されてたことを確認します。
URL：https://{テナント}.sharepoint.com/sites/{サイト内部名}/AppCatalog/Forms/AllItems.aspx
※ {テナント}{サイト内部名}は自身の環境に合わせて置き換えます。