インフォラウンジのアドベントカレンダー1日目です。
やりたいと思ってアドベントカレンダー立てたので1日目を担当します！
はじめに
Plateau View 2.0などに使われている注目のRe:Earthについて、せっかくOSSなのでソースコードを覗いてみての知見を共有させて頂きます。
特に結論のない話ですが温かく見守っていただけるとありがたいです。
理解できてないことも多いのでアドバイスもいただけるとありがたいです。
背景
バルセロナにて行われたSmart City Expo 2023でお隣にRe:Earthを開発されておられるユーカリヤさんがおられました。
OSSの方触ってる話をしたら喜んでいただき、許可をいただいて記事にさせて頂いています！
多分意図されてない使い方なんですが、こういうことしようとしてますと伝えたところ、OSSにしてるので意図してない使われ方をされるのも楽しめるような人たちの集まりと言ってて素晴らしいなと思い、自分もOSS何かやりたいなと思いました
(念のためですが、攻撃的な意図は全くないです！)
やりたいこと
- Re:Earthのソースコードをローカル環境で動かす
- ソースコードを変更して、publicページのフロントを書き換える
- 設定ファイルを取り出して別の場所でデプロイする(←できてないです)
ノーコードツールとしての素晴らしさはもちろん理解しているのですが、再現性などを考えてコードで完結もできれば色々できるなと思いました。
あとは単純にこんな複雑なものがどうゆう仕組みでできているのかみてみたかったです。
まずはReadme通りに動かしてみる
mkdir reearth
cd reearth
curl -O https://raw.githubusercontent.com/reearth/reearth/main/docker-compose.yml
docker compose up -d
# visit http://localhost:8080
localhost:8080で立ち上がりました！
基本的には公開ページとlocalhost:8080配下で同じように使えましたが、通常編集画面やプレビュー画面を開いたら出てくる地球などが出てこず、こちらと同じ状況のようでした。(プライベートモードのみで動くなどの現象もありました。)
また、Docker経由ということでやりたいようなコードを書き換えて反映させるようなことはできそうになく、ソースコードをそのまま動かす必要がありそうです。
ソースコードを動かそう
フロントエンドの公式ドキュメント
バックエンドの公式ドキュメント
基本的にはAuthの設置をして、ドキュメント通り動かせば動きます。(自分はこのドキュメントが見つけられず苦戦してました。)
web
- yarn install -> yarn start
- secium ion token
- コード内にsecium ion tokenのヒントがありました！
server
- make run-db -> make run-app
web/classic配下にcomopnent集があり、ここで色々整えられているようです。一旦web/publishedapp.tsxを書き換えて左上に文字を出すことができました！
設定ファイルのありか
- server/data/publishedにデータができることを見つけました！
{"schemaVersion":1,"id":"01hgg5bx3qrq9g7d50ry4jgj3b","publishedAt":"2023-11-30T23:20:33.871952+09:00","property":{"tiles":[{"id":"01hgg5bx3rptbkghk4q5p1arg2"}]},"plugins":{},"layers":null,"widgets":[],"widgetAlignSystem":null,"tags":[],"clusters":[]}
編集画面で変更を加えるとこのjsonファイルが書き換わっているようで、このファイルからwebを生成するようなことをやってみたいなと思っています。
レポジトリを見てみる(おまけ)
Re:Earthのレポジトリを自分が辿ったように軽くみてみます。
server
goで書かれてる！goは本格的に触ったことはないのですがとりあえずmakefileを見つけました。
lint:
golangci-lint run --fix
test:
go test -race -short -v ./...
e2e:
go test -v ./e2e/...
build:
go build ./cmd/reearth
run-app:
go run ./cmd/reearth
run-db:
docker compose -f ../docker-compose.yml up -d reearth-mongo
gql:
go generate ./internal/adapter/gql
.PHONY: lint test e2e build run-app run-db gql
とりあえずrun-appとかがメインで動きそうなので呼び出してるcmd/reearthを見にいってみます。
package main
import "github.com/reearth/reearth/server/internal/app"
var version = ""
func main() {
app.Start(debug, version)
}
おー。(github.com経由でインポートされてるのがgoだとよくみますがどうゆう経緯なんでしょうか。後で調べてみます。)
internal/app/app.goを見てみましたが、なるほどわからん状態でした。
web
React.jsです！
{
"name": "@reearth/web",
"version": "0.20.0",
"repository": "https://github.com/reearth/reearth.git",
"author": "Re:Earth contributors <community@reearth.io>",
"license": "Apache-2.0",
"private": true,
"scripts": {
"start": "yarn && vite",
"test": "vitest",
"coverage": "vitest --coverage",
"e2e": "playwright test",
"prepare": "cd .. && husky install web/.husky",
"build": "vite build",
"build:preview": "run-s build storybook:build",
"clean": "del coverage dist node_modules/.cache",
"check": "run-p type lint coverage",
"type": "tsc",
"lint": "eslint .",
"format": "eslint --fix .",
"storybook": "storybook dev -p 9001",
"storybook:build": "storybook build --quiet -o dist/storybook",
"gql": "run-s gql:beta gql:classic",
"gql:beta": "graphql-codegen",
"gql:classic": "graphql-codegen -c codegen-classic.ts",
"i18n": "i18next",
"gen:doc:plugin": "ts-node -O '{\"module\":\"CommonJS\"}' ./bin/pluginDoc"
},
"engines": {
"node": ">=16"
},
"lint-staged": {
"**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}": "eslint --fix"
},
"devDependencies": {
...
viteだ！storybookとかhusky使ってるのもいいですね。
beta, classic, coreのディレクトリの使い分けが気になります。
classic/componentsはatomicデザインをやってそうです。
おわりに
cmsも含めたでかいコードを見れて楽しかったです。
去年もPlateau Viewを触る機会があったのですが、Re:Earthベースに変わって操作スピードの向上はすごく体感しています！これからのRe:Earthの発展が楽しみです！(一月前くらいに触った情報で記事を書こうとしたのですが、結構コードが変わっていて成長されているのを実感しました！)
OSSでやられていることにリスペクトを感じ、インフォラウンジでもぜひOSSのプロジェクト立ち上げてみたいです！
記事を書くと宣言することで、いつか書きたいなで終わってたのを書くことができてよかったです！