二年前、SharePoint Online 用の Webパーツを作ろうと、開発環境を揃えて最初の１個を作っていたのだが、いろいろ他の仕事が入って止まっている。
せっかくのやりかけなので、この活動も再開してみる。
この記事に記載の内容は、以下のページに書いてある事についてなので、最新状況はここでみて頂きたい。
SharePoint Framework におけるチーム ベースの開発
https://learn.microsoft.com/ja-jp/sharepoint/dev/spfx/team-based-development-on-sharepoint-framework
まず初回 (1) はその二年前のおさらいから。
二年前参考にした資料
及川 紘旭 さん (Office Development MVP) さんのwebサイト記事
https://sharepoint.orivers.jp/article/10111
Docker Desktop for Windows/Macでつくるクリーンな開発環境構築入門(Webアプリケーション版)
Dockerで PHP, node.js, Go 言語、GitHubを使ったwebサイト開発
https://www.amazon.co.jp/dp/B08WHG4VF9
はじめてつくるReactアプリ with TypeScript
ReactフレームワークとTypeScriptで小さなwebアプリを開発。
https://www.amazon.co.jp/dp/B094Z1R281
Docker Desktop for Windowsをインストールする
必要環境: Windows 10 pro/home ver.2004以上、Ryzen/Core i5 以上の仮想化支援機能 (i5-2430Mでも動く)、 Windows Subsystem for Linux 2
インストール手順
- Windows 10 を バージョン 2004以上に上げる。
- CPUの仮想化支援機能をONにする。
- WSLのインストールと PowerShell で WSL2 にアップグレード。
- マイクロソフトストアで Ubuntuをインストール
- Docker Desktop のインストール
- Docker Hub のサインアップ (実行イメージのダウンロードに必要）
Dockerの動作を確認してみる。
Docker Hub から簡単な Webサーバー環境をもらってきて試してみる。
http://hub.docker.com/ でほしいイメージを探す。
おためしで “php:7.4-apache” をダウンロードする。
Image ls コマンドを使うと、取得済のイメージの一覧がみれる。
もらってきたイメージをコンテナで実行してみる。
このパラメータだと、http://localhost:8080/ をブラウザで開くと、コンテナのポート番号80番にHTTPリクエストが飛ぶ。
Docker は、Linux しか動かない Hyper-V などと思っておけばいい。全然違うけどとりあえずそれで。
VS Code と Docker Extension
VS Code に Docker 拡張を入れると、Docker for Desktop のコンテナ中のファイルにアクセス可能。
“Debugger for Chrome” 拡張は不要になった。VS Code に既に内蔵されている。
SharePoint Framework 開発コンテナを導入
Docker hub でマイクロソフト謹製の SharePoint Framework 開発環境をもらってこれる。
spfx で検索してみる。
以下の例では、 d:\src\spfx04 フォルダが、コンテナ内では /usr/app/spfx/ フォルダにマウントされる。このマウントされたフォルダ内で開発する。
docker run -it –rm –name spfx-helloworld -v d:\src\spfx04:/usr/app/spfx -p 6432:4321 -p 45729:35729 waldekm/spfx:1.10.0
Docker のコンソールに入って既に動いているのが分かる。ここで、spfx-helloworld をクリックすると、既にログイン済の Linux コンソールが表示される。
空の webパーツをビルドしてみる。
何も考えず、言われたままに以下のコマンドを打って先にすすめていく・・。作るのは、SharePoint Online 用の Webパーツなので、メニューをそのように選択して進める。
使うのは、React フレームワークだ。以前は Knockout を使うしかなくて途方にくれたものだ。
かなり長い時間がかかってソースコードの展開 (スキャフォールディング) が終わる。
VS Code で展開されたソースコードを参照してみる。
出来上がった Webパーツは、以下のコマンドを実行すると動作が確認できる。
Gulp serve –nobrowser
そして、以下のURLをブラウザで開く。
https://localhost:4321/temp/workbench.html
「ローカルワークベンチ」という SharePoint サイトの簡易環境の中で作成された Webパーツの動作が確認できる。
ただしローカルワークベンチが動作するのは SPFx 1.11.0 まで、現在のフレームワークでは廃止されている。
以下、launch.json のメモ。
Webページのパッケージ化
webパーツとして出力を得るには二段階要る。まずビルドして、
パッケージ化する。
出来上がり！
出来上がった .sppkg ファイルを、SharePoint Online の管理ページにアップロードする。
アプリ “spfx-client-side-solution” が利用可能になる。
モダンページに埋め込んでみて、動作を確認する。
次回は、最新の Docker イメージを入手していかほどかを見てみる。