框架 › SvelteKit

将 SvelteKit 应用程序部署到 Vercel

将带有加密 .env.vault 文件的 SvelteKit 应用程序部署到 Vercel。

初始设置

创建一个 SvelteKit 应用程序。

npm create svelte@latest my-app

从选项中选择“Skeleton 项目”。这将创建一些文件。

ls -1
README.md
node_modules/
package-lock.json
package.json
src/
static/
svelte.config.js
vite.config.js

编辑 `src/routes/+page.svelte` 以包含 `import.meta.env.VITE_HELLO`。

src/routes/+page.svelte

<h1>Hello {import.meta.env.VITE_HELLO}.</h1>

添加 `.vercelignore` 文件。

.vercelignore

.env*
!.env.vault

将其提交到代码并将其部署到 Vercel。

npx vercel@latest deploy --prod

yourapp.vercel.app

部署后，您的应用程序将显示“Hello undefined.”，因为它还没有方法访问环境变量。我们接下来将解决这个问题。

预加载 dotenv

安装 dotenv.

npm install dotenv --save # Requires dotenv >= 16.1.0

在项目根目录中创建一个 `.env` 文件。

.env

# .env
VITE_HELLO="World"

使用 dotenv 预加载 SvelteKit 脚本（使用 vite）。这将在 SvelteKit 之前注入环境变量。

package.json

"scripts": {
  "dev": "node -r dotenv/config ./node_modules/.bin/vite dev",
  "build": "node -r dotenv/config ./node_modules/.bin/vite build",
  "preview": "node -r dotenv/config ./node_modules/.bin/vite preview"
},

尝试在本地运行它。

npm run dev
# Visit https://127.0.0.1:5173/

它将显示“Hello World.”。

太棒了！现在，process.env 具有您在 `.env` 文件中定义的键和值。

这涵盖了生产环境的本地模拟。接下来，让我们解决真正的生产环境问题。

构建 .env.vault

推送您最新的 `.env` 文件更改，并编辑您的生产机密。了解有关同步的更多信息

npx dotenv-vault@latest push
npx dotenv-vault@latest open production

使用 UI 为每个环境配置这些机密。

www.dotenv.org

然后构建您的加密 `.env.vault` 文件。

npx dotenv-vault@latest build

其内容应类似于此。

.env.vault

#/-------------------.env.vault---------------------/
#/         cloud-agnostic vaulting standard         /
#/   [how it works](https://dotenv.org/env-vault)   /
#/--------------------------------------------------/

# development
DOTENV_VAULT_DEVELOPMENT="/HqNgQWsf6Oh6XB9pI/CGkdgCe6d4/vWZHgP50RRoDTzkzPQk/xOaQs="
DOTENV_VAULT_DEVELOPMENT_VERSION=2

# production
DOTENV_VAULT_PRODUCTION="x26PuIKQ/xZ5eKrYomKngM+dO/9v1vxhwslE/zjHdg3l+H6q6PheB5GVDVIbZg=="
DOTENV_VAULT_PRODUCTION_VERSION=2

设置 DOTENV_KEY

获取您的生产 `DOTENV_KEY`。

npx dotenv-vault@latest keys production
# outputs: dotenv://:[email protected]/vault/.env.vault?environment=production

使用 CLI 在 Vercel 上设置 `DOTENV_KEY`。

npx vercel@latest env add DOTENV_KEY

? What’s the value of DOTENV_KEY? dotenv://:[email protected]/vault/.env.vault?environment=production
✅  Added Environment Variable DOTENV_KEY to Project nodejs-vercel [94ms]

或使用 Vercel 的 UI。

vercel.com

部署

将这些更改安全地提交到代码并部署。

npx vercel@latest deploy --prod

就是这样！部署时，您的 `.env.vault` 文件将被解密，其生产机密将被注入为环境变量 - 恰逢其时。

yourapp.vercel.app

您已成功使用新的 .env.vault 标准来加密和部署您的机密。这比将您的机密分散到多个第三方平台和工具中要安全得多。无论何时需要添加或更改机密，只需重建您的 .env.vault 文件并重新部署。