neripark
software developer.
@neripark
Readyfor株式会社
フロントエンド+Rails
SIerから転職
本格的にWeb開発を始めて約1年半
@neripark
[like] Vue.js
[study] React、TypeScript
趣味でやっているバンドのサイト
Netlify
Form
Netlify
Function
Form
Function
push
通知
deploy
かんたん
3step!!
<!-- contact.vue -->
<template lang="pug">
form.contact-form(
name="iyu-form"
method="POST"
data-netlify="true"
)
input( name="name" type="text")
</template>
// nuxt.config.js
{
mode: 'spa'
}
// nuxt.config.js
{
mode: 'universal'
}
<!-- dist/index.html -->
<body>
<div id="__nuxt">
<div id="nuxt-loading">
<div>Loading...</div>
</div>
</div>
</body>
<!-- dist/index.html -->
<body>
<div id="__nuxt">
<div id="__layout">
<!-- すべてのコンテンツが出力済み -->
</div>
</div>
</body>
[nuxt] Error while initializing app DOMException:
Failed to execute 'appendChild' on 'Node': This node type does not support this method.
at Object.appendChild
"scripts": {
"lambda-serve": "netlify-lambda serve lambda/",
},
proxy: {
'/.netlify': {
target: 'http://localhost:9000',
pathRewrite: {'^/.netlify/functions': ''},
},
},
Netlify の管理画面でログを参照
1:01:37 PM: TypeError: Cannot read property 'name' of undefined
at exports.handler (/var/task/submission-created.js:8:19979)
受け取ったオブジェクトの中からフォームでSubmitされたデータを取得するところでコケている
// lambda/submission-created.js
import querystring from 'querystring'
import axios from 'axios'
exports.handler = function(event, context, callback) {
// const token = process.env.IYU_FORM_NOTIFY_TOKEN_TEST // test
const token = process.env.IYU_FORM_NOTIFY_TOKEN_PROD // production
const params = querystring.parse(decodeURIComponent(event.body))
axios({
method: 'post',
url: 'https://notify-api.line.me/api/notify',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/x-www-form-urlencoded'
},
data: querystring.stringify({
message: getMsg(params)
})
})
.then(res => {
res.data.statusCode = 200
res.data.body = 'ok'
callback(null, res.data)
})
.catch(err => callback(err))
}
function getMsg(params) {
const msg = `
webサイトからContactがありました!
--
[Name] ${params.name}
[Category] ${params.category}
[ReserveDate] ${params.reservedate}
[ReserveCount] ${params.reservecount}
[Email] ${params.email}
[Message]
${params.message}
`
return msg
}
// ローカル
const params = querystring.parse(decodeURIComponent(event.body))
// 本番
const params = JSON.parse(event.body).payload.data
(一部制限はあるが)
By neripark