「EXIF Photo Blog」在 Vercel 上部署你的个人摄影相册

1.1 寻找合适的摄影相册#

当你使用相机拍下了足够多的照片后，你不免产生新的念头，想要一个合适的相册来存放那些珍贵的瞬间，以便于随时随地分享和回味，不至于让它们在硬盘深处蒙上一层灰。我曾经会在微信朋友圈和 500px 上传我的摄影照片，前者更适合小范围的分享且和生活日常会混杂在一起，而后者的用户大多集中在摄影师之间，而且它们共同的缺点就是无法保存高质量的照片，你的照片会被第三方平台随意的压缩。

那么？我的需求逐渐明晰，我需要一个便于分享、能够保存高质量照片、最好还是能够自托管的相册。拥有这样需求的人不在少数，也有十分优秀的项目例如 PicImpact 或是 exif-gallery-nuxt，那么在体验过一段时间后，我最终选择 exif-photo-blog 这个项目。

1.2 为什么选择它#

选择 EXIF Photo Blog 这个项目的原因无外乎是它具有独特的内容呈现形式，能够显示 Exif 信息和富士胶片模拟信息，丰富的自定义选项，以及可以使用 Vercel 进行一键部署，不需要依赖服务器，1 个域名，1 个免费的 Cloudflare R2 对象存储，就能帮助你快速的部署属于你的摄影相册。

官方 Demo：photos.sambecker.com

2.1 一键部署#

项目主页提供了在 Vercel 上一键部署的按钮，你也可以 fork 项目后在 Vercel 手动部署，点此直达 Vercel 新建项目，部署时无需任何改动，在等待大约两分钟后即可部署完毕。

2.2 链接数据库#

此时你已经可以通过 Vercel 提供的域名访问你的相册了，你大概会进入这样的界面，当你配置完 Storage（数据库和对象存储）、Authentication 后，会在对应的条件前打勾：

在项目界面中打开 Storage 选项卡，开始创建并链接你的数据库吧。我建议你使用 Vercel 提供的 Neon 或 Supabase，它们都有一定的免费额度，对于一个个人使用的相册而言绰绰有余。

以 Neon 为例，选择合适的地区并创建，完成后，你可以很轻松的将其链接到项目：

在完成这一步后，记得回头检查相册网站中的检查项!

2.3 绑定你的域名#

Vercel 为你提供的域名难以记忆，且在中国大陆访问受限，建议绑定一个自己的域名，跟随步骤在你域名 DNS 中添加 CNAME 记录：

3.1 建立存储桶#

在 Cloudflare 中创建一个 R2 存储桶，选项皆为默认，无需更改。

3.2 修改 CORS 策略#

将 R2 的 CORS 策略修改为如下：

1
[{
2
    "AllowedHeaders": ["*"],
3
    "AllowedMethods": [
4
      "GET",
5
      "PUT"
6
    ],
7
    "AllowedOrigins": [
8
       "http://localhost:3000",
9
       "vercel域名",
10
       "你的域名"
11
    ]
12
}]

3.3 启用公共托管#

可以通过以下两种方式之一设置公有存储桶：

• 将您的存储桶公开为受您控制的自定义域（在设置-自定义域中增加自己的域名）
• 使用 Cloudflare 托管的 https://r2.dev 子域为非生产使用案例公开您的存储桶。

3.4 创建 API 并配置环境变量#

通过选择“Manage R2 API Tokens”并单击“Create API Token”来创建 API 令牌。

选择“对象读写”，选择“仅应用于特定存储桶”，然后选择创建的存储桶。

在 Vercel 中增加对象存储环境变量并重新部署。

• AUTH_SECRET：生成 auth secret
• ADMIN_EMAIL：用户邮箱
• ADMIN_PASSWORD：用户密码
• CLOUDFLARE_R2_ACCESS_KEY：API
• CLOUDFLARE_R2_SECRET_ACCESS_KEY：API 密匙
• NEXT_PUBLIC_CLOUDFLARE_R2_BUCKET ：存储桶名称
• NEXT_PUBLIC_CLOUDFLARE_R2_ACCOUNT_ID ：账户 ID（位于 R2 概述页面上）
• NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_DOMAIN ： “your-custom-domain.com” 或 “pub-jf90908…s0d9f8s0s9df.r2.dev”

随后访问 Vercel 上的项目，导航到“部署”选项卡，单击最近部署旁边的 ••• 按钮，然后选择“重新部署”