ずいぶん変則的な環境のもとでXcratchを構築してGithub Pagesで公開できるものを用意しようとしたときのメモです。もっとエレガントな方法があると思いますが、ひとまず自分用なので参考までに。
Docker準備
Docker
Docker desktopをインストールしておきます。
設定
docker-compose.yml
services:
xcratch:
build:
context: ./
dockerfile: Dockerfile.local.yml
tty: true
# image: xcx
container_name: xcratch-cnt
ports:
- "80:8601"
- "22:22"
volumes:
- /Users/(username)/xcratch/xcratch:/usr/local/xcratch/xcratch
実際は上記volumesでホスト環境のディレクトリを透過的に扱えるよう複数記述している。Docker環境を再構築しても、gitからクローンしたものを永続させたいのでこういう形にしている。今回は「xcratch/xcratch」をリンクしている。
Dockerfile.local.yml
FROM ubuntu:24.04
ENV DEBIAN_FRONTEND=noninteractive
ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
RUN apt-get update && \
apt-get -y upgrade && \
apt-get install -y \
git \
curl \
openssl \
openssh-server && \
apt-get clean && \
rm -rf /var/lib/apt/lists/*
# Node.js 24
RUN curl -fsSL https://deb.nodesource.com/setup_24.x | bash - && \
apt-get install -y nodejs && \
apt-get clean && \
rm -rf /var/lib/apt/lists/*
# SSH
RUN mkdir -p /var/run/sshd
# git グローバル設定
RUN git config --global user.name "(user.name)" && \
git config --global user.email "(user.email)"
# git 証明書生成
RUN mkdir -p /usr/local/xcratch/xcratch/.vscode && \
openssl req -x509 -newkey rsa:2048 \
-keyout /usr/local/xcratch/xcratch/.vscode/localhost-key.pem \
-out /usr/local/xcratch/xcratch/.vscode/localhost.pem \
-days 365 -nodes \
-subj "/CN=localhost"
EXPOSE 22 8601
コンテナ作成
dockerコンテナを作成
docker-compose up -d
VScode
拡張機能
あらかじめVScodeで必要な拡張機能をインストールしておく。（Japanese Language Pack for Visual Studio Codeとか基本的なものはお好みで）
- Docker
- Remote Development
リモート環境に入る
Remote Explorer拡張機能も一緒にインストールされると思うので、リモートでコンテナに入る。
ターミナル
ターミナルが表示されるので（されなければ「新しいターミナル」で作成）、ホスト環境のディレクトリとリンクされたディレクトリなどでGitHubリポジトリをクローンなどして環境を構築していく。
Xcratch構築
リポジトリのクローン
リンクしたディレクトリに移動
cd xcratch
ややこしいが今回の例は「xcratch」ユーザーの下に「xcratch」ディレクトリを作ったので、「xcratch/xcratch」にしている。
GitHubのXcratchリポジトリのクローン
git clone -b xcratch https://github.com/xcratch/scratch-editor.git .
上記の例はオリジナルのxcratch/scratch-editorリポジトリをクローンするコマンドになっている。
しかし、実際には、xcratch/scratch-editorリポジトリをGitHub上でフォークして「xcratch」という名前に変更したリポジトリを使うのが今回の目的には合っている。そして、あらかじめホストのディレクトリとリンクした既存のディレクトリにクローンする（最後の「.」ピリオドで既存のディレクトリへのクローンができます）。
そもそもオリジナルScratchはマルチリポと呼ばれている複数のリポジトリに分割したスタイルで開発されていましたが，それを一つのリポジトリで管理するモノリポのスタイルに変更しました。
Xcratchもそれに合わせるようにモノリポ変更したのですが，それがscratch-editorリポジトリになります。この中のpackagesディレクトリにこれまで分かれていたscratch-vmやscratch-guiが収められています。
構築
cd /usr/local/xcratch/scratch-editor/
npm install
npm run build
npm run start --workspace=packages/scratch-gui
構築やり直し（リセット）
npm cache clean --force
rm -rf node_modules
rm package-lock.json
Github Pagesのための準備
mkdir -p docs
cp -r packages/scratch-gui/build/* docs/
GitHub上のSettingでGitHub Pagesを設定する。
本当はGitHub Actionを使う方法もあるのだが，そちらはまだ手を付けられていないので、ひとまずこれでやっている段階。
（未完）