3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-03-04

はじめに

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?