Intro to AI Engineering在本地运行 Intro to AI Engineering
使用本页在你的计算机上运行提取的 Gift Genie 项目。当前课程有两种项目形式：纯浏览器版本的 Vite 应用，以及后端迁移后的 Express 和 Vite 应用。确定你拥有的版本，然后按照下面相应的步骤进行设置。
前置准备
安装支持的 LTS 版本的 Node.js。推荐使用 Node 24。Node 22.12 或更高版本也支持课程后期项目所使用的 Vite 版本。
检查 Node 和 npm 是否可用：
$ node --version
v24.18.0
$ npm --version
11.18.0npm 包含在 Node 中。如果任一命令显示"command not found"，请在继续之前完成 Node 的安装。
识别你提取的项目
进入包含 package.json 的提取文件夹：
$ cd path-to-your-downloaded-project本页的所有命令都从该文件夹运行。
然后检查你拥有的项目版本。纯浏览器版本有 index.html 和 vite.config.js，其 start 脚本不运行任何服务器文件。Express 和 Vite 版本既有 server.js 也有 vite.config.js，其 start 脚本一起运行它们。
package.json 的文件夹中打开终端，读取其 start 脚本。如果它运行 server.js 文件，按照后端部分进行。如果没有，你就拥有纯浏览器版本。 添加你的环境变量
Scrimba 从你的账户设置中提供三个环境变量。你的计算机无权访问这些设置，所以请在 package.json 旁边创建一个名为 .env 的文件：
AI_URL=https://your-provider.example/v1
AI_KEY=your-key-here
AI_MODEL=your-model-id复制你在课程中使用的值。URL 和模型必须来自与密钥相同的提供商。
使用 Git 之前，在 package.json 旁边创建一个 .gitignore 文件并添加：
.env
node_modules/Git 手册在忽略文件和良好习惯中解释了为什么这两行应该出现在每个项目中。
永远不要提交你的 API 密钥
.env 文件包含有效的凭证。不要上传它、将其粘贴到源代码中，也不要将其提交到 Git。如果密钥被泄露，请在提供商处撤销它并创建一个新的。
在修改 .env 后重启项目。正确的运行命令取决于 ZIP 来自课程的哪个部分。
package.json 旁边创建 .env，并将你的三个 Scrimba 值复制到其中。这些是 Scrimba 保存在你账户设置中的相同值，现在存储在你自己的计算机上。将该文件保留在 Git 之外。 运行纯浏览器版本的 Gift Genie
后端迁移之前的 Gift Genie 课程有 index.html 和 vite.config.js，但 start 脚本中没有活跃的 server.js。安装并启动项目：
$ npm install
$ npm startVite 会打印一个类似这样的本地地址：
VITE ready
Local: http://localhost:5173/打开终端中打印的确切 Local URL。如果端口 5173 被占用，Vite 通常会选择另一个端口并打印该地址。使用 Ctrl+C 停止 Vite。
此版本会向浏览器公开你的密钥
这些课程故意从前端 JavaScript 调用 AI 提供商。Vite 将 AI_KEY 复制到浏览器包中，所以任何打开页面的人都可以在他们的浏览器开发者工具中读取该密钥。为了本地学习，请使用临时的、受限的密钥。不要部署此版本或在网络上共享它。课程后期的后端迁移是你应该构建的安全架构。
npm install，然后 npm start，并打开 Vite 打印的确切 Local URL 而不是你记忆中的某个。完成后按 Ctrl+C。 运行带后端的 Gift Genie
后端迁移和后期课程既有 server.js 也有 vite.config.js。它们的 start 脚本一起启动 Express 和 Vite。当前下载不会自动将 .env 加载到 Express 进程中，所以在启动它之前在 package.json 中进行这一个更改。
找到 server 脚本：
"server": "node --watch server.js"将其更改为：
"server": "node --env-file=.env --watch server.js"部署模块的项目需要对其服务器进行相同的 --env-file 更改。
将后端端口添加到 .env：
AI_URL=https://your-provider.example/v1
AI_KEY=your-key-here
AI_MODEL=your-model-id
PORT=3001然后安装并启动两个进程：
$ npm install
$ npm start你应该会看到一条 Express 消息显示端口 3001，以及一个 Vite Local URL（通常是端口 5173）。打开 Vite URL。不要以应用程序页面的形式打开端口 3001。浏览器向 Vite 发送 /api 请求，而 Vite 将其代理到 Express。API 密钥保留在服务器进程中。
使用 Ctrl+C 停止两个进程。
保持后端在端口 3001
下载的 Express 服务器读取 PORT，但其 Vite 代理直接指向 http://localhost:3001。除非另一个进程需要该端口，否则保留 PORT=3001。如果你更改它，也要更改 vite.config.js 中的代理目标为相同的端口并重启项目。
PORT=3001，运行 npm install 和 npm start，然后打开 Vite URL，而不是端口 3001。一个 Ctrl+C 停止应用程序的两个部分。 故障排除
Missing AI_KEY、401 响应或身份验证错误： 检查所有三个变量名的拼写，确认密钥是活跃的，并重启项目。来自不同提供商的密钥、URL 和模型作为一个集合不会工作。
模型找不到或提供商拒绝请求： 准确复制模型 ID。某些课程功能，包括 Responses API 工具（模型在请求期间可以调用的内置助手），并非由每个 OpenAI 兼容提供商或这些提供商提供的每个模型支持。
npm start 说包或命令丢失： 确保终端在包含 package.json 的文件夹中，然后再次运行 npm install。如果下载包含用于不同包管理器的锁定文件，请遵循该锁定文件而不是生成第二个。
页面打开，但 /api 请求失败： 这适用于后端版本。检查 Express 和 Vite 是否仍在同一终端中运行。确认 Express 在端口 3001 上，vite.config.js 中的代理目标也显示 3001。
EADDRINUSE 提及端口 3001： 另一个进程正在使用后端端口。停止该进程，或将 .env 中的 PORT 和 Vite 代理目标更改为相同的未使用端口。
Vite 使用 5174 或其他前端端口： 当 5173 被占用时这是正常的。打开 Vite 打印的 Local URL。你不需要更改 Express 端口。
package.json 的文件夹中，.env 是否包含所有三个 AI 值，以及你在编辑后是否重启了。对于后端版本，保持两个进程运行。