Scratch3.0をDockerで簡単に構築しよう

はじめに

最近、Scratchのことを聞かれる機会が多くなってきました。
みなさんも自分の子ども、あるいは甥っ子、姪っ子、友人経由でその子ども達から聞かれる機会が増えてくるかもしれません。

「おじちゃん、IT詳しいのにScratchもわからないの？」とか子どもに言われたらけっこうショックな気がします。

というわけで誰かになにか聞かれてもすぐ答えられるように動作環境を確保すべく、Scratch3.0を簡単に環境構築する手順をまとめました。

Scratch3.0は無料のオンラインサービスがあるようですがアカウント作成が面倒という人は自分のPCにさくっと作るほうが心理的に楽かもしれません。また、Extension(拡張機能)を試すには環境構築するしかないようです。

参考

webを探してみるとここに手順がすべて記載されています。完璧！
Nodejs x Alpine x DockerでScratch3.0の独自Extensions(拡張機能)を作成する開発環境を整える

改良版

ですが・・このままでは手動の作業が多いのでこの内容をそのまま丸々install.shにまとめました。

install.sh

#!/bin/bash
if [ -f /usr/src/app/completed ]; then
  echo "Installation skipped"
  tail -f  /dev/null 
fi
cp -p /home/node/package.json /usr/src/app/.
cd /usr/src/app
git clone --depth 1 https://github.com/llk/scratch-gui.git
git clone --depth 1 https://github.com/llk/scratch-vm.git
cd scratch-vm
yarn install
yarn link
cd ../scratch-gui
yarn link scratch-vm
yarn install
touch /usr/src/app/completed
tail -f  /dev/null 

以下がDockerfileの内容です。初回コンテナ起動時のみinstall.shから各種コマンドを実行するようにしています。

FROM node:12.16-alpine3.11

ENV NODE_ENV=development
WORKDIR /usr/src/app

RUN apk update && apk upgrade && apk add --no-cache \
    bash git openssh python2 curl

RUN npm i -g webpack webpack-cli webpack-dev-server

COPY --chown=node:node package.json /home/node
COPY install.sh   /home/node
RUN  chmod +x     /home/node/install.sh
RUN  chmod +w     /home/node/package.json
CMD  ["/home/node/install.sh"]

こちらが、docker-compose.ymlの内容です。
インストールした内容は~/work/data/scratchに格納されます。

/docker-compose.yml

version: '3'

services:
  app:
    image: scratch3:12.16-alpine3.11
    build: 
      context: .
      dockerfile: ./Dockerfile
    user: "node:node"
    restart: always
    environment:
      NODE_ENV: development
    ports:
      - 8601:8601
    volumes:
        - ~/work/data/scratch:/usr/src/app
    tty: true

image作成→コンテナ起動→install.sh実行で準備完了。
その後にdocker-compose exec app yarn startを実行してScratchのサービスを起動するという流れです。

How To Install

具体的な構築点順は以下の通りです。

1. Dockerfile等のclone

git clone https://github.com/ken992/Scratch3.0/

2. Dockerfileのbuildとコンテナ起動

cd Scratch3.0
docker-compose up -d

3. install.shの実行状況確認

docker-compose logs -f

以下のメッセージがでたらScratch3.0のインストール完了

〜〜〜省略〜〜〜〜〜〜〜〜〜〜
[4/4] Building fresh packages...
success Saved lockfile.
Done in 78.74s.

4. Scratch3.0のサービス起動

docker-compose exec app yarn start

以下メッセージが出たら起動完了

｢wdm｣: Compiled successfully.

5. ブラウザにアクセスする

http://0.0.0.0:8601/

以下にコミットしています。