激活函数 elm_如何在Elm中使用Netlify函数

激活函数 elm

This worked example creates a simple Netlify Function and integrates it with an Elm application.

这个工作示例创建了一个简单的Netlify函数 ，并将其与Elm应用程序集成。

Netlify functions provide a very convenient way of working with AWS Lambdas, and they have an impressive array of example use cases, such as sending emails, processing payments and logging.

Netlify功能提供了一种使用AWS Lambdas的非常方便的方式，并且具有一系列令人印象深刻的示例用例 ，例如发送电子邮件，处理付款和日志记录。

This example reads secrets from environment variables (to avoid them being exposed in the browser), but it is mostly generic, and can be adapted for other use cases easily.

本示例从环境变量中读取机密(以避免它们在浏览器中公开)，但是它通常是通用的，并且可以轻松地适用于其他用例。

步骤1-前提条件 (Step 1 - Prerequisites)

• Create a repository for the code, probably on GitHub
  创建代码存储库，可能在GitHub上

• npm i -g elm

  npm i -g elm

• npm install -g netlify-cli

  npm install -g netlify-cli

• npm i -g create-elm-app

  npm i -g create-elm-app

第2步-创建香草Elm应用 (Step 2 - Create vanilla Elm app)

• create-elm-app elm-app-with-netlify-function

  create-elm-app elm-app-with-netlify-function

• cd elm-app-with-netlify-function

  cd elm-app-with-netlify-function

• elm-app start

  elm-app start

This should start a development server and load the app in your browser.

这应该启动开发服务器并将应用程序加载到浏览器中。

You can look at this commit in the companion repository to check that everything is ok.

您可以在协同存储库中查看此提交，以检查一切正常。

步骤2-在Netlify上部署 (Step 2 - Deploy on Netlify)

• npm init (and fill in sensible values)

  npm init (并填写合理的值)

• npm i create-elm-app --save-dev (this adds create-elm-app to package.json, which is used by netlify)

  npm i create-elm-app --save-dev (这会将create-elm-app添加到package.json中，由netlify使用)

• Push the code to GitHub
  将代码推送到GitHub

You can see the results of this at this commit in the companion repository

您可以在伴随存储库中的此提交中查看此结果

• Log in / Sign up / register with Netlify

  登录/注册/向Netlify注册

• Create a new site on Netlify

  在Netlify上创建一个新站点

• Choose your repository
  选择你的仓库

• Set the "Build command" to elm-app build

  将“构建命令”设置为elm-app build

• Set the "Public directory" to build

  设置“公共目录”来build

• Click on "Deploy Site"
  点击“部署站点”

Netlify will now deploy the site, installing the dependencies specified in package.json, then running elm-app build and then serving the dist directory.

Netlify现在将部署该站点，安装package.json中指定的依赖项，然后运行elm-app build ，然后提供dist目录。

From now on, Netlify will attempt to deploy the latest code every time you push to GitHub.

从现在开始，每次您推送到GitHub时，Netlify都会尝试部署最新代码。

第3步-链接Netlify开发 (Step 3 - Link Netlify Dev)

• netlify login

  netlify login

• netlify link and choose the “Use current git remote url” option

  netlify link然后选择“使用当前git远程URL”选项

• Add “./netlify” to .gitignore
  在.gitignore中添加“ ./netlify”

• Add a netlify.toml file (from this commit in the companion repository)

  添加一个netlify.toml文件(来自伴随存储库中的此提交 )

• netlify dev

  netlify dev

This should start a local development server and load the app in your browser, in a similar way to step 1.

这应该启动本地开发服务器，并以与步骤1类似的方式在浏览器中加载应用程序。

步骤4-添加netlify函数 (Step 4 - Add a netlify function)

Run netlify functions:create to create a new netlify function. Choose the “js-token-hider” template, and name it "call-api".

运行netlify functions:create创建一个新的netlify函数。 选择“ js-token-hider”模板，并将其命名为“ call-api”。

This will create a javascript file for the function, and a package.json for its dependencies in “functions/call-api”.

这将为该函数创建一个javascript文件，并在“ functions / call-api”中为其依赖项创建一个package.json。

Replace functions/call-api/call-api.js with this one in the companion repository

在随播存储库中将function / call-api / call-api.js替换为这一函数

Now if you run netlify dev,  the function will be served as well as the app, albeit on different  ports. You can view the function in the browser to check that it is  working (probably at http://localhost:34567/call-api or http://localhost:34567/.netlify/functions/call-api)

现在，如果您运行netlify dev ，则该功能将与该应用程序一起使用，尽管该应用程序位于不同的端口上。 您可以在浏览器中查看该功能以检查其是否正常运行(可能位于http：// localhost：34567 / call-api或http：// localhost：34567 / .netlify / functions / call-api )

步骤5-从Elm调用netlify函数 (Step 5 - Call the netlify function from Elm)

Install depdencies

安装依赖关系

• elm install elm/json

  elm install elm/json

• elm install elm/http

  elm install elm/http

• elm install krisajenkins/remotedata

  elm install krisajenkins/remotedata

Update Main.elm to call the function and display the results (from the companion repository).

更新Main.elm以调用该函数并显示结果(来自同伴存储库 )。

Instruct create-elm-app to proxy api calls to the function, by adding elmapp.config.js, as shown in the companion repository.

通过添加elmapp.config.js来指示create-elm-app代理对该函数的api调用，如伴随存储库中所示。

At  this point, thee application runs, and successfully calls the api, but  there are no secrets / environment variables yet, so the UI shows an error.

此时，您的应用程序已运行，并成功调用了api，但是还没有任何密钥/环境变量，因此UI会显示错误。

第6步-添加秘密 (Step 6 - Add the secrets)

Go  to the “Site Settings” - “Build & Deploy” - “Continuous Deployment”  - “Environment Variables” section on the Netlify website for your application.

转到Netlify网站上适用于您的应用程序的“站点设置”-“构建和部署”-“连续部署”-“环境变量”部分。

Add environment variables for API_TOKEN and API_URL

为API_TOKEN和API_URL添加环境变量

Now when you run ‘netlify dev’ the app should now load in the browser and call the locally hosted netlify function, which will return the API_TOKEN and API_URL environment variables that you set on Netlify.

现在，当您运行“ netlify dev”时，应用程序现在应在浏览器中加载并调用本地托管的netlify函数，该函数将返回您在Netlify上设置的API_TOKEN和API_URL环境变量。

The  same should be true on the live deployment on Netlify. You may need to  “Trigger Deploy” manually on Netlify, so that it uses the new environment variables.

Netlify上的实时部署也应如此。 您可能需要在Netlify上手动“触发部署”，以便它使用新的环境变量。

You can see the deployment of the companion repository at https://netlify-functions-with-elm.netlify.com

您可以在https://netlify-functions-with-elm.netlify.com上查看随播存储库的部署。

结论 (Conclusion)

Netlify  / serverless functions are extremely useful for creating / connecting to the backend services that your front end needs. They are also very east to set up, as this artcile (hopefully!) shows.

Netlify /无服务器功能对于创建/连接到前端所需的后端服务非常有用。 正如这位狡猾的人(希望如此)所显示的，他们也很东边。

Create-elm-app is a great tool for developing Elm applications, and its simple proxy feature works well when developing Netlify functions.

Create-elm-app是用于开发Elm应用程序的好工具，并且其简单的代理功能在开发Netlify函数时效果很好。

Netlify Dev is great for replicating the production Netlify setup when developing locally (in this case by automatically providing the environment variables).

Netlify Dev非常适合在本地开发时复制生产Netlify设置(在这种情况下，通过自动提供环境变量)。

翻译自: https://www.freecodecamp.org/news/how-to-use-netlify-functions-in-elm/

激活函数 elm