SharePoint Framework の開発環境を Docker を使って構築する際の npm install のエラーの対処

2021/5/26追記

1.12.1で本記事の方法で実行するとエラーになるっぽいです。
参考サイト通りにやりましょう。
以下でやっても一応できます。

ここまで

---

SharePoint Framework を使った開発は、そのバージョンアップの頻度から Docker など使った環境構築がおすすめされています。しかしながら、Docker Desktop for Windows を使った環境構築において、npm install でうまくいかない部分があり、あくまで場当たり的対応ですが解消するまで苦労しましたので備忘録として残します。

遭遇したこと

Dockerコンテナ起動後、npm install gulp、yo @microsoft/sharepoint でいろんなエラーがでて作業が進まない。ページ下部の③のリンクのエラーがでたり、コンテナがハングアップしたかのように動作が遅くなり、先に進むことができない。

ありがとうございます。https://t.co/m1CslvAZRE
この及川さんの記事みながらやっていたのですが、以下のようなエラーで躓いてました。npmのキャッシュ消したりいじくりながらまたやってみます。
Error: EEXIST: file already exists, copyfile '/home/spfx/.cache/yarn/v6/npm-ms-0.7.1-.... pic.twitter.com/SpFzSsX7MD

— nan_oka (@nanoka7o8) June 16, 2020

対応したこと

④のリンクを参考にして、マウントしているディレクトリでないディレクトリで npm install した後、一式をマウントしているディレクトリに移動します。

1.コンテナの起動

powershell

docker run -it --rm --name [コンテナ名] -v [プロジェクトディレクトリ]:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx:1.10.0

2.一時作業ディレクトリへの変更と、gulp インストール

docker

cd /tmp
npm install gulp --no-bin-links

yarn add でも可(ただし--no-bin-linksが有効かは不明)

3.yo の実行

docker

yo @microsoft/sharepoint --package-manager npm --skip-install

package-manager yarn でも可

4.spfx に必要な npm のインストール

docker

npm install --no-bin-links

yarn install でも可(ただし--no-bin-linksが有効かは不明)

5.マウントしたプロジェクトディレクトリへのファイルコピー

docker

mv * .[^\.]* /usr/app/spfx

6.プロジェクトディレクトリで開発を続ける！

まとめ

原因はわかっていませんが、何度か試してもこれならエラーにならないので、とりあえずはいけそうな気がします。
環境さえできてしまえば、JavaScriptが少し触れる方ならどんどんアプリを作っていけるSpfx。環境構築で躓いてやめてしまうのはもったいないので、(SPS2013のクラシックサイトのカスタマイズなんかやめて)是非みんなでやりましょう！！！
なお、小さめのモジュールなら、npm install してもエラーになりにくいので、この後の追加に関しては直接やっても問題ないです。

環境構築作業の参考にさせていただいたブログ

①SharePoint Developer SharePoint Framework 開発入門 まとめ
https://sharepoint.orivers.jp/sharepoint-framework-dev

対応方法の参考にさせていただいたブログなど

②Rencore Try SharePoint Framework without installing it
https://rencore.com/blog/try-sharepoint-framework-without-installing/
③[Windows][Docker] nodeコンテナでnpm installが動かず地獄を見た
https://qiita.com/yagrush/items/5fb64f878e4b9940a4ee
④WindowsのDocker環境でnpm install実行時にエラーが出た場合の対処法メモ
https://qiita.com/Y-Kanoh/items/58815aafb7346930f370

感想

Twitterでつぶやいてみたら、大変ありがたいことにいろいろな方々が確認してくださり、特に工夫しなくてもうまくいっているようでした。大感謝です！

レアな事象なのかわかりませんが、同じ事象に遭遇した場合の助けになれば幸いです。
コンテナもWindowsにしてしまえばうまくいくのでしょうか。。。