图床搭建

免费图床搭建

项目地址

简述：Cloudflare R2存储 + Worker + Pages实现

1. Supabase管理

1.1 注册并登录

  • 自定义项目名称和数据库密码
  • 地区选择就近区域，如新加坡

1.2 创建用户资料表

使用sql创建，打开Table Editor -> SQL Editor

注意：使用命令创建需要手动开启RLS；悬停在表名后的三个点，选择编辑表，勾选RLS

1
2
3
4
5
6
7
create table public.profiles (
  id uuid primary key references auth.users on delete cascade,
  username text unique,
  avatar_url text,
  created_at timestamp with time zone default now()
);

1.3 添加访问策略

确保用户能访问自己的资料

1
2
3
4
5
6
7
8
9
create policy "Users can view their profile" on public.profiles
  for select using (auth.uid() = id);

create policy "Users can update their profile" on public.profiles
  for update using (auth.uid() = id);

create policy "Users can insert their profile" on public.profiles
  for insert with check (auth.uid() = id);

1.4 设置注册触发器：自动同步profiles

当用户注册时，自动向 profiles 表插入一条记录：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
-- 创建触发器函数
create function public.handle_new_user()
returns trigger as $$
begin
  insert into public.profiles (id)
  values (new.id);
  return new;
end;
$$ language plpgsql security definer;

-- 绑定触发器
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_user();

1.5 配置存储 Bucket（头像上传）

  • 左侧菜单栏 -> Storage -> Buckets -> New Bucket
  • Bucket 配置
    • 名称：avatars
    • 勾选Public
  • 添加上传策略
1
2
3
4
5
6
CREATE POLICY "Allow authenticated upload"
ON storage.objects
FOR INSERT
WITH CHECK (
  auth.role() = 'authenticated'
);

1.6 获取API相关信息

  • 在项目设置中的Data API获取以下信息并保存信息

  • 获取Supabase URL

  • 获取匿名访问密钥（anon key）

2. Cloudflare后端配置

2.1 开通Cloudflare R2

  • 选择【R2 对象存储】并订阅
  • 创建存储器
    • 自定义名称：img
    • 地区选择靠近用户的地区：亚太地区

2.2 创建Worker

  • 进入【Worker & Pages】

  • 创建Worker应用，输入名称image

  • 部署应用

  • 将项目中的worker.js替换默认内容并部署

    • 添加允许访问的来源，这里修改成只有一个来源，及pages设置的自定义域https://image.<域名>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* const allowedOrigins = [
      'https://myimgbed.pages.dev',  // Cloudflare Pages 正式地址
      'https://username.github.io',  // GitHub Pages 地址
      'http://localhost:8787'        // 本地调试地址
    ]; */
    const allowedOrigins = [
      'https://image.<域名>'  // Cloudflare Pages 正式地址
    ];

  • 绑定R2存储桶

    • Worker页面 -> 设置 -> 绑定 -> 添加绑定源
    • 选择【R2存储桶】类型
    • 设置名称R2_BUCKET
    • 部署

  • 添加变量

    变量名 说明 参数
    API_BASE_URL worker 访问地址，worker自定义域地址 https://img.<域名>
    SUPABASE_URL Supabase 项目 URL —
    SUPABASE_ANON_KEY Supabase访问密钥（anon key） —
    MAX_FILES 最大上传文件数 5
    LIST_PATH 图标列表访问路径，默认/list /list

  • 添加自定义域名（前端需要在public/config.js配置该地址为接口地址）

    • Worker设置 - 【域和路由】
    • 添加自定义域，如img.<域名>

3. 部署前端页面

3.1 Github私有仓库部署

  • 创建私有仓库，暂停在创建完成界面

  • 本地创建工作目录，并将项目克隆本地

1
git clone https://github.com/sindricn/ImageHost-R2.git
  • 复制所有代码有本地工作目录
  • 按照私有仓库创建完成界面中的git命令，将本地所有代码文件推送至仓库
  • 修改public/config.js中的接口地址
1
2
3
4
5
6
async function fetchConfig() {
  const res = await fetch("https://<worker自定义域地址>/config");
  if (!res.ok) throw new Error("获取配置失败");
  return await res.json();
}
...
  • Cloudflare中进入Pages
    • 创建并连接Github，选择图床的仓库地址
    • 修改构建配置中的构建输出为：public
    • 设置自定义域：如image.<域名>
    • 将pages中的名称和目标地址解析到DNS记录中
    • 部署pages

服务器搭建图床

easyimage2.0

easyimage docker

easyimage镜像地址

自行安装docker，这里不做docker安装教程

  • 推荐使用docker部署
1
2
3
4
5
6
7
8
9
10
docker run -itd \
  --name easyimage \
  -p 8080:80 \
  -e TZ=Asia/Shanghai \
  -e PUID=1000 \
  -e PGID=1000 \
  -e DEBUG=false \
  -v /root/data/docker_data/easyimage/config:/app/web/config \
  -v /root/data/docker_data/easyimage/i:/app/web/i \
  ddsderek/easyimage:latest
  • docker-compose部署
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
version: '3.3'
services:
  easyimage:
    image: ddsderek/easyimage:latest
    container_name: easyimage
    ports:
      - '8080:80'
    environment:
      - TZ=Asia/Shanghai
      - PUID=1000
      - PGID=1000
      - DEBUG=false
    volumes:
      - '/root/data/docker_data/easyimage/config:/app/web/config'
      - '/root/data/docker_data/easyimage/i:/app/web/i'
    restart: unless-stopped