はじめに

Scratch3.0の開発環境を構築する方法は以下に記載されていますが、いつでもどこでも開発環境にアクセスできるようにAWS上のEC2上に開発環境を用意することにしました。

公式Webサイトでの環境構築方法

Scratch 3.0でオリジナルブロックをつくろう

fork

まず、scratch3.0のソースは以下にあります。
https://github.com/llk/scratch-vm.git
https://github.com/llk/scratch-gui.git

公式ソースを自分のgithubアカウントのリポジトリとしてforkします。

forkの仕方は簡単です。
・webブラウザにて、自分のアカウントでgithubにログインしておく
・forkしたいgithubリポジトリをwebブラウザで表示
・「Fork」ボタンをクリック

「Fork」ボタンは画面右上の以下のボタンです。

開発用EC2生成

AWSにログインし、EC2インスタンスを作成します。
ローカルPCからSSHでログインし、開発することを想定しています。

リージョン：どこでも（用途に合わせて）
VPC、サブネット：パブリックサブネットとし、インバウンドでアクセスするIPを絞り込む
AMI：普通のAmazon Linux
インスタンスタイプ：t2.micro（用途に合わせて）

EC2へログイン

windowsならteraterm等で、macならconsoleでEC2にログインします。

yum update

$ sudo yum update

gitのインストール

Amazon LinuxのEC2にはgitが入っていません。
以下でgitをインストールします。

sudo yum install git

yarnのインストール

Scratch3.0の環境構築は公式Wikiではnpmを使用していますが、以下のページを参考にし、yarnで実行していきます。yarnの方がコマンドが簡略的でよい、というのはweb上で目にします。

Scratch 3.0でオリジナルブロックをつくろう

yarn自体のEC2へのインストールは以下のサイトを参考にしました。

AmazonLinuxにyarnをインストールする

wget自体はすでにEC2にインストールされているようなのでスルーします。
yarnをyumでインストールできるようにyarnのリポジトリを追加します。

$ sudo wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo

yarnはnode.jsが無いとインストールできないようで、node.jsをインストールします。
2019/3/4時点のnode.jsの最新バージョンは11.x系なので、以下のようにします（が、以下のようにエラーとなります）。

curl -sL https://rpm.nodesource.com/setup_11.x | bash -

しかし、上記で以下のエラーとなりました。

## Installing release setup RPM...

+ rpm -i --nosignature --force '/tmp/tmp.qpRLhaXRst'
error: can't create transaction lock on /var/lib/rpm/.rpm.lock (Permission denied)
Error executing command, exiting

.rpm.lockへのアクセス権がないとのこと。

-rw-r--r--  1 root root        0 Feb 28 02:06 .rpm.lock

rootユーザのみ書き込みアクセスできるようです。
しかし、sudo をつけても解決できず。
以下のように、rootユーザとなることで解決しました。

$ sudo su -
$ curl -sL https://rpm.nodesource.com/setup_11.x | bash -

以下の実行でyarnをインストールできます。

sudo yum install gcc-c++ make
sudo yum install yarn

EC2にscratch3.0のプロジェクトをclone

自分のgithubにforkしたscratchのソースをEC2にcloneします。
以下、EC2上での操作です。「GITHUBID」は各自のIDとなります。

$ git clone --depth 1 https://github.com/[GITHUBID]/scratch-vm.git
$ git clone --depth 1 https://github.com/[GITHUBID]/scratch-gui.git

git clone --depth 1はmasterだけをcloneするので早いです。

scratchに依存するパッケージのダウンロードおよび依存関係設定

scratch-vmに依存するパッケージをダウンロードし、yarn linkでリンクします（よくわかってませんが）。

$ cd scratch-vm && yarn install && yarn link

scratch-guiにてscratch-vmをリンクし、依存する他のパッケージをダウンロードします。

$ cd scratch-gui && yarn link scratch-vm && yarn install

ビルド

scratch-gui配下で以下を実行し、ビルドします。

$ yarn build

すると、以下のフォルダが作成されます。
scratch-gui/build

このbuild配下がビルドした成果物で、これを静的コンテンツとしてgithub(webpack)やS3に配置し、scratch3.0として公開できます！

githubにデプロイ

自分のgithubアカウントのリポジトリにscatch3.0をホストします。

$ yarn deploy

これだけです！
以下のようにgithubに静的webとしてscratch3.0をホストできました。

https:/[githubid].github.io/scratch-gui/

どうやら、scratch-guiプロジェクトのブランチとしてコミットされ、webpackとして公開されているようです。こういうブランチの使い方ってありなのでしょうか？

これで、環境は整いました。後は拡張機能を作りこんで楽しみます！
また、scratch-guiのgithubのwikiにはTravis CIで自動化できるよ、とあります。このあたりもチャレンジしたいです。

複数の端末から同一のEC2へアクセスする方法

以下に記載しました。

複数端末からEC2へ同一ユーザでアクセスする