SharePointFrameworkの理解を深める03(プロジェクトの作成&ビルド)

2022年2月に書いた記事を備忘録でアップしてます
SharePointFramework1.13を使ってます。
結論Docker上の開発環境だとうまくいかず(本記事)
私の場合、ローカルに環境構築して、やっとうまくいきました。
(次の記事)

前回の記事はこちら

本記事はこちらを真似して構築しています

プロジェクトの作成

参考手順

以下をターミナルで実行します。
yo @microsoft/sharepoint --package-manager yarn

SharePoint開発で度々出てくる噂のyeomanやっと登場。。

デバッグ用 SharePoint Online サイトの指定

参考
https://sharepoint.orivers.jp/article/9998

VSCode で、${PWD}/.vscode/launch.json を開き、以下の通り修正します。

11 行目の「https://localhost:4321/temp/workbench.html 」を以下の URL に変更する。
https://localhost:5432/workbench
28 行目の「enter-your-SharePoint-site」の個所にデバッグで使用する SPO サイトの URL を入力する

ビルド＆実行

参考
https://sharepoint.orivers.jp/article/10124

[躓きポイント]デバッグ環境にlocal workbenchが出てこない

以下記事によると、原因はSharePointFramework1.13でなくなって使えないらしいです。

ローカルワークベンチの削除
このリリースでローカルワークベンチがついに削除されました。
今後は、SharePoint Online のワークベンチを使ってデバッグをすることになります。
そもそも、ローカルワークベンチでは SharePoint API も Teams API もコンテキストが取れずに使用することができなかったので、それほど影響はないのかもしれません。
https://sharepoint.orivers.jp/article/10539

この変更とあわせて、オンプレ用の SharePoint Framework ソリューションも作成できなくなりました。
オンプレ用として SharePoint Framework を使用したい場合は、v1.12.1 以前を使用する必要があります。

local workbenchができなかったので、Hosted workbenchでデバッグしてみる

MS参考の通り、以下をやってみました。(詳細手順は後述)
　config/serve.jsonの編集
　ターミナルでgulp serve --nobrowser実行
　実行とデバッグで「Host workbench」実行
　MS365認証でアカウント情報入力
　SPOサイト表示

参考

結論：「デバッグのマニフェストを読み込み中にエラーが発生しました。」エラーで止まる。。

サイトの表示時に下図のエラーが出ます。

もう一度プロジェクトの作成からやり直しても同じエラーがでました。
結局エラー回避方法がわからず、Dockerを使わずローカルで開発環境作り直したら実行できました。
その方法は次記事で。。

付録：Hosted workbenchでのデバッグ手順(プロジェクトの作成～SPOサイトの表示)

1.PCのエクスプローラーからプロジェクトフォルダを作成
　C:\Workspaces\LinkListWebPart

2.コンテナの準備
2-1.プロジェクトフォルダにDockerファイル格納
ファイルは以下から拝借
HiroakiOikawa/docker-spfx: Docker Image for SharePoint Framework (github.com)
2-2.VSCodeでプロジェクトフォルダを開く
2-3.コマンドパレットに「add dev container」と入力します。
2-4.[Remote – Containers: Add Development Container Configuration Files]を選択します。
2-5.reopen in containerのポップアップをクリックし、リモートでアクセスされていることを確認

3.Webパーツプロジェクトの作成
3-1.yo コマンドで Web パーツのプロジェクトを作成します。
yo @microsoft/sharepoint
3-2.以下以外はデフォルト
どの種類のクライアント側コンポーネントを作成しますか?: WebPart
ソリューション名：LinkListWebPart
Web パーツ名は何ですか?: LinkList
Web パーツの説明は何ですか?: LinkListWebPart
どのフレームワークを使用しますか?: React

インストール完了

4.ホストされているワークベンチを使用した Web パーツ ソリューションのデバッグ
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/debug-in-vscode#debug-solution-using-hosted-workbench
1.　.vscode/launch.json を開き、[ホストされているワークベンチ] 構成の url プロパティを SharePoint サイトの URL に更新します。

"url": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"

5.gulpサーバー起動
ターミナルで下記実行
gulp serve --nobrowser

ここをクリックでとばされる
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

6.プロジェクト内のファイル./config/serve.jsonを見つけて開きます
ドメインを、テストに使用するSharePointテナントとサイトのURLに変更しenter-your-SharePoint-site

例：https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx

7.自己署名開発者証明書を信頼する
gulp trust-dev-cert

8.もう一度gulpサーバー起動
→同じエラー

→Yes

5の画面でOK

9.URLに下記付与して、エンター

付与するテキスト
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello as property!"}}}

IDは/temp/manifests.jsの以下

参考https://docs.microsoft.com/en-us/sharepoint/dev/spfx/debug-in-vscode#debug-solution-using-hosted-workbench

→エラー

なんでなん。。