はじめに
Scratch3.0の開発環境を構築する方法は以下に記載されていますが、いつでもどこでも開発環境にアクセスできるようにAWS上のEC2上に開発環境を用意することにしました。
#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」ボタンをクリック
#開発用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上で目にします。
yarn自体のEC2へのインストールは以下のサイトを参考にしました。
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へアクセスする方法
以下に記載しました。