这是一个教程，旨在帮助Junior Devs在NetLify平台上发布网站时正确管理其API键（或其他秘密）。

先决条件

• HTML，CSS，JavaScript的基础知识
• Vite，Vuejs和Axios的基本知识
• VisualStudio代码的基本知识
• 只有CLI的经验
• github存储库
• 如何在Netlify上部署网站
• 网站/项目/Web应用程序已经部署在Netlify

您将学到什么（目录）

• How to install and use the Netlify CLI
• How to set and use environment variables
• How to write serverless functions
• How to use serverless functions to communicate with the APIs
• Conclusion
• Resources

如何安装和使用NetLify CLI

这是整个教程中最简单的步骤之一。
从有关CLI的NetLify文档（您可以找到here），这是安装NetLify CLI所需的全部。耶！ :)

npm install netlify-cli -g

现在，您可以使用netlify命令来管理您的本地网站。您也可以使用别名ntl节省一些时间：）

登录到Netlify

现在，您需要通过获得访问令牌来授权NetLify CLI。只需键入以下命令并授权应用程序：

ntl login

将您的本地环境链接到Netlify

如果您已经在Netlify上部署了网站，那么现在您只需要一起 link

您可以使用此命令来执行此操作：

ntl link

运行您的构建

使用以下命令，您可以使用NetLify CLI运行本地构建，以模拟NetLify上运行构建的行为：

ntl dev

如何设置和使用环境变量

如果您不熟悉.ENV文件和环境变量的概念，则可以参考此过度简化的定义只是为了了解基础：

.env文件只是一个包含变量的键/值对的纯文本文件。

env 是环境的简短，因为此处定义的值是我们所有环境可用的变量。

设置环境变量

您可以通过在.env文件中写下这些变量来设置这些变量：

MY_KEY=value

注意：始终记住将.ENV文件添加到.gitignore或所有变量都在您的存储库中可见！

NetLify UI使编写和管理环境变量的过程非常容易。只需转到您的网站控制面板>> 站点设置>> 环境变量。
写下键和值，留下所有范围可用的变量（在本教程中，我不会覆盖可变范围）。

注释：确保在上设置敏感变量策略需要批准对不受信任的部署！
有关here的更多信息。

如果将本地开发环境链接到NetLify网站，则已经具有可用的环境变量，而无需编写.ENV文件！

您可以通过执行以下命令来验证这一点：

ntl env:list

使用环境变量

要使用环境变量，这就是您所需要的：

const { SECRET_API_KEY } = process.env

process.env获取所有环境变量，并使用简单的破坏性您可以获得所需的键。

这就是环境变量的全部！
不用担心！在接下来的步骤中，我将向您展示在哪里放置此代码线：）

如何编写无服务器功能

NetLify上的无服务器功能只是返回承诺的JS功能。根据Netlify文档：
要创建同步函数，请使用JavaScript功能文件中的以下一般语法导出处理程序方法

exports.handler = async function (event, context) {
  // your server-side functionality
};

您也可以使用ES模块语法：

const handler = async function (event, context) {
  // your server-side functionality
};

export { handler };

注意
netlify调用函数时提供事件和上下文参数。
有关该here

的更多信息

在哪里放置无服务器功能

NetLify用于无服务器功能的默认路径是YOUR_BASE_DIRECTORY/netlify/functions。

注意
该函数的端点名称为 case敏感，并由其文件名或其专用父目录的名称确定。

即。如果您想要一个名称hello的端点，则应以以下方式保存您的功能：

• netlify/functions/hello.js
• netlify/functions/hello/hello.js
• netlify/functions/hello/index.js

因为端点名称为 case敏感如果您将函数命名为myFunction，则您的端点将看起来像：netlify/functions/myFunction.js。
出于相同的原因，如果您将函数命名为my-function，则您的端点将是：netlify/functions/my-function.js。

在功能中写什么

最简单的事情就是使功能返回“ Hello World！”
使用Netlify documentation的基本示例，hello.js函数将看起来像这样：

const handler = async function (event, context) {
    // your server-side functionality
    return {
        statusCode: 200,
        body: JSON.stringify({ message: "Hello World" }),
    };
};

export { handler };

这将返回具有statusCode和body属性的对象。具有Value 200的statusCode表示请求成功。
body将包含一个代表我们要从功能获得的对象的JSON格式字符串。在此示例中，只是一个具有message属性的对象。

让我们继续下一步！

如何使用无服务器功能与API通信

是时候使用您的功能了！
成功进行测试调用后，您将添加需要调用所需API端点所需的代码。

调用功能

以下代码示例来自VUEJS项目，使用axios调用无服务器功能和API。

从App.vue调用hello.js，代码很简单：

axios.get('/.netlify/functions/hello')
    .then((response) => {
        // handle success
        console.log(response);
        this.helloResult = response.data.message;
    })
    .catch((error) => {
        // handle error
        console.log(error);
    });

如果您对Vuejs有点熟悉，您会知道可以将此代码放置在methods属性中定义的函数或mounted方法中。
helloResult只是data的属性，用于记住从hello.js函数返回的值。

注意
获得“ Hello World！”您需要访问response.data内的message属性。
message属性与您在previous step中定义的属性相同

确保在浏览器中测试您的代码（请记住在终端运行ntl dev或netlify dev，以在Run your build步骤中启动NetLify本地环境和项目启动和运行）

如果您本地机器上的所有功能都可以推送到您的存储库并再次测试您的现场网站上的所有内容！

从无服务器函数中读取环境变量

您刚刚测试了您可以编写的最简单功能，一切顺利进行！要对您想要的API进行安全呼叫，您首先需要从您的 api键 环境变量。。。

您还记得this step吗？在这里，您可以在哪里找到该行的代码！

转到Set environment variables步骤，创建一个新变量，称为SECRET_API_KEY（扰流板：它不会是秘密！）。

在您的本地计算机上运行命令以获取所有环境变量的列表：

ntl env:list

如果您可以看到SECRET_API_KEY条目，那么您做对了！

注意
您还可以通过键入y来检查变量值：显示值？（y/n）

const handler = async function (event, context) {
    // your server-side functionality
    const { SECRET_API_KEY } = process.env
    return {
        statusCode: 200,
        body: JSON.stringify({ message: SECRET_API_KEY }),
    };
};

export { handler };

X-Api-Key: YOUR_API_KEY

import axios from 'axios';

const handler = async function (event, context) {
    try {

        // your server-side functionality
        const { QUIZ_API_TOKEN } = process.env;

        const config = {
            params: {
                limit: 1
            },
            headers: {
                "X-Api-Key": QUIZ_API_TOKEN
            }
        };

        const response = await axios.get('https://quizapi.io/api/v1/questions', config)

        if (response.errors !== undefined && response.errors.length) {
            throw new Error(response.errors);
        }

        // handle success
        return {
            statusCode: 200,
            body: JSON.stringify({ response: response.data }),
        };

    } catch (error) {
        return {
            statusCode: 500,
            // Could be a custom message or object i.e. JSON.stringify(err)
            body: JSON.stringify({ response: error.message }),
        }
    }
};

export { handler };

import axios from 'axios';

const { QUIZ_API_TOKEN } = process.env;

const config = {
    params: {
        limit: 1
    },
    headers: {
        "X-Api-Key": QUIZ_API_TOKEN
    }
};

const response = await axios.get('https://quizapi.io/api/v1/questions', config)

if (response.errors !== undefined && response.errors.length) {
    throw new Error(response.errors);
}

return {
    statusCode: 200,
    body: JSON.stringify({ response: response.data }),
};

catch (error) {
    return {
        statusCode: 500,
        // Could be a custom message or object i.e. JSON.stringify(err)
        body: JSON.stringify({ response: error.message }),
    }
}

axios.get('/.netlify/functions/quizapi')
    .then((response) => {
        // handle success
        console.log(response);
        this.quizApiQuestion = response.data.response[0].question;
    })
    .catch((error) => {
        // handle error
        console.log(error);
    });

[functions]
  node_bundler = "esbuild"