😊

Nuxtjs × Netlify Functionsを始める際のメモ

2021/05/06に公開

JavaScript

Netlify

Nuxt

tech

まずはNuxtjs

yarn create nuxt-app <project-name>

axios にはチェックを入れておく

cd <project-name>
yarn dev

Netlify Functionsを使えるように

インストール

npm i netlify-lambda

package.jsonに追記

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "serve": "netlify dev"
  },

serveの行を追加した

毎回 'netlify dev' で実行でもいいけどやっぱり忘れるし…

netlify コマンドがないって言われたら

npm install netlify-cli -g

ちなみにnpxだと失敗した

試しに実行する際は、

npm run serve

で開発していくとよかった

Netlify Functionsも実行できるし、Nuxtもローカルで動いた

tomlファイルの作成

netlify.toml という名前のファイルを新しく作って、

[dev]
   command = "yarn dev"

[build]
  command = "yarn generate"
  publish = "dist"
  functions = "functions"

としてみた。
（たぶん余計なものとかまだ削れきれてないだろうなぁ）

functionsフォルダの作成

functionsフォルダを作成し、中にNetlify Functionsのコードを書いていく

例えば 'hello-world.js' というファイル名で

hello-world.js

exports.handler = function (event, context, callback) {
  callback(null, {
    statusCode: 200,
    body: 'Hello, World',
  })
}

npm run serve

で自動的に立ち上がった 'localhost:8888' にNuxtのページが見れる

各functionsへは

http://localhost:8888/.netlify/functions/<functionのファイル名>

例えば

http://localhost:8888/.netlify/functions/hello-world

URL内にドットがあると嫌です？
まぁまぁ、Nuxtのページとバッティングせずにいいじゃないですか…

どうしてもって場合は多分tomlファイル内での設定です。がんばってください（未来への自分へ…）