Docker を使った SharePoint Framework 開発環境の構築 その2

By | 2019年2月18日

はじめに

Docker 上に SharePoint Framework の開発環境を構築する手順をまとめました。
この資料の内容は、こちらのスライドからの抜粋となります。
まとめて読みたい方は、スライドをダウンロードしてください。

なお、環境構築手順は、
・開発環境を構築するためにホストとなる PC で行う手順
・Docker 上でプロジェクトごとに行う手順
の2部構成になっています。

この記事では、ホスト PC にインストールした Docker 上で、プロジェクトごとに行う作業手順について記載します。

 

Docker 上でプロジェクトごとに行う手順

プロジェクトフォルダの作成

Docker で Shared Drive として指定したドライブに、SharePoint Framework 開発用の作業フォルダを作成し、その作業フォルダの下にプロジェクト用のフォルダを作成します。

 

SharePoint Framework Docker イメージのダウンロード、設定、起動

PowerShell を起動して、以下のコマンドを事項します。
コマンドを実行すると、ローカル PC 上に指定バージョンの Docker イメージが存在しない場合のみ、GetHub から指定のイメージがダウンロードされます。
そして、Docker 上に環境が構築され、環境が起動します。

なお、SPFx バージョン番号 を省略すると、最新バージョンのイメージをダウンロードします。

以下、実行コマンドの例です。

 

各種モジュールのインストール

Docker 上に構築された開発環境にて、以下のコマンドを実行して必要なモジュールをインストールします。

 

プロジェクトの作成

続いて、以下のコマンドを実行してプロジェクトを作成します。
yo コマンドを実行すると色々と質問が表示され、それに回答していくとプロジェクトが作成されます。
Web パーツ開発、拡張機能開発により、質問への回答の仕方が異なってくるのですが、その辺りは別記事で紹介したいと思います。

なお、このコマンドを実行すると SharePoint Framework 開発に必要な各種ソースコードや設定ファイルがダウンロードされるのですが、この際に環境によってはエラーが発生する可能性があります。
一部ではありますが、エラーが発生した場合の対応や、追加で行わなければならない設定などを別記事でまとめているので、行き詰った方は参考にしてください。

Docker で SharePoint Framework 開発環境を構築する際の注意事項
SharePoint Framework v1.7.0, v1.7.1 Docker image 使用時の注意点

 

開発証明書の作成、インストール

続いて、以下のコマンドを実行して開発用証明書を作成します。

コマンド実行後、開発サーバーが起動するので、ローカル PC の Internet Explorer で  https://localhost:4321  を開いて、証明書をインポートします。
証明書のインポート先には「信頼されたルート証明機関」を指定してください。

 

 

以上で、プロジェクトごとに行う環境構築は完了です。
この後また別記事で、Web パーツなどプロジェクトの種類ごとに開発方法などを掲載していきたいと思います。

慣れればそうでもないのですが最初は大変な作業だと思いますので、何度か繰り返して体を慣らして、SharePoint Framework ライフを楽しみましょう!