基于Fiora搭建属于你自己的Web聊天室

博主：夜棂依
发布时间：2021 年 12 月 12 日
1288 次浏览
关闭评论
3748字数
分类：教程

<div class="tip share">请注意，本文编写于 1022 天前，最后修改于 933 天前，其中某些信息可能已经过时。</div>

# 前言

本文将演示如何搭建一个开源的Web聊天室——Fiora

Fiora App编译详见：[《编译自己的Fiora App》](https://blog.yareiy.com/archives/FioraApp/)

演示站

[https://fiora.suisuijiang.com](https://fiora.suisuijiang.com/)

# 安装

## 环境准备

### 手动安装

要运行 Fiora, 你需要 Node.js(推荐 v14 LTS 版本),MongoDB 和 Redis

* 安装 Node.js
  * 官网 [http://nodejs.cn/download/](http://nodejs.cn/download/)
  * 更推荐使用 nvm 安装 Node.js
    * 安装 nvm [https://github.com/nvm-sh/nvm#install--update-script](https://github.com/nvm-sh/nvm#install--update-script)
    * 通过 nvm 安装 Node.js [https://github.com/nvm-sh/nvm#usage](https://github.com/nvm-sh/nvm#usage)
* 安装 MongoDB
  * 官网 [https://docs.mongodb.com/manual/installation/#install-mongodb](https://docs.mongodb.com/manual/installation/#install-mongodb)
* 安装 Redis
  * 官网 [https://redis.io/topics/quickstart](https://redis.io/topics/quickstart)

### 使用OneinStack一键安装

* 自动安装 [https://oneinstack.com/auto/](https://oneinstack.com/auto/)
* 交互安装 [https://oneinstack.com/install/](https://oneinstack.com/install/)

## 开始安装

### 从源码编译安装（推荐）

本文使用OneinStack配置环境

#### 使用OneinStack安装环境

```
yum -y install wget screen #for CentOS/Redhat

apt-get -y install wget screen #for Debian/Ubuntu

#下载最新的oneinstack
wget http://mirrors.linuxeye.com/oneinstack-full.tar.gz

#解压oneinstack
tar xzf oneinstack-full.tar.gz #解压oneinstack

#如果需要修改目录(安装、数据存储、Nginx日志)，请修改options.conf文件
cd oneinstack

#如果网络出现中断，可以执行命令`screen -R oneinstack`重新连接安装窗口
screen -S oneinstack
```

本文安装的环境是`OpenResty + PHP 7.4 + MariaDB 10.6 + MongoDB 4.0 + Redis + Nodejs`

请记得修改数据库密码
</div>

```
#安装OpenResty + PHP 7.4 + MariaDB 10.6 + Redis + Nodejs
./install.sh --nginx_option 3 --php_option 9 --phpcache_option 1 --php_extensions redis,mongodb --phpmyadmin  --db_option 5 --dbinstallmethod 1 --dbrootpwd password --node  --redis

#安装MongoDB 4.0
./install.sh --db_option 14 --dbinstallmethod 1 --dbrootpwd password
```

可选安装

```
cd oneinstack
./addons.sh
```

#### 安装Fiora

1.启动服务端

```
#在/opt目录下创建fiora文件夹
mkdir /opt/fiora

#进入/opt/fiora
cd /opt/fiora

#从GitHub拉取项目主分支
git clone https://github.com/yinxin630/fiora.git -b master

#安装yarn
npm install -g yarn

#安装依赖
yarn install

#构建
yarn build:web

#将***替换为一个随机字符串
echo "JwtSecret=***" > .env

#启动服务端
yarn start
```

2.使用浏览器打开 `http://[ip地址]:[端口]`(例如 `http://127.0.0.1:9200`)

如果开启了 `防火墙/安全组`请在 `防火墙/安全组` 开放 `9200` 端口
</div>

3.注册一个用户(例如 admin)

4.设置管理员账户

```
#Ctrl+C结束运行
Ctrl+C

#获取上一步注册的用户ID
fiora getUserId admin

#将***替换为获取到的用户ID
echo -e "\nAdministrator=***" >> .env

#启动fiora登录账号查看是否是管理员
yarn start
```

### Docker安装

#### 从 DockerHub 镜像运行

```
# 拉取 mongo
docker pull mongo

# 拉取 redis
docker pull redis

# 拉取 fiora
docker pull suisuijiang/fiora

# 创建虚拟网络
docker network create fiora-network

# 启动 mongodB
docker run --name fioradb -p 27017:27017 --network fiora-network mongo

# 启动 redis
docker run --name fioraredis -p 6379:6379 --network fiora-network redis

# 启动 fiora
docker run --name fiora -p 9200:9200 --network fiora-network -e Database=mongodb://fioradb:27017/fiora -e RedisHost=fioraredis suisuijiang/fiora
```

#### 构建镜像

1. 克隆项目到本地 `git clone https://github.com/yinxin630/fiora.git -b master`
2. 构建镜像 `docker-compose build --no-cache --force-rm`
3. 运行 `docker-compose up`

## 后台运行

### 使用Systemd

```
#给Nodejs做软链接(nodejs安装路径请根据实际情况修改)
ln -sf /usr/local/node/bin/npm /usr/bin/npm
ln -sf /usr/local/node/bin/node /usr/bin/node
ln -sf /usr/local/node/bin/yarn /usr/bin/yarn
ln -sf /usr/local/node/bin/nvm /usr/bin/nvm
```

本文使用/etc/systemd/system目录

按照以下代码中的注释修改信息后删掉注释并复制进终端运行

```
cat > /etc/systemd/system/fiora.service <<EOF
[Unit]
Description=fiora
After=network.target
Wants=network.target

[Service]
Type=simple
PIDFile=/var/run/fiora.pid
ExecStart=/usr/bin/yarn start
WorkingDirectory=/opt/fiora #此处修改为自己fiora的安装目录
Environment=NODE_ENV=production Administrator=*** Port=9200 #将***替换为之前获取的管理员用户ID
User=root
Restart=on-failure
RestartSec=42s

[Install]
WantedBy=multi-user.target
```

重新加载服务配置文件 `systemctl daemon-reload`

启动 `systemctl start fiora`

查看状态 `systemctl status fiora`

设置开机启动 `systemctl enable fiora`

重启 `systemctl restart fiora`

### 使用PM2

```
#安装 pm2
npm install -g pm2

#使用 pm2 运行 fiora
pm2 start yarn --name fiora -- start

#查看 pm2 应用状态
pm2 ls

#查看 pm2 fiora 日志
pm2 logs fiora
```

## 域名反代

本文使用`Nginx`演示

添加网站配置文件(请根据实际情况修改)

如使用`Https`请自行配置`SSL`证书

```
server {
  listen 80;
  listen [::]:80;
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  ssl_certificate /usr/local/openresty/nginx/conf/ssl/extensive_yareiy.com.crt;
  ssl_certificate_key /usr/local/openresty/nginx/conf/ssl/extensive_yareiy.com.key;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
  ssl_ciphers TLS13-AES-256-GCM-SHA384:TLS13-CHACHA20-POLY1305-SHA256:TLS13-AES-128-GCM-SHA256:TLS13-AES-128-CCM-8-SHA256:TLS13-AES-128-CCM-SHA256:EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
  ssl_prefer_server_ciphers on;
  ssl_session_timeout 10m;
  ssl_session_cache builtin:1000 shared:SSL:10m;
  ssl_buffer_size 1400;
  add_header Strict-Transport-Security max-age=31536000;
  ssl_stapling on;
  ssl_stapling_verify on;
  server_name chat.yareiy.com;
  access_log /var/www/wwwlogs/chat.yareiy.com_nginx.log combined;
  index index.html index.htm index.php;
  root /var/www/wwwroot/chat.yareiy.com;
  
  #HTTP_TO_HTTPS_START
  if ($server_port !~ 443){
    rewrite ^(/.*)$ https://$host$1 permanent;
  }
  #HTTP_TO_HTTPS_END

include /usr/local/openresty/nginx/conf/rewrite/none.conf;
  error_page 497  https://$host$request_uri;
  #error_page 404 /404.html;
  #error_page 502 /502.html;
  
  #PROXY-START/
  location  ~* \.(gif|png|jpg|css|js|woff|woff2)$
  {
    proxy_pass http://127.0.0.1:9200;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    expires 12h;
  }
  location /
  {
    proxy_pass http://127.0.0.1:9200;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
  
    add_header X-Cache $upstream_cache_status;
  
    #Set Nginx Cache
  
    add_header Cache-Control no-cache;
  }

#PROXY-END/

location ~ [^/]\.php(/|$) {
    #fastcgi_pass remote_php_ip:9000;
    fastcgi_pass unix:/dev/shm/php-cgi.sock;
    fastcgi_index index.php;
    include fastcgi.conf;
  }

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
    expires 30d;
    access_log off;
  }
  location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
  }
  location ~ /(\.user\.ini|\.ht|\.git|\.svn|\.project|LICENSE|README\.md) {
    deny all;
  }
}
```

```
#重启Nginx
systemctl restart nginx
```

## 自定义

侧边栏目录

`/opt/fiora/packages/web/src/modules/Sidebar/`

主文件为`Sidebar.tsx`

主页

`/opt/fiora/packages/web/src/template.html`

图标

`/opt/fiora/packages/server/public/`

`favicon-96.png favicon-192.png favicon-512.png`

主题

`/opt/fiora/packages/web/src`

`themes.ts`

系统消息

`/opt/fiora/packages/utils`

`convertMessage.ts`

PWA名称

```
#修改这行
<meta name="apple-mobile-web-app-title" content="fiora">

#修改后
<meta name="apple-mobile-web-app-title" content="唯信YuiChat">
```

修改之后需要重新构建

```
#重新构建
yarn build:web

#启动
yarn start
```

## 备份及迁移

备份及迁移MongoDB数据库和 `public`下的文件即可

End

本文标题：基于Fiora搭建属于你自己的Web聊天室

本文链接：https://blog.reiyy.com/archives/FioraInstall/

除非另有说明，本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。

声明：转载请注明文章来源。

最后修改：2022 年 03 月 11 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

基于Fiora搭建属于你自己的Web聊天室

夜棂依 • 2021 年 12 月 12 日

<div class="tip share">请注意，本文编写于 1022 天前，最后修改于 933 天前，其中某些信息可能已经过时。</div>

# 前言

本文将演示如何搭建一个开源的Web聊天室——Fiora

Fiora App编译详见：[《编译自己的Fiora App》](https://blog.yareiy.com/archives/FioraApp/)

演示站

[https://fiora.suisuijiang.com](https://fiora.suisuijiang.com/)

# 安装

## 环境准备

### 手动安装

要运行 Fiora, 你需要 Node.js(推荐 v14 LTS 版本),MongoDB 和 Redis

### 使用OneinStack一键安装

* 自动安装 [https://oneinstack.com/auto/](https://oneinstack.com/auto/)
* 交互安装 [https://oneinstack.com/install/](https://oneinstack.com/install/)

## 开始安装

### 从源码编译安装（推荐）

本文使用OneinStack配置环境

#### 使用OneinStack安装环境

```
yum -y install wget screen #for CentOS/Redhat

apt-get -y install wget screen #for Debian/Ubuntu

#下载最新的oneinstack
wget http://mirrors.linuxeye.com/oneinstack-full.tar.gz

#解压oneinstack
tar xzf oneinstack-full.tar.gz #解压oneinstack

#如果需要修改目录(安装、数据存储、Nginx日志)，请修改options.conf文件
cd oneinstack

#如果网络出现中断，可以执行命令`screen -R oneinstack`重新连接安装窗口
screen -S oneinstack
```

本文安装的环境是`OpenResty + PHP 7.4 + MariaDB 10.6 + MongoDB 4.0 + Redis + Nodejs`

请记得修改数据库密码
</div>

#安装MongoDB 4.0
./install.sh --db_option 14 --dbinstallmethod 1 --dbrootpwd password
```

可选安装

```
cd oneinstack
./addons.sh
```

#### 安装Fiora

1.启动服务端

```
#在/opt目录下创建fiora文件夹
mkdir /opt/fiora

#进入/opt/fiora
cd /opt/fiora

#从GitHub拉取项目主分支
git clone https://github.com/yinxin630/fiora.git -b master

#安装yarn
npm install -g yarn

#安装依赖
yarn install

#构建
yarn build:web

#将***替换为一个随机字符串
echo "JwtSecret=***" > .env

#启动服务端
yarn start
```

2.使用浏览器打开 `http://[ip地址]:[端口]`(例如 `http://127.0.0.1:9200`)

如果开启了 `防火墙/安全组`请在 `防火墙/安全组` 开放 `9200` 端口
</div>

3.注册一个用户(例如 admin)

4.设置管理员账户

```
#Ctrl+C结束运行
Ctrl+C

#获取上一步注册的用户ID
fiora getUserId admin

#将***替换为获取到的用户ID
echo -e "\nAdministrator=***" >> .env

#启动fiora登录账号查看是否是管理员
yarn start
```

### Docker安装

#### 从 DockerHub 镜像运行

```
# 拉取 mongo
docker pull mongo

# 拉取 redis
docker pull redis

# 拉取 fiora
docker pull suisuijiang/fiora

# 创建虚拟网络
docker network create fiora-network

# 启动 mongodB
docker run --name fioradb -p 27017:27017 --network fiora-network mongo

# 启动 redis
docker run --name fioraredis -p 6379:6379 --network fiora-network redis

# 启动 fiora
docker run --name fiora -p 9200:9200 --network fiora-network -e Database=mongodb://fioradb:27017/fiora -e RedisHost=fioraredis suisuijiang/fiora
```

#### 构建镜像

1. 克隆项目到本地 `git clone https://github.com/yinxin630/fiora.git -b master`
2. 构建镜像 `docker-compose build --no-cache --force-rm`
3. 运行 `docker-compose up`

## 后台运行

### 使用Systemd

本文使用/etc/systemd/system目录

按照以下代码中的注释修改信息后删掉注释并复制进终端运行

```
cat > /etc/systemd/system/fiora.service <<EOF
[Unit]
Description=fiora
After=network.target
Wants=network.target

[Install]
WantedBy=multi-user.target
```

重新加载服务配置文件 `systemctl daemon-reload`

启动 `systemctl start fiora`

查看状态 `systemctl status fiora`

设置开机启动 `systemctl enable fiora`

重启 `systemctl restart fiora`

### 使用PM2

```
#安装 pm2
npm install -g pm2

#使用 pm2 运行 fiora
pm2 start yarn --name fiora -- start

#查看 pm2 应用状态
pm2 ls

#查看 pm2 fiora 日志
pm2 logs fiora
```

## 域名反代

本文使用`Nginx`演示

添加网站配置文件(请根据实际情况修改)

如使用`Https`请自行配置`SSL`证书

#PROXY-END/

location ~ [^/]\.php(/|$) {
    #fastcgi_pass remote_php_ip:9000;
    fastcgi_pass unix:/dev/shm/php-cgi.sock;
    fastcgi_index index.php;
    include fastcgi.conf;
  }

```
#重启Nginx
systemctl restart nginx
```

## 自定义

侧边栏目录

`/opt/fiora/packages/web/src/modules/Sidebar/`

主文件为`Sidebar.tsx`

主页

`/opt/fiora/packages/web/src/template.html`

图标

`/opt/fiora/packages/server/public/`

`favicon-96.png favicon-192.png favicon-512.png`

主题

`/opt/fiora/packages/web/src`

`themes.ts`

系统消息

`/opt/fiora/packages/utils`

`convertMessage.ts`

PWA名称

```
#修改这行
<meta name="apple-mobile-web-app-title" content="fiora">

#修改后
<meta name="apple-mobile-web-app-title" content="唯信YuiChat">
```

修改之后需要重新构建

```
#重新构建
yarn build:web

#启动
yarn start
```

基于Fiora搭建属于你自己的Web聊天室

欢迎使用 Typecho

《东方弹幕神乐》界面功能介绍及部分系统简介

基于Fiora搭建属于你自己的Web聊天室

在CentOS上部署Pagermaid

编译你自己的Fiora App

在CentOS上部署Pagermaid

欢迎使用 Typecho

基于Fiora搭建属于你自己的Web聊天室

《东方弹幕神乐》界面功能介绍及部分系统简介

MyDevice

基于Fiora搭建属于你自己的Web聊天室