如何在Cloudflare Pages托管的SvelteKit应用中使用环境变量？

本地开发环境 #

• 在项目根目录创建 .env 文件，填入你的PocketBase信息：

  PB_URL=https://你的PocketHost实例地址.pockethost.io
  PB_ADMIN_EMAIL=你的管理员邮箱
  PB_ADMIN_PASSWORD=你的管理员密码
  

• 将 .env 添加到 .gitignore 文件，避免敏感信息提交到代码仓库：

  .env
  

• 在 +page.server.js 中直接通过 process.env 访问变量：

  import PocketBase from 'pocketbase';
  
  export async function load() {
    // 初始化PocketBase实例
    const pb = new PocketBase(process.env.PB_URL);
    // 管理员登录
    await pb.admins.authWithPassword(process.env.PB_ADMIN_EMAIL, process.env.PB_ADMIN_PASSWORD);
    
    // 示例：获取新闻集合数据
    const news = await pb.collection('news').getFullList();
    return { news };
  }
  

Cloudflare Pages线上环境 #

• 登录Cloudflare控制台，进入你的Pages项目
• 点击「Settings」→「Environment Variables」
• 点击「Add variable」，分别添加 PB_URL、PB_ADMIN_EMAIL、PB_ADMIN_PASSWORD，选择对应环境（Production/Preview）后保存

1. 配置Cloudflare适配器 #

确保项目已安装Cloudflare适配器，若未安装，执行：

npm install @sveltejs/adapter-cloudflare --save-dev

修改 svelte.config.js，替换为Cloudflare适配器：

import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter()
  }
};

export default config;

2. 构建项目 #

执行构建命令生成Cloudflare Worker文件：

npm run build

3. 配置Wrangler #

在项目根目录创建 wrangler.toml 文件，设置entry-point和环境变量：

name = "你的项目名称"
main = "./.svelte-kit/cloudflare/worker.js" # 这就是entry-point路径
compatibility_date = "2024-05-01" # 填写最近的日期即可

[vars]
PB_URL = "https://你的PocketHost实例地址.pockethost.io"
PB_ADMIN_EMAIL = "你的管理员邮箱"
PB_ADMIN_PASSWORD = "你的管理员密码"

4. 启动本地测试 #

执行命令启动Wrangler本地服务：

npx wrangler dev

此时会模拟Cloudflare Pages环境，服务会读取 wrangler.toml 中的环境变量运行。

内容的提问来源于stack exchange，提问作者lia07