前回、Nano Serverのイメージ上でSharePoint Framework(SPfx)の開発環境を構築しましたが、プロジェクトを作るときとかにコンテナがハングして応答がなくなってしまうことが多々発生したので、Linux(Debian)ベースのコンテナを使うことにしました。
忙しい人向け(再掲)
waldekmさんがDocker Hubでイメージを公開されているので、それを使うのが手っ取り早いです。
In the command line (on macOS):
cd [your project]
docker run -h spfx -it --rm --name ${PWD##*/} -v $PWD:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx
In the command line (on Windows, assuming your project is located at c:\projects\spfx-helloworld):
cd c:\projects\spfx-helloworld
docker run -h spfx -it --rm --name spfx-helloworld -v /c/projects/spfx-helloworld:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 waldekm/spfx
動作環境
本手順は以下の環境で確認しています。
- Windows 10 Pro Insider Preview(Build 15055)
- Docker Version 17.03.0-ce
流れ
Nano Serverのときは、いったんServer Coreのイメージを作ってからデータコピーとかやってましたが、Linuxベースなら一発で作成できます。
- Linux Containersへ切り替え
- Node.jsのイメージに必要なモジュールをインストール
0. Linux Containersへ切り替え
DockerがWindows Containersで動いている場合は、Linux Containersにモードを切り替えます。
1. Node.jsのイメージに必要なモジュールをインストール
DebianベースのNode.jsのイメージはDocker Hubで公開されているので、それを元にしてイメージを作っていきます。Dockerfileは以下。
FROM node:6.10.0
EXPOSE 5432 4321 35729
RUN apt-get -yq update && \
apt-get -yq install git sudo && \
apt-get clean && rm -rf /var/lib/apt/lists/*
RUN adduser --disabled-password --gecos '' spfx && \
adduser spfx sudo && \
echo "%sudo ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers
ENV HOME /home/spfx
RUN npm install -g yo gulp gulp-save
RUN npm install -g @microsoft/generator-sharepoint@1.0.0
RUN chown -R spfx:spfx /home/spfx/
RUN mkdir /app && chown spfx:spfx /app
WORKDIR /app
USER spfx
CMD /bin/bash
コンテナ上のrootユーザーだと、権限の問題でプロジェクトの作成時にファイルが作成できなかったりしたので、spfxというユーザーを作成して、そのホームディレクトリ配下にYeomanとかをインストールしています。また、npm install -g npm
を実施するとその後のnpmコマンドが使えなくなるので、実施しないようにしています。
また、/appというディレクトリですが、この下にプロジェクトを作っていくことを想定して作っています。コンテナの起動時に/appにホストのディレクトリをマウントするイメージです。
あと起動時にはbashをデフォルトで起動させています。
上記のDockerfileを使ってビルドしてイメージ作成は終わりです。
docker build -t spfx:1.0.0 .
プロジェクトを作る
作成したイメージを使って、SharePoint Frameworkのプロジェクトを作成できることを確認します。
コンテナを起動します。
docker run -it --rm spfx:1.0.0 bash
Hello Worldを作ってみます。
mkdir helloworld
cd helloworld
yo @microsoft/sharepoint
実際にプロジェクトの開発やデバッグについては、またあらためて書きたいと思います。