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

# はじめに

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

[公式Webサイトでの環境構築方法](https://ja.scratch-wiki.info/wiki/Scratch_3.0%E3%81%AE%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86/%E4%B8%8B%E6%BA%96%E5%82%99)

[Scratch 3.0でオリジナルブロックをつくろう](https://qiita.com/Hiroyuki_OSAKI/items/a46e1c881d3aed4661f7)

#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](https://qiita-image-store.s3.amazonaws.com/0/300678/8d03a7c3-1138-2823-034e-3b889f01ee6f.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](https://ja.scratch-wiki.info/wiki/Scratch_3.0%E3%81%AE%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86)ではnpmを使用していますが、以下のページを参考にし、yarnで実行していきます。yarnの方がコマンドが簡略的でよい、というのはweb上で目にします。

[Scratch 3.0でオリジナルブロックをつくろう](https://qiita.com/Hiroyuki_OSAKI/items/a46e1c881d3aed4661f7)

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

[AmazonLinuxにyarnをインストールする](https://qiita.com/daikiojm/items/226c453a9a54b4057202)

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](https://github.com/LLK/scratch-gui/wiki/Publishing-to-GitHub-Pages)にはTravis CIで自動化できるよ、とあります。このあたりもチャレンジしたいです。


#複数の端末から同一のEC2へアクセスする方法
以下に記載しました。

[複数端末からEC2へ同一ユーザでアクセスする](https://qiita.com/tokageD/items/66f02f57132b611f0879)