十分钟部署个人论坛

CoderLim
810 阅读4分钟

image

背景

本文将会介绍如何基于 flarum1.7 搭建个人论坛。flarum 是个免费开源项目，界面简洁，高度可定制，如果你也想拥有个人论坛，falrum 是个不错的选择。

我的服务器是 Linux Debian，不同的系统安装流程可能会有差异

部署环境

Flarum 环境要求：docs.flarum.org/install

  1. 安装 Nginx
sudo apt update
sudo apt install nginx
  1. 安装 PHP 7.3 及必要的扩展
sudo apt install php7.3 php7.3-fpm php7.3-curl php7.3-xml php7.3-gd php7.3-json php7.3-mbstring php7.3-mysql php7.3-zip
  1. 安装 MySQL
  sudo apt install mysql-server
  
  # 如果上面命令报错：Package mysql-server is not available
  # 尝试用下面的命令
  # 因为在某些 Debian 发行版中，mysql-server 软件包可能已被替换为 default-mysql-server
  sudo apt install default-mysql-server
  1. 安装 Composer
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
sudo chmod +x /usr/local/bin/composer
  1. 使用 Composer 安装 Flarum
# 1. 创建存放 flarum 的目录
mkdir ~/flarum
cd ~/flarum

# 2. 创建 flarum
composer create-project flarum/flarum . --stability=beta

配置 nginx

  1. 创建一个 Nginx 配置文件，例如 flarum.conf，并将其放置在 /etc/nginx/sites-available 目录下。可以使用以下命令创建并打开该文件：
sudo nano /etc/nginx/sites-available/flarum.conf
  1. 将以下内容粘贴到刚刚创建的 flarum.conf 文件中。请确保将 /path/to/your/flarum/public 替换为安装 Flarum 的实际目录，例如 /home/your_username/flarum/public。
server {
    listen 80;
    server_name example.com; # 将此处的 example.com 替换为您的域名或服务器 IP 地址

    root /path/to/your/flarum/public; # 将此路径替换为您的 Flarum public 目录的实际路径
    index index.php;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php7.3-fpm.sock; # 确保此处的 PHP 版本与您安装的一致
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}
  1. 创建一个符号链接，将 Nginx 配置文件链接到 sites-enabled 目录：
# 当 Nginx 启动时，它会扫描 /etc/nginx/sites-enabled 目录中的所有文件，并将它们用作虚拟主机配置。
sudo ln -s /etc/nginx/sites-available/flarum.conf /etc/nginx/sites-enabled/
  1. 启动 nginx
sudo systemctl start nginx
sudo systemctl enable nginx
  1. 有些文件操作可能没权限，简单（不安全）起见，我们把 flarum 目录的权限完全放开
sudo chmod -R 777 /path/to/your/flarum

数据库账户

创建一个账户，用来操作数据库

  1. 登录到 MySQL：
sudo mysql
  1. 创建一个新的数据库，例如 db1：
CREATE DATABASE db1;
  1. 创建一个新的数据库用户并设置密码。将 user1 和 your_password 替换为你的用户名和密码：
CREATE USER 'user1'@'localhost' IDENTIFIED BY 'your_password';
  1. 授权新用户访问新创建的数据库：
GRANT ALL PRIVILEGES ON flarum.* TO 'user1'@'localhost';
  1. 刷新权限并退出 MySQL：
FLUSH PRIVILEGES;
EXIT;

安装 flarum

浏览器首次打开 ip:80，会进入安装界面，按照上一步的数据库信息填写 MySQL 部分

image

提交后，就进入到你的论坛了：

image

创建扩展

Flarum 支持完全定制，通过扩展你可以做任何想做的事情，比如修改页面的任何部分。

下面我们通过扩展来修改页面头部。

  1. 安装脚手架 flarum-cli：github.com/flarum/cli#…

  2. 创建扩展

cd /path/to/your/flarum
# 创建一个扩展目录
mkdir extensions

# 创建 custom-header 目录
cd extensions
mkdir custom-header

# 生成自定义扩展
flarum-cli init
# 根据 cli 的提示选择即可，其中我们的扩展包名为：lim/custom-header，下面会用到
  1. 支持 tsx

安装依赖

cd ./extensions/custom-header/js/src
npm install --save-dev typescript ts-loader react react-dom @types/react @types/react-dom

修改 webpack.config.js 为如下内容：

module.exports = require('flarum-webpack-config')({
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
          },
        ],
      },
    ],
  },
});
  1. 增加自定义 Header 的逻辑
cd ./extensions/custom-header/js/src/forum
# 将 index.ts 改为 index.tsx
mv index.ts index.tsx

我们希望在 Header 上增加三个按钮，index.tsx 的代码如下：

import app from 'flarum/forum/app';
import { extend } from 'flarum/common/extend';
import HeaderSecondary from 'flarum/components/HeaderSecondary';

app.initializers.add('lim/custom-header', () => {
  extend(HeaderSecondary.prototype, 'items', function (items) {
    items.add(
      'nav-button-1',
      <a href="your_link_1" className="Button Button--link">
        Button 1
      </a>
    );
    items.add(
      'nav-button-2',
      <a href="your_link_2" className="Button Button--link">
        Button 2
      </a>
    );
    items.add(
      'nav-button-3',
      <a href="your_link_3" className="Button Button--link">
        Button 3
      </a>
    );
  });
});
  1. 编译扩展
cd ./extensions/custom-header/js
npm run build

安装扩展

这里用的是手动添加扩展到

  1. 修改 Flarum 安装目录下的 composer.json 文件：
"require": {
  ...
  "lim/custom-header": "0.1.0"
  ...
}

确保版本号与 custom-header 扩展的 composer.json 文件中设置的版本号相匹配。

  1. 安装扩展：

在 Flarum 安装目录下打开命令行，运行以下命令：

composer update lim/custom-header --prefer-source
  1. 清除缓存：

在 Flarum 安装目录下，运行以下命令清除缓存：

php flarum cache:clear

启用扩展

  1. 进入到管理员界面：

image

  1. 启用扩展

image

  1. 刷新页面，出现了自定义的按钮

image

总结

如果在部署的时候遇到问题，可以根据日志定位，其中 nginx 日志位于 /var/log/nginx/error.log，flarum 日志位于 /path/to/your/flarum/storage/logs。

如有疑问，欢迎评论交流。

avatar
文章
阅读
粉丝