SharePoint Framework Web パーツ開発 その3:デプロイ

投稿者: | 2020年7月23日

はじめに

この記事では、開発環境にて SharePoint Framework で作成した Web パーツを本番環境にデプロイするための手順を説明します。
まだ SharePoint Framework で Web パーツを作成していない場合やビルドしていない場合は、以下の記事を参考に Web パーツを作ってください。

パッケージ作成手順

本番環境にデプロイするためには、SharePoint Framework で作成した Web パーツをデプロイするためのパッケージにまとめる必要があります。
パッケージファイルは、.sppkg というファイル拡張子の zip ファイルで、これを本番環境にデプロイすることになります。
ということで、まずはパッケージを作成する手順からです。

プロジェクトを開き Docker を起動

※「SharePoint Framework Web パーツ開発 その1:プロジェクトの作成」の続きで作業を行う場合は、このステップは不要です。

Visual Studio Code を起動してメニューから ファイル > フォルダーを開く をクリックし、プロジェクトフォルダを開きます。
続いて、メニューから 表示 > ターミナル をクリックし、PowerShell のターミナルを開きます。
ターミナルに、 Docker を起動するためのコマンドを入力し実行します。

無事、Docker が起動すると、以下のような表示になります。

以後、上記のプロンプトにコマンドを入力していきます。

Bundle & Packaging

パッケージファイルを作るため、以下のコマンドを実行します。

コマンドを実行するとターミナルに以下のようにずらずらと文字が並びます。

続いてこちらのコマンドを実行します。

実行結果はこちら。

これでパッケージファイルが出来上がりました。
パッケージファイルは、以下のフォルダに .sppkg ファイルとして作成されます。
※斜体部分はプロジェクト名により変わります。

${PWD}/sharepoint/solution/link-list-web-part.sppkg

パッケージのデプロイ手順

アプリカタログを開く

パッケージファイルは SharePoint のアプリカタログにアップロードすることで利用できるようになります。
アプリカタログは、SharePoint 管理者があらかじめ SharePoint 管理センターや PowerShell を使って作成しておく必要があります。

アプリカタログを作成していない場合、以下の記事を参考にアプリカタログを作成してください。
アプリカタログの作成

アプリカタログにパッケージをアップロードする

アプリカタログに先ほど作成した .sppkg ファイルをアップロードします。
アプリカタログは「SharePoint 用アプリ」という名前のライブラリなので、サイトコンテンツのページで見つけることができます。

.sppkg ファイルをアップロードすると、以下のダイアログが表示されるので、[展開] をクリックします。

これでサイトコレクションに展開する準備ができました。
なお、アップロード済みのパッケージは、下図の通り一覧表示されます。

サイトコレクションにアプリを追加する

アプリカタログに登録されたパッケージは、SharePoint に「アプリ」として追加できるようになります。
サイトコンテンツページのメニューから [新規] > [アプリ] を選択し自分のアプリのページに移動すると、「追加できるアプリ」のところに先ほど追加したアプリが表示されていることを確認できるかと思います。

なお、アプリカタログに追加したアプリが多数ある場合は、サイトコンテンツページのメニューにある「組織から」 のリンクをクリックすると、テナントのアプリカタログやサイトコレクションにアプリカタログに登録された、自サイトで利用可能なアプリのみ表示することができます。

あとは他のアプリと同様に追加したいアプリをクリックすることで、そのサイトにアプリを展開することができます。
展開されたアプリは、リストなどのアプリと同様にサイトコンテンツの一覧の中に表示されます。

その後、Web パーツであれば、標準の Web パーツと同様に、ページに Web パーツを追加します。

以上が、SharePoint Framework で開発したアプリのデプロイ方法です。