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

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

前回の記事はこちら

https://qiita.com/C_pnpc/items/2bbe4251bc7d22d77840

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

https://sharepoint.orivers.jp/sharepoint-framework-dev


# プロジェクトの作成

>参考手順

https://sharepoint.orivers.jp/article/10530

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/d2a662c4-819a-ade0-ba7a-f5a5784ae226.png)


# デバッグ用 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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/8b3b2145-d932-8448-4b98-4289bec47358.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/461fe6c2-b840-7c00-e275-7a0b139f68c3.png)

以下記事によると、原因は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サイト表示

>参考

https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/debug-modern-pages


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/47c1ce0a-4945-3e0f-da48-d484adbffbbc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/8c1e756c-a600-f9ce-e8bb-7bcca9da4f31.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/18946627-8f5b-a044-905d-46ef2cd220df.png)


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

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

https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/debug-modern-pages

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のポップアップをクリックし、リモートでアクセスされていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/65612e1b-5d05-f25c-21b6-d036dec7a3d0.png)

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

インストール完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/046ccb16-309b-7856-4461-095423f9e0dc.png)

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"

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/26ab87ed-a509-c171-122c-d2c42412b889.png)

5.gulpサーバー起動
ターミナルで下記実行
gulp serve --nobrowser
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/f1aedc5b-a815-2077-6284-67039770baa3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/6fd66676-c63d-923b-e763-c3082b7c1986.png)

ここをクリックでとばされる
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サーバー起動
→同じエラー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/139694d9-2a74-5890-74c5-d27d937e7f39.png)

→Yes

5の画面でOK

9.URLに下記付与して、エンター
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/3aba3e0c-21ad-f585-78ec-fa4abe428d61.png)

付与するテキスト
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"<ID置き換え。例:73e1dc6c-8441-42cc-ad47-4bd3659f8a3a>":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"testMessage":"Hello as property!"}}}

IDは/temp/manifests.jsの以下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/9ba83ddf-8110-e9d4-ce94-9b3f5140cad2.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1429640/5cf3535c-67bb-f9e6-ba26-c30129783731.png)
→エラー

なんでなん。。