【Docker対応】scratch-guiとscratch-vmをインストールして独自の拡張機能を作成する開発環境を整える

            
            $ docker --version
Docker version 19.03.8, build afacb8b7f0
$ docker-compose --version
docker-compose version 1.16.1, build 6d1ac21
        

            
            FROM node:12.22-alpine3.11

WORKDIR /usr/src/app

ENV NODE_ENV=development

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

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

            
            version: '3'

services:
  app:
    image: scratch3:12.22-alpine3.11
    build: .
    user: "node:node"
    environment:
      NODE_ENV: development
    ports:
      - 8073:8073
      - 8601:8601
    volumes:
        - ./:/usr/src/app
    tty: true
        

            
            $ docker-compose build
Building app
Step 1/5 : FROM node:12.22-alpine3.11
 ---> 927d03058714
Step 2/5 : WORKDIR /usr/src/app
 ---> Using cache
 ---> 135d504707ce
#中略
+ webpack-cli@3.3.12
+ webpack-dev-server@3.11.0
+ webpack@4.44.1
added 919 packages from 358 contributors in 71.123s
Removing intermediate container 279a1bd8a793
 ---> 5fa04a01f765
Successfully built 5fa04a01f765
Successfully tagged scratch3:12.22-alpine3.11
        

            
            $ docker images
REPOSITORY                       TAG                   IMAGE ID            CREATED             SIZE
tcnct/scratch3                   12.22-alpine3.11      5fa04a01f765        22 minutes ago      216MB
node                             12.22-alpine3.11      927d03058714        6 months ago        88.1MB
#以下略
        

            
            #👇コンテナを起動
$ docker-compose up -d
Creating network "scracth3dckr_default" with the default driver
Creating scracth3dckr_app_1 ...
Creating scracth3dckr_app_1 ... done
#👇appサービスにインタラクティブモードにbashから入る
$ docker-compose exec app bash
#👇コンテナ内で色々と作業
bash-5.0$ whoami
node
bash-5.0$ node --version
v12.16.1
bash-5.0$ npm --version
6.13.4
bash-5.0$ yarn --version
1.22.0
#👇作業が終わったらコンテナから抜ける
bash-5.0$ exit
exit
#👇コンテナを停止・破棄
$ docker-compose down
Stopping scracth3dckr_app_1 ... done
Removing scracth3dckr_app_1 ... done
Removing network scracth3dckr_default
        

            
            $ git clone --depth 1 https://github.com/llk/scratch-gui.git
Cloning into 'scratch-gui'...
remote: Enumerating objects: 1001, done.
remote: Counting objects: 100% (1001/1001), done.
remote: Compressing objects: 100% (966/966), done.
remote: Total 1001 (delta 61), reused 682 (delta 20), pack-reused 0
Receiving objects: 100% (1001/1001), 15.35 MiB | 99.00 KiB/s, done.
Resolving deltas: 100% (61/61), done.
        

            
            $ tree -L 2
.
├── Dockerfile
├── docker-compose.yml
├── package.json
└── scratch-gui
    ├── LICENSE
    ├── README.md
    ├── TRADEMARK
    ├── docs
    ├── package-lock.json
    ├── package.json
    ├── prune-gh-pages.sh
    ├── renovate.json5
    ├── src
    ├── test
    ├── static
    └── webpack.config.js
        

            
            $ cd scratch-gui
$ yarn install
yarn install v1.22.0
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
warning @babel/cli > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
#...中略
[4/4] Building fresh packages...
success Saved lockfile.
Done in 89.77s.
        

            
            $ yarn start
webpack-dev-server
10% building 6/6 modules 0 activeℹ ｢wds｣: Project is running at http://0.0.0.0:8601/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/scratch-gui/build
65% building 581/631 modules 50 active ...sion-worker.js!/usr/src/app/scratch-gui/node_modules/babel-loader/lib/index.js??ref--4!/usr/src/app/scratch-gui/node_modules/scratch-vm/src/extension-support/extension-worker.js(node:189) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
ℹ ｢wdm｣: Hash: 969023fad960bd8371c2
Version: webpack 4.44.1
#中略
        [./node_modules/scratch-vm/src/util/log.js] 84 bytes {main} [built]
        [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
            + 5 hidden modules
ℹ ｢wdm｣: Compiled successfully.
        

            
            $ git clone --depth 1 https://github.com/llk/scratch-vm.git
Cloning into 'scratch-vm'...
remote: Enumerating objects: 488, done.
remote: Counting objects: 100% (488/488), done.
remote: Compressing objects: 100% (367/367), done.
remote: Total 488 (delta 119), reused 313 (delta 100), pack-reused 0
Receiving objects: 100% (488/488), 7.92 MiB | 125.00 KiB/s, done.
Resolving deltas: 100% (119/119), done.
        

            
            $ tree -L 2
.
├── Dockerfile
├── docker-compose.yml
├── package.json
└── scratch-vm
    ├── LICENSE
    ├── README.md
    ├── TRADEMARK
    ├── docs
    ├── package-lock.json
    ├── package.json
    ├── src
    ├── test
    └── webpack.config.js
        

            
            $ yarn add scratch-vm -S
        

            
            $ cd scratch-vm
$ yarn install
yarn install v1.22.0
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
warning nets > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
#...中略
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 87.16s.
        

            
            //...中略
import VM from 'scratch-vm';

//...中略

const vmManagerHOC = function (WrappedComponent) {
    class VMManager extends React.Component {
        constructor (props) {
            super(props);
            bindAll(this, [
                'loadProject'
            ]);
        }
        //...中略
        render () {
            const {
                /* eslint-disable no-unused-vars */
                fontsLoaded,
                loadingState,
                locale,
                messages,
                isStarted,
                onError: onErrorProp,
                onLoadedProject: onLoadedProjectProp,
                onSetProjectUnchanged,
                projectData,
                /* eslint-enable no-unused-vars */
                isLoadingWithId: isLoadingWithIdProp,
                vm,
                ...componentProps
            } = this.props;
            return (
                <WrappedComponent
                    isLoading={isLoadingWithIdProp}
                    vm={vm}
                    {...componentProps}
                />
            );
        }
    }

    VMManager.propTypes = {
        //...中略
        //👇vmがscratch-vmのインスタンスとなる
        vm: PropTypes.instanceOf(VM).isRequired
    };

    //...中略

    return connect(
        mapStateToProps,
        mapDispatchToProps,
        mergeProps
    )(VMManager);
};

export default vmManagerHOC;
        

            
            $ cd scratch-vm
$ yarn link
yarn link v1.22.0
success Registered "scratch-vm".
info You can now run `yarn link "scratch-vm"` in the projects where you want to use this package and it will be used instead.
Done in 0.06s.
        

            
            $ cd my-scratch-project
$ yarn link scratch-vm