Intro to Deployment
Learn how to securely deploy a support bot without exposing sensitive API keys using Netlify. By following this approach, you can protect your API keys and ensure that they are not visible to users or accessible through developer tools. This technique can be applied to any project that requires keeping an API key hidden. Instead of storing the API key on the front-end, you will use Netlify serverless functions to make API calls.
The serverless function will have access to the API key from a secure store, make the call to the API, and pass the response back to the front-end. This way, the API key remains hidden and cannot be compromised. prerequisites include a free Netlify account, basic knowledge of GitHub, familiarity with fetch requests, and an editor like VS Code. Follow along with the steps to implement this secure deployment approach in practice.
[00:00] Okay, so our mission is to deploy our support bot, but keep the API key hidden. And we're going to do this using Netlify. So right now, if we were just to deploy this as a front-end only project, the API key would be visible right there on every user's machine
[00:17] and easily obtainable from the DevTools Network tab. Let's just zoom in. Oops, there it is. Our API key is there for all to see. And that is what we need to avoid. What we want is for you to be able to share the projects you've made with OpenAI without fear of your key being compromised.
[00:37] And actually, the process we're about to go through can be used any time you need to keep an API key hidden. It's not specific to OpenAI in any way. So how are we going to do this? Well, let's take a high-level overview. Now, at the moment, we've got a front-end project.
[00:55] And what we've been doing is storing the API key on the front-end, making a request to the OpenAI API, and getting back a completion that we use on the front-end. But now we're going to stop doing that and do something completely different. We are going to send our request to a Netlify serverless function.
[01:14] The serverless function will have access to the API key from a secure store. The serverless function will then make the call to the OpenAI API. The API will pass the response back to the serverless function. And the serverless function will pass the response back to the front-end.
[01:31] And we'll use the completion from that response. But most importantly, this API key in its special store is never visible to the front-end. So it won't be visible in the DevTools Network tab. Now, there are a few prerequisites that I'll just mention quickly. You are going to need a free Netlify account.
[01:50] That's really easy to get. I'm also going to assume you have a basic knowledge of GitHub, because we will be deploying to Netlify directly from GitHub. If you know how to publish a project to a GitHub repo, that is enough. We'll also be making fetch requests. And if you followed this course so far, you won't have any problem with that.
[02:08] We won't really be doing anything more sophisticated than we've already done. And you'll also need VS Code or a similar editor. Okay, that's the overview. Let's put it into practice.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!