2020年10月22日木曜日

Eclipse Sirius Web のサンプルプロジェクトを試す

Eclipse Sirius の クラウドベーススタックである Sirius Web, それのサンプルを動かした。

基本的には sirius-web/README.adoc の手順通り。

各コンポーネントの同期がとれていないのか、手順そのままでは動かなかったので、いくつか詰まった点を追記している。

前提

  • OS: Windows 10 Pro
  • Docker: Docker version 19.03.13, build 4484c46d9d
  • 使用イメージ: debian:buster-slim

GitHub Package Registry 向けのパーソナルアクセストークンを生成する

  1. Settings -> Developer settings -> Personal access tokens -> Generate new token
  2. New personal access token で必要事項入力
    • Note : read package registry
    • repo にチェックを入れる
    • read:packages にチェックを入れる
    • Generate token キー押下
  3. 表示されたアクセストークンをメモ

ビルド用コンテナ起動

最終的に、このコンテナで生成した jar ファイルを Windows 上で動かす。(ので、ポート指定は無し)

docker run -it --rm --name sirius-web -v "$(pwd):/work" -v "$HOME/.m2:/root/.m2" --workdir="/work" debian:buster-slim

作業用コンテナ内で環境構築

ビルドに必須な環境を構築

Java11, Maven, curl, git, nodejs, yalc, rollup が必要。

apt-get update
mkdir -p /usr/share/man/man1
apt-get install -y openjdk-11-jdk-headless curl git maven

# nodejs インストール
curl -sL https://deb.nodesource.com/setup_15.x | bash -
apt-get install -y nodejs

# rollup, yalc インストール
npm install -g rollup yalc

# npm 自身のアップグレード
npm install -g npm

ソース取得・ビルド

ObeoNetwork/Flow-Designer

cd /work
git clone https://github.com/ObeoNetwork/Flow-Designer.git
cd Flow-Designer
mvn clean install

ビルド済みのものが以下 issue にぶら下がっているが、それに気付く前にビルドしてしまった。

See: https://github.com/eclipse-sirius/sirius-web/blob/d4955a228200b22d78b9c37e45101efda03b976b/backend/sirius-web-sample-application/pom.xml#L44

eclipse-sirius/sirius-emf-json

# sirius-emf-json の取得・ビルド・インストール
cd /work
git clone https://github.com/eclipse-sirius/sirius-emf-json.git
cd sirius-emf-json
mvn clean install -f releng/org.eclipse.sirius.emfjson.releng/pom.xml

eclipse-sirius/sirius-components

# sirius-components の取得
cd /work
git clone https://github.com/eclipse-sirius/sirius-components.git

# sirius-components のフロントエンドをビルド・ローカルパブリッシュ
cd /work/sirius-components/frontend
npm install
npm run build
yalc publish

# sirius-components のバックエンドをビルド・インストール
cd /work/sirius-components/backend
mvn clean install

eclipse-sirius/sirius-web

GitHub の npm registry へのログイン設定

フロントエンドで GitHub の NPM パッケージレジストリを使用しているのでその設定。

echo '//npm.pkg.github.com/:_authToken=TOKEN' > ~/.npmrc
  • TOKEN: パーソナルアクセストークン

GitHub の Maven registry へのログイン設定

バックエンドで GitHub の Maven パッケージレジストリを使用しているのでその設定。

export USERNAME=mikoto2000
export PASSWORD=TOKEN
  • TOKEN: パーソナルアクセストークン

eclipse-sirius/sirius-web のソース取得・ビルド

cd /work
git clone https://github.com/eclipse-sirius/sirius-web.git

# フロントエンド
cd /work/sirius-web/frontend

# npm registry の obeo/sirius-components を削除して、
# ローカルの eclipse-sirius/sirius-components を追加
# See: https://github.com/eclipse-sirius/sirius-web/issues/1#issuecomment-712639686
sed -i -e 's/    "@obeo\/sirius-components": "0.1.27",//' ./package.json
yalc add @eclipse-sirius/sirius-components

# それにともなって、 import している箇所も修正
sed -i -e 's/obeo\/sirius-components/eclipse-sirius\/sirius-components/' ./src/index.js
sed -i -e 's/obeo\/sirius-components/eclipse-sirius\/sirius-components/' ./src/main/Main.js
npm install
npm run build

# バックエンド
cd /work/sirius-web
mkdir -p backend/sirius-web-frontend/src/main/resources/static
cp -R frontend/build/* backend/sirius-web-frontend/src/main/resources/static
cd /work/sirius-web/backend
mvn -s /work/sirius-web/settings.xml clean package

サンプルアプリケーションの実行

ビルドの時点で必要なものは jar の中に全部入ったから、これ以降は Windows 上での作業。

# sirius web 用の PostgreSQL サーバー起動
# See: https://github.com/eclipse-sirius/sirius-web/blob/master/scripts/restart-siriusweb-postgresql.sh
docker run -p 5433:5432 --rm --name sirius-web-postgres -e POSTGRES_USER=dbuser -e POSTGRES_PASSWORD=dbpwd -e POSTGRES_DB=sirius-web-db -d postgres

# Sirius Web サンプルアプリケーション起動
java -jar sirius-web/backend/sirius-web-sample-application/target/sirius-web-sample-application-0.0.1-SNAPSHOT.jar --spring.profiles.active=dev --spring.datasource.url=jdbc:postgresql://localhost:5433/sirius-web-db --spring.datasource.username=dbuser --spring.datasource.password=dbpwd

http://localhost:8080 へアクセスすると、 Sirius Web の画面が表示される。

参考資料

0 件のコメント:

コメントを投稿