AWS
EC2
Scratch
YARN
Scratch3.0

Scratch3.0をforkしてAWSのEC2に開発環境を作るまで


はじめに

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」ボタンは画面右上の以下のボタンです。

image.png


開発用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へ同一ユーザでアクセスする