AWS APIGatewayでtwitter用のhtmlを返す
twitterindex.htmlAPIAWSAPIGatewayLambdaSPASSRtwitter cardhtmlThis article describes how to use AWS APIGateway and Lambda to create a simple HTML page with Twitter card meta tags. This can be used to embed Twitter cards in blog posts without having to implement SSR or other complex systems.
by JanitorJun 16, 2023
Vueでブログ環境を構築していて、twitterカード用のmetaタグをjavascriptでページ毎に変更してみましたが、twitterに表示されませんでした。 理由は、twitterがわざわざjavascriptを実行しない、ということでした。 記事に表示する情報はAWSのリソースに入っているので、Lambdaでtwitter用のhtmlを作成しAPIGatewayで返すことにしました。 twitterカードのためにサーバサイドレンダリングを一から始めるよりずっとお手軽なのではないでしょうか。
Vueでブログ環境を構築していて、twitterカード用のmetaタグをjavascriptでページ毎に変更してみましたが、twitterに表示されませんでした。 理由は、twitterがわざわざjavascriptを実行しない、ということでした。 記事に表示する情報はAWSのリソースに入っているので、Lambdaでtwitter用のhtmlを作成しAPIGatewayで返すことにしました。 twitterカードのためにサーバサイドレンダリングを一から始めるよりずっとお手軽なのではないでしょうか。
Jump Links
1. APIGateway、Lambda作成
2. APIGatewayのメソッドレスポンスのモデルスキーマを作成
3. APIGatewayのメソッドレスポンスにモデルスキーマを設定
4. 1で作成したLambdaを修正
おわり
1. APIGateway、Lambda作成
1. APIGateway、Lambda作成
私の場合は、Cloud9上からAmplifyの下記コマンドで出来上がりです。 流れは、APIGatewayを作成し、そのままLambdaを作成しています。 Amplifyから作成すると、CORSの設定の話が全く出てこないので非常に楽ですね。 ここで作成したAPIGatewayのパスは「indexhtmls」です。 記事IDなどを入れるパラメータはAPIGatewayが勝手に作成してくれる「proxy」というところに入れます。 なので、最終的にtwitterに書き込む際のURLは、「https://ドメイン名/indexhtmls/記事IDなどの情報」、ということになります。
私の場合は、Cloud9上からAmplifyの下記コマンドで出来上がりです。 流れは、APIGatewayを作成し、そのままLambdaを作成しています。 Amplifyから作成すると、CORSの設定の話が全く出てこないので非常に楽ですね。 ここで作成したAPIGatewayのパスは「indexhtmls」です。 記事IDなどを入れるパラメータはAPIGatewayが勝手に作成してくれる「proxy」というところに入れます。 なので、最終的にtwitterに書き込む際のURLは、「https://ドメイン名/indexhtmls/記事IDなどの情報」、ということになります。
$ amplify add api
? Select from one of the below mentioned services: REST
✔ Would you like to add a new path to an existing REST API: (y/N) · no
✔ Provide a friendly name for your resource to be used as a label for this category in the project: · indexhtmlsApi
✔ Provide a path (e.g., /book/{isbn}): · /indexhtmls
✔ Choose a Lambda source · Create a new Lambda function
? Provide an AWS Lambda function name: indexhtmlsLambda
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Hello World
$ amplify add api
? Select from one of the below mentioned services: REST
✔ Would you like to add a new path to an existing REST API: (y/N) · no
✔ Provide a friendly name for your resource to be used as a label for this category in the project: · indexhtmlsApi
✔ Provide a path (e.g., /book/{isbn}): · /indexhtmls
✔ Choose a Lambda source · Create a new Lambda function
? Provide an AWS Lambda function name: indexhtmlsLambda
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Hello World
2. APIGatewayのメソッドレスポンスのモデルスキーマを作成
2. APIGatewayのメソッドレスポンスのモデルスキーマを作成
APIGatewayのコンソールでレスポンス用のモデルスキーマを作成します。 名前はemptyにしています。
APIGatewayのコンソールでレスポンス用のモデルスキーマを作成します。 名前はemptyにしています。
{
"$schema": "http://json-schema.org/draft-04/schema#",
"title" : "Empty Schema",
"type" : "object"
}
{
"$schema": "http://json-schema.org/draft-04/schema#",
"title" : "Empty Schema",
"type" : "object"
}
3. APIGatewayのメソッドレスポンスにモデルスキーマを設定
3. APIGatewayのメソッドレスポンスにモデルスキーマを設定
2で作成したモデルスキーマをメソッドレスポンスに設定します。 コンテンツタイプは「text/html」です。
2で作成したモデルスキーマをメソッドレスポンスに設定します。 コンテンツタイプは「text/html」です。
4. 1で作成したLambdaを修正
4. 1で作成したLambdaを修正
ここまでくれば、URLに載ってくる記事ID情報などから記事を特定し、コンテンツを取得して簡単なhtmlにtwitter用のmetaタグを設定して返すような文言を、Lambdaに書けば終わりです。
ここまでくれば、URLに載ってくる記事ID情報などから記事を特定し、コンテンツを取得して簡単なhtmlにtwitter用のmetaタグを設定して返すような文言を、Lambdaに書けば終わりです。
exports.handler = async (event) => {
console.log(`EVENT: ${JSON.stringify(event)}`);
// twitterカード用のmetaタグ一覧
var card = '<meta name="twitter:card" content="summary_large_image">';
var site = '<meta name="twitter:site" content="@ComytomOfficial" />';
var title = '<meta name="twitter:title" content="REPLACE_STR">';
var description = '<meta name="twitter:description" content="REPLACE_STR">';
// var image = '<meta name="twitter:image" content="REPLACE_STR" />';
var image = '<meta property="og:image" content="REPLACE_STR">';
var titleValue = "デフォルトタイトル";
var discriptionValue = "デフォルトディスクリプション";
var imgValue = "デフォルト画像URL";
var redirectUrl = "デフォルトURL";
// パスパラメータからidを取得
if( event.pathParameters != null && "proxy" in event.pathParameters ){
// event.pathParameters.proxyでパスパラメータを取得
// AppSyncやaws-sdkを使ってAWSのリソースから情報取得
titleValue = "タイトル"
discriptionValue = "ディスクリプション"
imgValue = "画像URL"
redirectUrl = redirectUrl + "/blog" + "/記事ID"
}
title = title.replace( "REPLACE_STR", titleValue );
description = description.replace( "REPLACE_STR", discriptionValue );
image = image.replace( "REPLACE_STR", imgValue );
var bodyValue = `<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">${card}${site}${title}${description}${image}</head><body></body><script type="text/javascript">window.location.href = "${redirectUrl}";</script></html>`;
return {
statusCode: 200,
headers: {
'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'OPTIONS,GET',
'Content-Type': 'text/html',
},
body: bodyValue,
};
};
exports.handler = async (event) => {
console.log(`EVENT: ${JSON.stringify(event)}`);
// twitterカード用のmetaタグ一覧
var card = '<meta name="twitter:card" content="summary_large_image">';
var site = '<meta name="twitter:site" content="@ComytomOfficial" />';
var title = '<meta name="twitter:title" content="REPLACE_STR">';
var description = '<meta name="twitter:description" content="REPLACE_STR">';
// var image = '<meta name="twitter:image" content="REPLACE_STR" />';
var image = '<meta property="og:image" content="REPLACE_STR">';
var titleValue = "デフォルトタイトル";
var discriptionValue = "デフォルトディスクリプション";
var imgValue = "デフォルト画像URL";
var redirectUrl = "デフォルトURL";
// パスパラメータからidを取得
if( event.pathParameters != null && "proxy" in event.pathParameters ){
// event.pathParameters.proxyでパスパラメータを取得
// AppSyncやaws-sdkを使ってAWSのリソースから情報取得
titleValue = "タイトル"
discriptionValue = "ディスクリプション"
imgValue = "画像URL"
redirectUrl = redirectUrl + "/blog" + "/記事ID"
}
title = title.replace( "REPLACE_STR", titleValue );
description = description.replace( "REPLACE_STR", discriptionValue );
image = image.replace( "REPLACE_STR", imgValue );
var bodyValue = `<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">${card}${site}${title}${description}${image}</head><body></body><script type="text/javascript">window.location.href = "${redirectUrl}";</script></html>`;
return {
statusCode: 200,
headers: {
'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'OPTIONS,GET',
'Content-Type': 'text/html',
},
body: bodyValue,
};
};
おわり
おわり
twitterカードのためにSSRやその他複雑そうな仕組みを導入するのはさすがに時間がかかりそうだなと思っていましたが、twitter側は「curl」コマンドのようなことを実施しているだけということがわかり、AWSのAmplify、APIGateway、Lambdaを使うと非常に簡単に済みました。 APIGatewayにはカスタムドメイン設定がありますので、それらしいドメインを作成してAPIGatewayを設定すれば体裁も良くなります。
twitterカードのためにSSRやその他複雑そうな仕組みを導入するのはさすがに時間がかかりそうだなと思っていましたが、twitter側は「curl」コマンドのようなことを実施しているだけということがわかり、AWSのAmplify、APIGateway、Lambdaを使うと非常に簡単に済みました。 APIGatewayにはカスタムドメイン設定がありますので、それらしいドメインを作成してAPIGatewayを設定すれば体裁も良くなります。
AWS APIGatewayでtwitter用のhtmlを返す
twitterindex.htmlAPIAWSAPIGatewayLambdaSPASSRtwitter cardhtmlThis article describes how to use AWS APIGateway and Lambda to create a simple HTML page with Twitter card meta tags. This can be used to embed Twitter cards in blog posts without having to implement SSR or other complex systems.
by JanitorJun 16, 2023
Vueでブログ環境を構築していて、twitterカード用のmetaタグをjavascriptでページ毎に変更してみましたが、twitterに表示されませんでした。 理由は、twitterがわざわざjavascriptを実行しない、ということでした。 記事に表示する情報はAWSのリソースに入っているので、Lambdaでtwitter用のhtmlを作成しAPIGatewayで返すことにしました。 twitterカードのためにサーバサイドレンダリングを一から始めるよりずっとお手軽なのではないでしょうか。
Vueでブログ環境を構築していて、twitterカード用のmetaタグをjavascriptでページ毎に変更してみましたが、twitterに表示されませんでした。 理由は、twitterがわざわざjavascriptを実行しない、ということでした。 記事に表示する情報はAWSのリソースに入っているので、Lambdaでtwitter用のhtmlを作成しAPIGatewayで返すことにしました。 twitterカードのためにサーバサイドレンダリングを一から始めるよりずっとお手軽なのではないでしょうか。
Jump Links
1. APIGateway、Lambda作成
2. APIGatewayのメソッドレスポンスのモデルスキーマを作成
3. APIGatewayのメソッドレスポンスにモデルスキーマを設定
4. 1で作成したLambdaを修正
おわり
1. APIGateway、Lambda作成
1. APIGateway、Lambda作成
私の場合は、Cloud9上からAmplifyの下記コマンドで出来上がりです。 流れは、APIGatewayを作成し、そのままLambdaを作成しています。 Amplifyから作成すると、CORSの設定の話が全く出てこないので非常に楽ですね。 ここで作成したAPIGatewayのパスは「indexhtmls」です。 記事IDなどを入れるパラメータはAPIGatewayが勝手に作成してくれる「proxy」というところに入れます。 なので、最終的にtwitterに書き込む際のURLは、「https://ドメイン名/indexhtmls/記事IDなどの情報」、ということになります。
私の場合は、Cloud9上からAmplifyの下記コマンドで出来上がりです。 流れは、APIGatewayを作成し、そのままLambdaを作成しています。 Amplifyから作成すると、CORSの設定の話が全く出てこないので非常に楽ですね。 ここで作成したAPIGatewayのパスは「indexhtmls」です。 記事IDなどを入れるパラメータはAPIGatewayが勝手に作成してくれる「proxy」というところに入れます。 なので、最終的にtwitterに書き込む際のURLは、「https://ドメイン名/indexhtmls/記事IDなどの情報」、ということになります。
$ amplify add api
? Select from one of the below mentioned services: REST
✔ Would you like to add a new path to an existing REST API: (y/N) · no
✔ Provide a friendly name for your resource to be used as a label for this category in the project: · indexhtmlsApi
✔ Provide a path (e.g., /book/{isbn}): · /indexhtmls
✔ Choose a Lambda source · Create a new Lambda function
? Provide an AWS Lambda function name: indexhtmlsLambda
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Hello World
$ amplify add api
? Select from one of the below mentioned services: REST
✔ Would you like to add a new path to an existing REST API: (y/N) · no
✔ Provide a friendly name for your resource to be used as a label for this category in the project: · indexhtmlsApi
✔ Provide a path (e.g., /book/{isbn}): · /indexhtmls
✔ Choose a Lambda source · Create a new Lambda function
? Provide an AWS Lambda function name: indexhtmlsLambda
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Hello World
2. APIGatewayのメソッドレスポンスのモデルスキーマを作成
2. APIGatewayのメソッドレスポンスのモデルスキーマを作成
APIGatewayのコンソールでレスポンス用のモデルスキーマを作成します。 名前はemptyにしています。
APIGatewayのコンソールでレスポンス用のモデルスキーマを作成します。 名前はemptyにしています。
{
"$schema": "http://json-schema.org/draft-04/schema#",
"title" : "Empty Schema",
"type" : "object"
}
{
"$schema": "http://json-schema.org/draft-04/schema#",
"title" : "Empty Schema",
"type" : "object"
}
3. APIGatewayのメソッドレスポンスにモデルスキーマを設定
3. APIGatewayのメソッドレスポンスにモデルスキーマを設定
2で作成したモデルスキーマをメソッドレスポンスに設定します。 コンテンツタイプは「text/html」です。
2で作成したモデルスキーマをメソッドレスポンスに設定します。 コンテンツタイプは「text/html」です。
4. 1で作成したLambdaを修正
4. 1で作成したLambdaを修正
ここまでくれば、URLに載ってくる記事ID情報などから記事を特定し、コンテンツを取得して簡単なhtmlにtwitter用のmetaタグを設定して返すような文言を、Lambdaに書けば終わりです。
ここまでくれば、URLに載ってくる記事ID情報などから記事を特定し、コンテンツを取得して簡単なhtmlにtwitter用のmetaタグを設定して返すような文言を、Lambdaに書けば終わりです。
exports.handler = async (event) => {
console.log(`EVENT: ${JSON.stringify(event)}`);
// twitterカード用のmetaタグ一覧
var card = '<meta name="twitter:card" content="summary_large_image">';
var site = '<meta name="twitter:site" content="@ComytomOfficial" />';
var title = '<meta name="twitter:title" content="REPLACE_STR">';
var description = '<meta name="twitter:description" content="REPLACE_STR">';
// var image = '<meta name="twitter:image" content="REPLACE_STR" />';
var image = '<meta property="og:image" content="REPLACE_STR">';
var titleValue = "デフォルトタイトル";
var discriptionValue = "デフォルトディスクリプション";
var imgValue = "デフォルト画像URL";
var redirectUrl = "デフォルトURL";
// パスパラメータからidを取得
if( event.pathParameters != null && "proxy" in event.pathParameters ){
// event.pathParameters.proxyでパスパラメータを取得
// AppSyncやaws-sdkを使ってAWSのリソースから情報取得
titleValue = "タイトル"
discriptionValue = "ディスクリプション"
imgValue = "画像URL"
redirectUrl = redirectUrl + "/blog" + "/記事ID"
}
title = title.replace( "REPLACE_STR", titleValue );
description = description.replace( "REPLACE_STR", discriptionValue );
image = image.replace( "REPLACE_STR", imgValue );
var bodyValue = `<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">${card}${site}${title}${description}${image}</head><body></body><script type="text/javascript">window.location.href = "${redirectUrl}";</script></html>`;
return {
statusCode: 200,
headers: {
'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'OPTIONS,GET',
'Content-Type': 'text/html',
},
body: bodyValue,
};
};
exports.handler = async (event) => {
console.log(`EVENT: ${JSON.stringify(event)}`);
// twitterカード用のmetaタグ一覧
var card = '<meta name="twitter:card" content="summary_large_image">';
var site = '<meta name="twitter:site" content="@ComytomOfficial" />';
var title = '<meta name="twitter:title" content="REPLACE_STR">';
var description = '<meta name="twitter:description" content="REPLACE_STR">';
// var image = '<meta name="twitter:image" content="REPLACE_STR" />';
var image = '<meta property="og:image" content="REPLACE_STR">';
var titleValue = "デフォルトタイトル";
var discriptionValue = "デフォルトディスクリプション";
var imgValue = "デフォルト画像URL";
var redirectUrl = "デフォルトURL";
// パスパラメータからidを取得
if( event.pathParameters != null && "proxy" in event.pathParameters ){
// event.pathParameters.proxyでパスパラメータを取得
// AppSyncやaws-sdkを使ってAWSのリソースから情報取得
titleValue = "タイトル"
discriptionValue = "ディスクリプション"
imgValue = "画像URL"
redirectUrl = redirectUrl + "/blog" + "/記事ID"
}
title = title.replace( "REPLACE_STR", titleValue );
description = description.replace( "REPLACE_STR", discriptionValue );
image = image.replace( "REPLACE_STR", imgValue );
var bodyValue = `<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">${card}${site}${title}${description}${image}</head><body></body><script type="text/javascript">window.location.href = "${redirectUrl}";</script></html>`;
return {
statusCode: 200,
headers: {
'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'OPTIONS,GET',
'Content-Type': 'text/html',
},
body: bodyValue,
};
};
おわり
おわり
twitterカードのためにSSRやその他複雑そうな仕組みを導入するのはさすがに時間がかかりそうだなと思っていましたが、twitter側は「curl」コマンドのようなことを実施しているだけということがわかり、AWSのAmplify、APIGateway、Lambdaを使うと非常に簡単に済みました。 APIGatewayにはカスタムドメイン設定がありますので、それらしいドメインを作成してAPIGatewayを設定すれば体裁も良くなります。
twitterカードのためにSSRやその他複雑そうな仕組みを導入するのはさすがに時間がかかりそうだなと思っていましたが、twitter側は「curl」コマンドのようなことを実施しているだけということがわかり、AWSのAmplify、APIGateway、Lambdaを使うと非常に簡単に済みました。 APIGatewayにはカスタムドメイン設定がありますので、それらしいドメインを作成してAPIGatewayを設定すれば体裁も良くなります。