Fiora 構築ガイド
はじめに
コンピューターを学び始めた頃からの夢の一つである「チャットルーム」を実現するため、Fiora の構築に再挑戦しました。これまで何度か Fiora を構築しようと試みましたが、成功したのは一度だけ。しかもその時は Docker を使ってイメージファイルからインストールしたため、本当の意味でのソースコードからの構築とは言えませんでした。今回のガイドでは、ソースコードからの構築方法を解説します。
Fiora とは
碎碎酱（スイスイジャン）氏によって開発されたチャットルームシステムです。諸般の事情により、Fiora は更新が停止され、メンテナンスもほとんど行われていません。そのため、2023 年の現在、Fiora を再び動かすのは非常に困難です。さらに、Fiora のドキュメントは詳細さに欠けるため、初心者が構築する際には多くの落とし穴があります。しかし、メンテナンスの少なさや構築の難しさを除けば、Fiora は非常に優れたチャットルームシステムです。
落とし穴を避けるためのガイド
Fiora の構築の仕組みはおおよそ理解しているものの、いくつかの問題を解決できない場合、ここで解決のヒントを紹介します。
- Node.js のバージョンについて：v14 LTS を使用してください。
yarn build:web、つまりクライアントのビルド時に、画像のような問題が発生した場合、
これはおそらく Node.js のバージョンが高すぎることが原因です。2015 年開始のプロジェクトですから、現在の高いバージョンの Node.js を使うのは無作法というものです。画像の下から 6 行目のコマンドに、現在使用している Node.js のバージョンが表示されています。もし見つけられない場合は、以下のコマンドを実行して確認してください。
# Node.js のバージョンを確認 node -v # または node --version
通常は最新バージョンが表示されますが、使用すべきは Node.js v14 です。切り替え後、上記のコマンドを再度実行して反映を確認してください。反映されない場合は、サーバーの再起動を試してください。切り替え後は、yarn の再インストール、依存関係のインストール、クライアントのビルドをやり直す必要があります。
- Node.js のバージョンについて：v14 LTS を使用してください。
- クライアントのビルドに時間がかかる場合は、サーバーをアップグレードしてください。2 コア 2G RAM を推奨します。
- UserID の取得について：Fiora の組み込みコマンドでは UserID を取得できません。コンソールを確認してください。
- Fiora 付属の App のビルド問題：新しいビルド方法を使用する必要があります。Fiora docs に記載されている方法は使えません。ただし、Fiora はしばらく前にコードをリファクタリングしたため、App がサーバーと通信できなくなる可能性があることに注意してください。
構築を始める
サーバー構成ガイド
Fiora の要求スペックは高くありませんが、ソースコードからのビルドにはそれなりの構成が必要です。
- 構成要件：1 コア 2GB 以上（推奨：2 コア 2GB）
- ネットワーク要件：外部ネットワークに接続可能であること
- ディスク容量：2GB 以上
- 環境要件：Node.js（v14）、MongoDB、Redis
- サーバーOS：Ubuntu 22（この OS に基づいて構築ガイドを説明します）
Node.js、MongoDB、Redis のインストール方法については説明しません。手間を省きたい場合は、おなじみの BT.CN をインストールし、PM2 マネージャーを選択してインストールしてください。そうすれば、pm2 や npm を追加でインストールする必要はありません。
構築ガイド
Web クライアントの構築
まず、プロジェクトをローカルにクローンします。その前に、サーバーに git がインストールされていることを確認してください。通常はインストールされています。以下のコマンドを入力します。
# プロジェクトをローカルにクローン
git clone https://github.com/yinxin630/fiora.git -b master
注意点として、サーバーが中国国内にある場合、クローンに失敗することがあります。その場合は、GitHub からダウンロードしてサーバーにアップロードしてください。クローンが完了したら、Fiora ディレクトリに移動します。
cd /fiora
このコードを実行する際は、必ず現在のディレクトリを確認してください。例えば、Fiora をクローンしたディレクトリが /www/project の場合、入力するコマンドは次のようになります。
cd /www/project/fiora
次に、使用している Node.js のバージョンが v14 であることを必ず確認してください。以下のコマンドで確認します。
# Node.js のバージョンを確認
node -v
# または
node --version
これは、インストールする yarn やその後のビルドの成否に関わるためです。v14 でない場合は、必ず v14 に切り替えてください。
その後、yarn がインストールされているか確認します。通常はインストールされていません。インストール済みだと思う場合は、以下のコマンドで確認できます。
yarn -v
yarn がインストールされていない場合は、以下のコマンドでインストールします。
npm install -g yarn
しばらく待つと yarn のインストールが完了します。yarn のバージョンに特別な要件はありませんが、問題がある場合は 1.22.19 に切り替えてみてください。このバージョンは正常にビルドできることを確認済みです。
2023/12/23 追記 一連の問題を解決し、Fiora の組み込みコマンドラインツールをサポートしました。
プロジェクトの依存関係をインストールします。
yarn install
次に、Fiora プロジェクトをリンクします。
yarn link "fiora"
そして、いよいよ Fiora の正式なビルドです。Fiora のビルドは非常に簡単で、上記の作業が完了していれば、以下のコマンドを入力するだけです。
yarn build:web
しばらく待つとビルドが完了します。
次に、JwtSecret を設定します。この手順の理由は不明ですが、これがないと実行できません。コマンドラインに以下のコマンドを入力します。
echo "JwtSecret=<string>" > .env2
<string> を秘密のテキストに置き換えてください。
最後に、Fiora を起動します。
yarn start
起動後、ブラウザで http://[IPアドレス]:[ポート]（例：http://127.0.0.1:9200）にアクセスすると、ウェブサイトを閲覧できます。デフォルトのポートは 9200 です。
管理者の追加
このセクションでは、Fiora の組み込みスクリプトを使用します。実行できない場合は、Fiora プロジェクトがリンクされているか確認してください。
yarn link "fiora"
通常、上記の構築手順に従っていれば、確認なしで管理者を追加できます。
その他の Fiora 組み込みスクリプトについては→スクリプト | Fiora Docs を参照してください。
Fiora の起動に成功すると、Fiora の実行ログが表示されます。成功したアドレスにアクセスしてユーザーを登録し、ユーザー名を覚えておいてください。キーボードでCTRL キーとC キーを同時に押して、実行ログを終了します。
fiora getUserId [username]
[username] の部分に登録したユーザー名を入力します。この方法でユーザーの UserID を取得できます。
658637b993f5dbef4c3e1f0a が取得したい UserID です。この ID を /packages/config/server.ts の 34行目 に追加します。
administrator: env.Administrator ? env.Administrator.split(',') : ["658637b993f5dbef4c3e1f0a"],
設定が完了したら、Fiora を再起動します。
解決できない問題
App の構築
多くの資料を調べた結果、Fiora App | fiora docs で提供されている構築方法では、2023 年の現在、絶対に成功しないことがわかりました。大量のエラーが発生します！さらに、App の構築に成功した後、Fiora のコードがリファクタリングされたため、App は 2023 年の現在、自分のサーバーと通信できなくなっています！！！！！！！！！碎碎酱自身の App でもダメでした。ここで App の構築方法を書いたのは、もし熱心な達人がこの問題を解決してくれるかもしれないと思ったからです！！
Web の構築が完了すると、/fiora/packages ディレクトリに app ディレクトリが存在します。そこに移動します。これが App を構築するためのディレクトリです。
cd /fiora/packages/app
コマンドラインで以下のコマンドを入力し、最新の EAS CLI をインストールします。
npm install -g eas-cli
次に、Expo でアカウントを登録し、アカウントとパスワードを覚えておいてください。App の構築はローカルではなくクラウドで行うためです。次に、アカウントにログインします。
eas login
登録したアカウントとパスワードを入力すると、認証が完了します。次に、コマンドラインで以下のコマンドを入力し、パッケージの種類を選択します。↑、↓、ENTER（エンターキー）で選択します。ここでは Android のみを選択します。
eas build:configure
次に、以下のコマンドを入力して、最初のビルドを実行します。
eas build --platform android
約 10 分待つと、ログイン後の Expo のホームページに以下の内容が表示されます。
クリックすると、.aab 形式のインストールパッケージをダウンロードできます。そうです、.aab であり、.apk ではありません。そのため、2 回目のビルドが必要です。2 回目のビルドの前に、/fiora/packages/app ディレクトリに移動し、eas.json ファイルを編集して、その内容を以下に置き換えます。
{
"build": {
"preview": {
"android": {
"buildType": "apk"
}
},
"preview2": {
"android": {
"gradleCommand": ":app:assembleRelease"
}
},
"preview3": {
"developmentClient": true
},
"production": {}
}
}
その後、再度ビルドを実行します。ただし、今回は上記とは異なる以下のコマンドを使用します。
eas build -p android --profile preview
さらに 10 分待つと、App のビルドが完了し、.apk 形式のインストールパッケージをダウンロードできます。自動署名も行われています。
しかし、前述のとおり、この App はサーバーと通信できません。達人の助けが必要です！！
ポートの問題
一部のサービスプロバイダーは厳格なファイアウォールポリシーを採用しているため、必要なポートを開放する必要があります。Fiora が必要とするポートは以下を含みますが、これらに限定されません。
- 19002 App のビルドに必要
- 6379 App のビルドに必要
- 9200 Fiora Web ポート、カスタマイズ可能
- 27017 データベースポート
その他の問題
- 設定ファイル：設定 | Fiora Docs
- カスタムドメイン：リバースプロキシ | Fiora Docs
変更内容
Fiora に何らかの変更を加えたい場合は、必ずこのセクションを参照してください。繰り返しになりますが、Fiora のコードはリファクタリングされたため、Fiora | Docs は 2023 年の現在、もはや適用されず、提供されているディレクトリ構造も価値を失っています。Fiora のソースコードを変更したい場合は、私が記載したディレクトリ構成を必ず参照してください。
# Fiora のディレクトリ構成（一部）
|-- [.githubb] // github actions
|-- [.vscode] // vscode ワークスペース設定
|-- [packages] // すべてのソースコードの格納ディレクトリ
|------ [app] // App ソースコード
|---------- [src] // App ソースコード
|-------------- [pages] // App フロントエンドUI
|---------- [app.json] // App の基本情報
|---------- [src] // App ソースコード
|------ [assets] // 静的リソース
|------ [config] // Fiora 設定フォルダ
|---------- [client.ts] // クライアント設定
|---------- [server.ts] // サーバー設定
|------ [database] // データベースメソッド、通常は変更しない
|------ [server] // ビルド完了後に配置される Web
|------ [utils] // utils
|------ [web] // Web ソースコード
|---------- [src] // Web ソースコード
|-------------- [modules] // Web フロントエンドUI
|-- .eslintignore // eslint 無視
|-- .eslintrc // eslint 設定
|-- .gitignore // git 無視
|-- Dockerfile // docker ファイル
|-- LICENSE // fiora ライセンス
|-- docker-compose.yaml // docker compose 設定
|-- package.json // npm
|-- tsconfig.json // typescript 設定
|-- yarn.lock // yarn
...
終わりに
これが今回 Fiora を構築する際に経験したすべてです。後続の人が Fiora を構築する際に、少しでも落とし穴を避けられること、または初心者に Fiora チャットルームの構築方法を教えられることを願っています。この記事にはまだ不十分な点があるかもしれませんが、ご容赦ください。問題があれば指摘していただければ改善します。また、App がサーバーと通信できない問題を解決できる達人がいらっしゃいましたら、私のメールアドレス magneto@88.com までご連絡ください。感謝いたします！
参考
Fiora Docs:https://yinxin630.github.io/fiora/zh-Hans/
Create your first build:https://docs.expo.dev/build/setup/
Expo CLI:https://docs.expo.dev/more/expo-cli/#installation
Build APKs for Android Emulators and devices:https://docs.expo.dev/build-reference/apk/