{"id":2230,"date":"2025-03-24T08:47:56","date_gmt":"2025-03-23T23:47:56","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=2230"},"modified":"2025-03-24T08:48:21","modified_gmt":"2025-03-23T23:48:21","slug":"aws-amplify%e3%81%a7%e5%ae%9f%e7%8f%be%e3%81%99%e3%82%8b%ef%bc%81%e5%88%9d%e6%9c%9f%e8%b2%bb%e7%94%a8%e3%82%bc%e3%83%ad%e3%81%ae%e6%9c%ac%e7%95%aa%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89%e3%81%a8%e8%87%aa","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=2230","title":{"rendered":"AWS Amplify\u3067\u5b9f\u73fe\u3059\u308b\uff01\u521d\u671f\u8cbb\u7528\u30bc\u30ed\u306e\u672c\u756a\u74b0\u5883\u69cb\u7bc9\u3068\u81ea\u52d5\u30c7\u30d7\u30ed\u30a4\u5b8c\u5168\u30ac\u30a4\u30c92024"},"content":{"rendered":"\n<div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_admin\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>116<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>121<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>128<\/b><br \/>\n    <div id=\"toc_container\" class=\"sgb-toc--bullets js-smooth-scroll\" data-dialog-title=\"\u76ee\u6b21\">\n      <p class=\"toc_title\">\u76ee\u6b21 <\/p>\n      <ul class=\"toc_list\">  <li class=\"first\">    <a href=\"#i-0\">AWS Amplify \u3068\u306f\uff1f\u521d\u5fc3\u8005\u306b\u3082\u308f\u304b\u308b\u57fa\u790e\u89e3\u8aac<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d3\u30b9\u306e\u8ab2\u984c\u3092\u89e3\u6c7a\u3059\u308bAWS Amplify\u306e\u7279\u5fb4<\/a>      <\/li>      <li>        <a href=\"#i-2\">\u5f93\u6765\u306e\u958b\u767a\u624b\u6cd5\u3068\u6bd4\u8f03\u3057\u305fAWS Amplify\u306e\u30e1\u30ea\u30c3\u30c8<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-3\">AWS Amplify\u304c\u63d0\u4f9b\u3059\u308b\u4e3b\u8981\u6a5f\u80fd\u3068\u6d3b\u7528\u30b7\u30fc\u30f3<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-4\">AWS Amplify\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3068\u74b0\u5883\u69cb\u7bc9\u624b\u9806<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-5\">\u5fc5\u8981\u306a\u524d\u63d0\u77e5\u8b58\u3068\u30c4\u30fc\u30eb\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-6\">AWS Amplify\u306e\u521d\u671f\u8a2d\u5b9a\u3068\u8a8d\u8a3c\u60c5\u5831\u306e\u8a2d\u5b9a<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-7\">\u958b\u767a\u74b0\u5883\u3068\u672c\u756a\u74b0\u5883\u306e\u5206\u96e2\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-8\">\u5b9f\u8df5\uff01AWS Amplify\u306b\u3088\u308b\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u7bc9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-9\">\u6a5f\u80fd\u306e\u5b9f\u88c5\u3068\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406\u306e\u8a2d\u5b9a\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-10\">\u30c7\u30fc\u30bf\u30b9\u30c8\u30a2\u306e\u9078\u629e\u3068API\u306e\u81ea\u52d5\u751f\u6210\u8a8d\u8a3c\u624b\u9806<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-11\">\u30db\u30b9\u30c6\u30a3\u30f3\u30b0\u306e\u8a2d\u5b9a\u3068\u81ea\u52d5\u30c7\u30d7\u30ed\u30a4\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u69cb\u7bc9<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-12\">AWS Amplify\u306e\u904b\u7528\u7ba1\u7406\u3068\u30b3\u30b9\u30c8\u6700\u9069\u5316<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-13\">\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u3068\u30ed\u30ae\u30f3\u30b0\u306e\u52b9\u7387\u7684\u306a\u8a2d\u5b9a\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-14\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\u3068\u30b3\u30f3\u30d7\u30e9\u30a4\u30a2\u30f3\u30b9\u3078\u306e\u5bfe\u5fdc<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-15\">AWS Amplify\u306e\u6d3b\u7528\u4e8b\u4f8b\u3068\u767a\u5c55\u7684\u306a\u4f7f\u3044\u65b9<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-16\">\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u6210\u529f\u4e8b\u4f8b\u3068\u5b66\u3073\u306e\u30dd\u30a4\u30f3\u30c8<\/a>      <\/li>      <li>        <a href=\"#i-17\">\u4ed6\u306eAWS\u30b5\u30fc\u30d3\u30b9\u3068\u306e\u9023\u643a\u306b\u3088\u308b\u6a5f\u80fd\u62e1\u5f35<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-18\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u30c7\u30d0\u30c3\u30b0\u306e\u30c6\u30af\u30cb\u30c3\u30af<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-19\">AWS Amplify \u3068\u306f\uff1f\u521d\u5fc3\u8005\u306b\u3082\u308f\u304b\u308b\u57fa\u790e\u89e3\u8aac<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-20\">\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d3\u30b9\u306e\u8ab2\u984c\u3092\u89e3\u6c7a\u3059\u308bAWS Amplify\u306e\u7279\u5fb4<\/a>      <\/li>      <li>        <a href=\"#i-21\">\u5f93\u6765\u306e\u958b\u767a\u624b\u6cd5\u3068\u6bd4\u8f03\u3057\u305fAWS Amplify\u306e\u30e1\u30ea\u30c3\u30c8<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-22\">AWS Amplify\u304c\u63d0\u4f9b\u3059\u308b\u4e3b\u8981\u6a5f\u80fd\u3068\u6d3b\u7528\u30b7\u30fc\u30f3<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-23\">AWS Amplify\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3068\u74b0\u5883\u69cb\u7bc9\u624b\u9806<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-24\">\u5fc5\u8981\u306a\u524d\u63d0\u77e5\u8b58\u3068\u30c4\u30fc\u30eb\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/a>      <\/li>      <li>        <a href=\"#i-25\">AWS Amplify\u306e\u521d\u671f\u8a2d\u5b9a\u3068\u8a8d\u8a3c\u60c5\u5831\u306e\u8a2d\u5b9a<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-26\">\u958b\u767a\u74b0\u5883\u3068\u672c\u756a\u74b0\u5883\u306e\u5206\u96e2\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>      <\/li>    <\/ul>  <\/li><\/ul>\n      <a href=\"#\" class=\"sgb-toc-button js-toc-button\" rel=\"nofollow\" data-open-dialog=\"true\"><i class=\"fa fa-list\"><\/i><span class=\"sgb-toc-button__text\">\u76ee\u6b21\u3078<\/span><\/a>\n    <\/div><\/div><h2 class=\"wp-block-heading\" id=\"i-0\">AWS Amplify \u3068\u306f\uff1f\u521d\u5fc3\u8005\u306b\u3082\u308f\u304b\u308b\u57fa\u790e\u89e3\u8aac<\/h2>\n\n\n\n<p>AWS Amplify\u306f\u3001Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3084\u30e2\u30d0\u30a4\u30eb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u30fb\u30c7\u30d7\u30ed\u30a4\u3092\u52b9\u7387\u5316\u3059\u308b\u305f\u3081\u306e\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3067\u3059\u3002\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u8005\u304cAWS\u306e\u5f37\u529b\u306a\u6a5f\u80fd\u3092\u7c21\u5358\u306b\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u8a2d\u8a08\u3055\u308c\u3066\u304a\u308a\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u52b4\u529b\u3092\u6700\u5c0f\u9650\u306b\u6291\u3048\u306a\u304c\u3089\u3001\u672c\u683c\u7684\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-1\">\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d3\u30b9\u306e\u8ab2\u984c\u3092\u89e3\u6c7a\u3059\u308bAWS Amplify\u306e\u7279\u5fb4<\/h3>\n\n\n\n<p>AWS Amplify\u306f\u3001\u5f93\u6765\u306e\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d3\u30b9\u5229\u7528\u306b\u304a\u3051\u308b\u69d8\u3005\u306a\u8ab2\u984c\u3092\u89e3\u6c7a\u3059\u308b\u7279\u5fb4\u3092\u5099\u3048\u3066\u3044\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u7d71\u5408\u958b\u767a\u74b0\u5883\u306e\u63d0\u4f9b<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CLI\u30c4\u30fc\u30eb\u306b\u3088\u308b\u4e00\u8cab\u3057\u305f\u958b\u767a\u4f53\u9a13<\/li>\n\n\n\n<li>Visual Studio Code\u3084WebIDE\u3068\u306e\u9023\u643a<\/li>\n\n\n\n<li>Git\u30d9\u30fc\u30b9\u306eCI\/CD\u81ea\u52d5\u5316<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u8c4a\u5bcc\u306a\u6a5f\u80fd\u30bb\u30c3\u30c8<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c7\u30fc\u30bf\u30b9\u30c8\u30a2\uff08DynamoDB\uff09<\/li>\n\n\n\n<li>\u8a8d\u8a3c\uff08Cognito\uff09<\/li>\n\n\n\n<li>API\u306e\u81ea\u52d5\u751f\u6210\uff08AppSync\/API Gateway\uff09<\/li>\n\n\n\n<li>\u30b9\u30c8\u30ec\u30fc\u30b8\u7ba1\u7406\uff08S3\uff09<\/li>\n\n\n\n<li>\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\uff08SNS\uff09<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5ba3\u8a00\u7684\u306a\u8a2d\u5b9a\u30a2\u30d7\u30ed\u30fc\u30c1<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>YAML\u30d9\u30fc\u30b9\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb<\/li>\n\n\n\n<li>\u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\u306e\u30b3\u30fc\u30c9\u5316<\/li>\n\n\n\n<li>\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u3068\u306e\u89aa\u548c\u6027<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">\u5f93\u6765\u306e\u958b\u767a\u624b\u6cd5\u3068\u6bd4\u8f03\u3057\u305fAWS Amplify\u306e\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n<div id=\"id-200754d9-68ff-479d-8fc9-8f445dcf8b9b\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u958b\u767a\u30a2\u30b9\u30da\u30af\u30c8<\/th><th>\u5f93\u6765\u306e\u624b\u6cd5<\/th><th>AWS Amplify<\/th><\/tr><\/thead><tbody><tr><td>\u521d\u671f\u8a2d\u5b9a<\/td><td>\u8907\u6570\u30b5\u30fc\u30d3\u30b9\u306e\u500b\u5225\u8a2d\u5b9a\u304c\u5fc5\u8981<\/td><td>CLI\u306b\u3088\u308b\u30ef\u30f3\u30b9\u30c8\u30c3\u30d7\u8a2d\u5b9a<\/td><\/tr><tr><td>\u30a4\u30f3\u30d5\u30e9\u7ba1\u7406<\/td><td>\u624b\u52d5\u8a2d\u5b9a\u3068\u7ba1\u7406\u304c\u5fc5\u8981<\/td><td>\u81ea\u52d5\u30d7\u30ed\u30d3\u30b8\u30e7\u30cb\u30f3\u30b0<\/td><\/tr><tr><td>\u30c7\u30d7\u30ed\u30a4<\/td><td>\u8907\u96d1\u306a\u30c7\u30d7\u30ed\u30a4\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u4f5c\u6210<\/td><td>Git\u9023\u643a\u306b\u3088\u308b\u81ea\u52d5\u30c7\u30d7\u30ed\u30a4<\/td><\/tr><tr><td>\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0<\/td><td>\u624b\u52d5\u3067\u306e\u76e3\u8996\u3068\u8abf\u6574<\/td><td>\u81ea\u52d5\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u5bfe\u5fdc<\/td><\/tr><tr><td>\u30b3\u30b9\u30c8<\/td><td>\u521d\u671f\u6295\u8cc7\u304c\u5fc5\u8981<\/td><td>\u5f93\u91cf\u8ab2\u91d1\u5236<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"i-3\">AWS Amplify\u304c\u63d0\u4f9b\u3059\u308b\u4e3b\u8981\u6a5f\u80fd\u3068\u6d3b\u7528\u30b7\u30fc\u30f3<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u652f\u63f4<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React\u3001Angular\u3001Vue\u306a\u3069\u306e\u4e3b\u8981\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u30b5\u30dd\u30fc\u30c8<\/li>\n\n\n\n<li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u6a5f\u80fd<\/li>\n\n\n\n<li>\u30d6\u30e9\u30f3\u30c1\u3054\u3068\u306e\u74b0\u5883\u5206\u96e2<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u6a5f\u80fd\u306e\u81ea\u52d5\u751f\u6210<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ GraphQL API\u306e\u5b9a\u7fa9\u4f8b\n   type Todo @model {\n     id: ID!\n     name: String!\n     description: String\n     status: String\n   }<\/pre>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306a\u7c21\u5358\u306a\u5b9a\u7fa9\u304b\u3089\u3001CRUD\u30aa\u30da\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u5099\u3048\u305fAPI\u304c\u81ea\u52d5\u751f\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u8a8d\u8a3c\u30fb\u8a8d\u53ef\u306e\u5b9f\u88c5<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ \u8a8d\u8a3c\u6a5f\u80fd\u306e\u5b9f\u88c5\u4f8b\n   import { Auth } from 'aws-amplify';\n\n   async function signUp(username, password, email) {\n     try {\n       await Auth.signUp({\n         username,\n         password,\n         attributes: { email }\n       });\n     } catch (error) {\n       console.log('error signing up:', error);\n     }\n   }<\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>\u5b9f\u8df5\u7684\u306a\u6d3b\u7528\u30b7\u30fc\u30f3<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b9\u30bf\u30fc\u30c8\u30a2\u30c3\u30d7\u306eMVP\u958b\u767a<\/li>\n\n\n\n<li>\u30a8\u30f3\u30bf\u30fc\u30d7\u30e9\u30a4\u30ba\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30e2\u30c0\u30ca\u30a4\u30ba<\/li>\n\n\n\n<li>\u30e2\u30d0\u30a4\u30eb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u69cb\u7bc9<\/li>\n\n\n\n<li>\u30b5\u30fc\u30d0\u30fc\u30ec\u30b9\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a<\/li>\n<\/ul>\n\n\n\n<p>AWS Amplify\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u958b\u767a\u8005\u306f\u8907\u96d1\u306a\u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\u306e\u7ba1\u7406\u304b\u3089\u89e3\u653e\u3055\u308c\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u306b\u96c6\u4e2d\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u8005\u304c\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u969b\u306e\u969c\u58c1\u3092\u5927\u304d\u304f\u4e0b\u3052\u3001\u958b\u767a\u671f\u9593\u306e\u77ed\u7e2e\u3068\u30b3\u30b9\u30c8\u306e\u6700\u9069\u5316\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-4\">AWS Amplify\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3068\u74b0\u5883\u69cb\u7bc9\u624b\u9806<\/h2>\n\n\n\n<p>AWS Amplify\u3092\u4f7f\u7528\u3057\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u958b\u767a\u3059\u308b\u305f\u3081\u306e\u74b0\u5883\u69cb\u7bc9\u624b\u9806\u3092\u3001\u521d\u5fc3\u8005\u306b\u3082\u308f\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-5\">\u5fc5\u8981\u306a\u524d\u63d0\u77e5\u8b58\u3068\u30c4\u30fc\u30eb\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5fc5\u8981\u306a\u524d\u63d0\u77e5\u8b58<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JavaScript\u306e\u57fa\u672c\u7684\u306a\u7406\u89e3<\/li>\n\n\n\n<li>npm\u307e\u305f\u306fyarn\u306e\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9<\/li>\n\n\n\n<li>Git\u3068GitHub\u306e\u57fa\u672c\u64cd\u4f5c<\/li>\n\n\n\n<li>AWS\u30a2\u30ab\u30a6\u30f3\u30c8\u306e\u4f5c\u6210\u3068\u57fa\u672c\u6982\u5ff5<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5fc5\u8981\u306a\u30c4\u30fc\u30eb\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # Node.js\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\uff08v14.x\u4ee5\u4e0a\u63a8\u5968\uff09\n   # macOS\u306e\u5834\u5408\n   brew install node\n\n   # AWS CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n   curl \"https:\/\/awscli.amazonaws.com\/AWSCLIV2.pkg\" -o \"AWSCLIV2.pkg\"\n   sudo installer -pkg AWSCLIV2.pkg -target \/\n\n   # Amplify CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n   npm install -g @aws-amplify\/cli<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-6\">AWS Amplify\u306e\u521d\u671f\u8a2d\u5b9a\u3068\u8a8d\u8a3c\u60c5\u5831\u306e\u8a2d\u5b9a<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>AWS\u8a8d\u8a3c\u60c5\u5831\u306e\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # AWS CLI\u306e\u8a2d\u5b9a\n   aws configure\n   # AWS Access Key ID: [YOUR_ACCESS_KEY]\n   # AWS Secret Access Key: [YOUR_SECRET_KEY]\n   # Default region name: ap-northeast-1\n   # Default output format: json\n\n   # Amplify CLI\u306e\u521d\u671f\u5316\n   amplify configure<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u521d\u671f\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # React\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\u4f8b\n   npx create-react-app my-amplify-app\n   cd my-amplify-app\n\n   # Amplify\u306e\u521d\u671f\u5316\n   amplify init\n   # Project\u540d\u306e\u8a2d\u5b9a\n   # \u74b0\u5883\u540d\u306e\u8a2d\u5b9a\uff08dev\/prod\u7b49\uff09\n   # \u30a8\u30c7\u30a3\u30bf\u306e\u9078\u629e\n   # \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30bf\u30a4\u30d7\u306e\u9078\u629e<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u5fc5\u8981\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # Amplify\u30b3\u30a2\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n   npm install aws-amplify @aws-amplify\/ui-react\n\n   # \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3067\u306e\u8a2d\u5b9a\n   import { Amplify } from 'aws-amplify';\n   import awsconfig from '.\/aws-exports';\n   Amplify.configure(awsconfig);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-7\">\u958b\u767a\u74b0\u5883\u3068\u672c\u756a\u74b0\u5883\u306e\u5206\u96e2\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u74b0\u5883\u306e\u5206\u96e2<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # \u958b\u767a\u74b0\u5883\u306e\u4f5c\u6210\n   amplify env add dev\n\n   # \u672c\u756a\u74b0\u5883\u306e\u4f5c\u6210\n   amplify env add prod\n\n   # \u74b0\u5883\u306e\u5207\u308a\u66ff\u3048\n   amplify env checkout prod<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u74b0\u5883\u5225\u306e\u8a2d\u5b9a\u7ba1\u7406<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ config\/aws-exports.js\n   const awsconfig = {\n     \/\/ \u5171\u901a\u8a2d\u5b9a\n     Auth: {\n       region: 'ap-northeast-1',\n       userPoolId: process.env.REACT_APP_USER_POOL_ID,\n       userPoolWebClientId: process.env.REACT_APP_CLIENT_ID\n     },\n     \/\/ \u74b0\u5883\u5225\u8a2d\u5b9a\n     API: {\n       endpoints: [\n         {\n           name: 'api',\n           endpoint: process.env.REACT_APP_API_ENDPOINT\n         }\n       ]\n     }\n   };<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/strong> \u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u9805\u76ee \u63a8\u5968\u8a2d\u5b9a \u7406\u7531 \u74b0\u5883\u5909\u6570 .env.local\u3067\u7ba1\u7406 \u6a5f\u5bc6\u60c5\u5831\u306e\u4fdd\u8b77 API Key \u74b0\u5883\u5909\u6570\u3067\u7ba1\u7406 \u30bb\u30ad\u30e5\u30a2\u306a\u5024\u306e\u7ba1\u7406 \u8a8d\u8a3c\u60c5\u5831 Cognito\u306e\u4f7f\u7528 \u5b89\u5168\u306a\u8a8d\u8a3c\u7ba1\u7406 \u30d6\u30e9\u30f3\u30c1\u4fdd\u8b77 main\u30d6\u30e9\u30f3\u30c1\u306e\u4fdd\u8b77 \u8aa4\u3063\u305f\u30c7\u30d7\u30ed\u30a4\u306e\u9632\u6b62<\/li>\n\n\n\n<li><strong>\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d6\u30e9\u30f3\u30c1\u30d9\u30fc\u30b9\u306e\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u6226\u7565<\/li>\n\n\n\n<li>\u81ea\u52d5\u30c6\u30b9\u30c8\u306e\u5c0e\u5165<\/li>\n\n\n\n<li>\u6bb5\u968e\u7684\u306a\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\uff08dev \u2192 staging \u2192 prod\uff09<\/li>\n\n\n\n<li>\u30ed\u30fc\u30eb\u30d0\u30c3\u30af\u624b\u9806\u306e\u6e96\u5099<\/li>\n<\/ul>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u76e3\u8996\u3068\u30ed\u30ae\u30f3\u30b0<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ \u30ed\u30b0\u8a2d\u5b9a\u4f8b\n   Amplify.Logger.LOG_LEVEL = 'DEBUG'; \/\/ INFO, WARN, ERROR\n\n   \/\/ \u30ab\u30b9\u30bf\u30e0\u30ed\u30b0\u306e\u5b9f\u88c5\n   const logger = new Amplify.Logger('MyApp');\n   logger.info('\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u8d77\u52d5');\n   logger.debug('\u30c7\u30d0\u30c3\u30b0\u60c5\u5831');\n   logger.warn('\u8b66\u544a\u30e1\u30c3\u30bb\u30fc\u30b8');<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u8a2d\u5b9a\u3068\u624b\u9806\u3092\u9069\u5207\u306b\u5b9f\u65bd\u3059\u308b\u3053\u3068\u3067\u3001\u5805\u7262\u3067\u7ba1\u7406\u3057\u3084\u3059\u3044\u958b\u767a\u74b0\u5883\u3092\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u3001\u74b0\u5883\u306e\u5206\u96e2\u3068\u9069\u5207\u306a\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u8a2d\u5b9a\u306f\u3001\u672c\u756a\u74b0\u5883\u3067\u306e\u5b89\u5b9a\u3057\u305f\u904b\u7528\u306e\u305f\u3081\u306b\u91cd\u8981\u3067\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-8\">\u5b9f\u8df5\uff01AWS Amplify\u306b\u3088\u308b\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u7bc9<\/h2>\n\n\n\n<p>\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f8b\u306b\u3001AWS Amplify\u3092\u4f7f\u7528\u3057\u305f\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u69cb\u7bc9\u30d7\u30ed\u30bb\u30b9\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u3001\u30b7\u30f3\u30d7\u30eb\u306aTodo\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f8b\u306b\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-9\">\u6a5f\u80fd\u306e\u5b9f\u88c5\u3068\u30e6\u30fc\u30b6\u30fc\u7ba1\u7406\u306e\u8a2d\u5b9a\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u8a8d\u8a3c\u6a5f\u80fd\u306e\u8ffd\u52a0<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # Cognito\u306b\u3088\u308b\u8a8d\u8a3c\u6a5f\u80fd\u306e\u8ffd\u52a0\n   amplify add auth\n\n   # \u30c7\u30d5\u30a9\u30eb\u30c8\u8a2d\u5b9a\u306e\u9078\u629e\n   ? Do you want to use the default authentication configuration? (Y\/n) Y\n   ? How do you want users to be able to sign in? Username\n   ? Do you want to configure advanced settings? No<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ React Component\u3067\u306eAuth\u5b9f\u88c5\n   import { withAuthenticator } from '@aws-amplify\/ui-react';\n\n   function App() {\n     return (\n       &lt;div&gt;\n         &lt;h1&gt;\u8a8d\u8a3c\u6e08\u307f\u30e6\u30fc\u30b6\u30fc\u306e\u307f\u8868\u793a\u3055\u308c\u308b\u30b3\u30f3\u30c6\u30f3\u30c4&lt;\/h1&gt;\n       &lt;\/div&gt;\n     );\n   }\n\n   export default withAuthenticator(App);<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30ab\u30b9\u30bf\u30e0\u8a8d\u8a3cUI<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   import { Authenticator } from '@aws-amplify\/ui-react';\n\n   export default function App() {\n     return (\n       &lt;Authenticator&gt;\n         {({ signOut, user }) =&gt; (\n           &lt;div&gt;\n             &lt;h1&gt;\u3088\u3046\u3053\u305d {user.username}&lt;\/h1&gt;\n             &lt;button onClick={signOut}&gt;\u30b5\u30a4\u30f3\u30a2\u30a6\u30c8&lt;\/button&gt;\n           &lt;\/div&gt;\n         )}\n       &lt;\/Authenticator&gt;\n     );\n   }<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-10\">\u30c7\u30fc\u30bf\u30b9\u30c8\u30a2\u306e\u9078\u629e\u3068API\u306e\u81ea\u52d5\u751f\u6210\u8a8d\u8a3c\u624b\u9806<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>GraphQL API\u306e\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # API\u306e\u8ffd\u52a0\n   amplify add api\n\n   # \u4ee5\u4e0b\u306e\u8a2d\u5b9a\u3092\u9078\u629e\n   ? Please select from one of the below mentioned services: GraphQL\n   ? Provide API name: todoAPI\n   ? Choose the default authorization type for the API: Amazon Cognito User Pool<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30b9\u30ad\u30fc\u30de\u5b9a\u7fa9<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # schema.graphql\n   type Todo @model @auth(rules: [{ allow: owner }]) {\n     id: ID!\n     title: String!\n     description: String\n     status: TodoStatus!\n     dueDate: AWSDateTime\n   }\n\n   enum TodoStatus {\n     NEW\n     IN_PROGRESS\n     COMPLETED\n   }<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>API\u306e\u5229\u7528<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   import { API, graphqlOperation } from 'aws-amplify';\n   import { listTodos } from '.\/graphql\/queries';\n   import { createTodo, updateTodo, deleteTodo } from '.\/graphql\/mutations';\n\n   \/\/ Todo\u4e00\u89a7\u306e\u53d6\u5f97\n   const fetchTodos = async () =&gt; {\n     try {\n       const todoData = await API.graphql(graphqlOperation(listTodos));\n       return todoData.data.listTodos.items;\n     } catch (error) {\n       console.error('Error fetching todos:', error);\n     }\n   };\n\n   \/\/ Todo\u306e\u4f5c\u6210\n   const addTodo = async (todoDetails) =&gt; {\n     try {\n       await API.graphql(graphqlOperation(createTodo, { input: todoDetails }));\n     } catch (error) {\n       console.error('Error creating todo:', error);\n     }\n   };<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-11\">\u30db\u30b9\u30c6\u30a3\u30f3\u30b0\u306e\u8a2d\u5b9a\u3068\u81ea\u52d5\u30c7\u30d7\u30ed\u30a4\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u69cb\u7bc9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30db\u30b9\u30c6\u30a3\u30f3\u30b0\u306e\u8ffd\u52a0<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # \u30db\u30b9\u30c6\u30a3\u30f3\u30b0\u306e\u8a2d\u5b9a\n   amplify add hosting\n\n   # \u4ee5\u4e0b\u306e\u8a2d\u5b9a\u3092\u9078\u629e\n   ? Select the plugin module to execute: Hosting with Amplify Console\n   ? Choose a type: Manual deployment<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30c7\u30d7\u30ed\u30a4\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3\u306e\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # amplify.yml\n   version: 1\n   frontend:\n     phases:\n       preBuild:\n         commands:\n           - npm ci\n       build:\n         commands:\n           - npm run build\n     artifacts:\n       baseDirectory: build\n       files:\n         - '**\/*'\n     cache:\n       paths:\n         - node_modules\/**\/*<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u74b0\u5883\u5909\u6570\u306e\u8a2d\u5b9a<\/strong> \u74b0\u5883\u5909\u6570\u540d \u8aac\u660e \u4f7f\u7528\u4f8b AMPLIFY_FACEBOOK_CLIENT_ID Facebook\u8a8d\u8a3c\u7528ID \u30bd\u30fc\u30b7\u30e3\u30eb\u30ed\u30b0\u30a4\u30f3 AMPLIFY_GOOGLE_CLIENT_ID Google\u8a8d\u8a3c\u7528ID \u30bd\u30fc\u30b7\u30e3\u30eb\u30ed\u30b0\u30a4\u30f3 AMPLIFY_STORAGE_BUCKET S3\u30d0\u30b1\u30c3\u30c8\u540d \u30d5\u30a1\u30a4\u30eb\u30b9\u30c8\u30ec\u30fc\u30b8<\/li>\n\n\n\n<li><strong>\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u306e\u81ea\u52d5\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # \u30c7\u30d7\u30ed\u30a4\u306e\u5b9f\u884c\n   amplify push\n\n   # \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u30c7\u30d7\u30ed\u30a4\n   amplify publish<\/pre>\n\n\n\n<p>\u5b9f\u88c5\u306e\u30dd\u30a4\u30f3\u30c8\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   try {\n     \/\/ API\u547c\u3073\u51fa\u3057\u306a\u3069\u306e\u51e6\u7406\n   } catch (error) {\n     if (error.errors) {\n       \/\/ GraphQL\u30a8\u30e9\u30fc\u306e\u51e6\u7406\n       error.errors.forEach(err =&gt; console.error('GraphQL error:', err));\n     } else {\n       \/\/ \u305d\u306e\u4ed6\u306e\u30a8\u30e9\u30fc\u51e6\u7406\n       console.error('Error:', error);\n     }\n   }<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30c7\u30fc\u30bf\u540c\u671f\u306e\u5b9f\u88c5<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   import { DataStore } from '@aws-amplify\/datastore';\n\n   \/\/ \u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u66f4\u65b0\u306e\u8cfc\u8aad\n   const subscription = DataStore.observe(Todo).subscribe(msg =&gt; {\n     console.log(msg.model, msg.opType, msg.element);\n   });\n\n   \/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u6642\u306b\u89e3\u9664\n   useEffect(() =&gt; {\n     return () =&gt; subscription.unsubscribe();\n   }, []);<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u5b9f\u88c5\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u8a8d\u8a3c\u6a5f\u80fd\u3092\u5099\u3048\u3001\u30c7\u30fc\u30bf\u306e\u6c38\u7d9a\u5316\u304c\u53ef\u80fd\u306a\u672c\u683c\u7684\u306aWeb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002AWS Amplify\u306e\u63d0\u4f9b\u3059\u308b\u6a5f\u80fd\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\u306e\u69cb\u7bc9\u3084\u7ba1\u7406\u306b\u6642\u9593\u3092\u53d6\u3089\u308c\u308b\u3053\u3068\u306a\u304f\u3001\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u306e\u5b9f\u88c5\u306b\u96c6\u4e2d\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-12\">AWS Amplify\u306e\u904b\u7528\u7ba1\u7406\u3068\u30b3\u30b9\u30c8\u6700\u9069\u5316<\/h2>\n\n\n\n<p>AWS Amplify\u3092\u672c\u756a\u74b0\u5883\u3067\u52b9\u7387\u7684\u306b\u904b\u7528\u3057\u3001\u30b3\u30b9\u30c8\u3092\u6700\u9069\u5316\u3059\u308b\u305f\u3081\u306e\u5177\u4f53\u7684\u306a\u624b\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-13\">\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u3068\u30ed\u30ae\u30f3\u30b0\u306e\u52b9\u7387\u7684\u306a\u8a2d\u5b9a\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>CloudWatch\u3068\u306e\u9023\u643a\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ Amplify\u306e\u30ed\u30b0\u30ec\u30d9\u30eb\u8a2d\u5b9a\n   import { Logger } from 'aws-amplify';\n\n   Logger.LOG_LEVEL = 'DEBUG'; \/\/ ERROR, WARN, INFO, DEBUG, VERBOSE\n\n   \/\/ \u30ab\u30b9\u30bf\u30e0\u30ed\u30ac\u30fc\u306e\u4f5c\u6210\n   const logger = new Logger('MyApp', 'DEBUG');\n\n   \/\/ \u69cb\u9020\u5316\u30ed\u30b0\u306e\u5b9f\u88c5\n   const logOperation = (operation, details) =&gt; {\n     logger.debug({\n       operation,\n       timestamp: new Date().toISOString(),\n       details,\n       environment: process.env.REACT_APP_ENV\n     });\n   };<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u306e\u8a2d\u5b9a<\/strong> \u30e1\u30c8\u30ea\u30af\u30b9 \u76e3\u8996\u9805\u76ee \u30a2\u30e9\u30fc\u30c8\u95be\u5024 API Latency \u30ec\u30b9\u30dd\u30f3\u30b9\u6642\u9593 &gt; 1000ms Error Rate \u30a8\u30e9\u30fc\u767a\u751f\u7387 &gt; 1% Auth Failures \u8a8d\u8a3c\u5931\u6557\u56de\u6570 &gt; 10\u56de\/\u5206 Storage Usage S3\u4f7f\u7528\u91cf &gt; 80%<\/li>\n\n\n\n<li><strong>\u30a2\u30e9\u30fc\u30c8\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   {\n     \"AlarmName\": \"API-HighLatency\",\n     \"ComparisonOperator\": \"GreaterThanThreshold\",\n     \"EvaluationPeriods\": 2,\n     \"MetricName\": \"Latency\",\n     \"Namespace\": \"AWS\/ApiGateway\",\n     \"Period\": 300,\n     \"Threshold\": 1000,\n     \"AlarmActions\": [\"SNS\u30c8\u30d4\u30c3\u30afARN\"]\n   }<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-14\">\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56\u3068\u30b3\u30f3\u30d7\u30e9\u30a4\u30a2\u30f3\u30b9\u3078\u306e\u5bfe\u5fdc<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>IAM\u30ed\u30fc\u30eb\u306e\u6700\u5c0f\u6a29\u9650\u539f\u5247\u306e\u9069\u7528<\/li>\n\n\n\n<li>\u74b0\u5883\u5909\u6570\u306e\u6697\u53f7\u5316<\/li>\n\n\n\n<li>API\u30ad\u30fc\u306e\u30ed\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3<\/li>\n\n\n\n<li>CORS\u8a2d\u5b9a\u306e\u9069\u5207\u306a\u7ba1\u7406<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ CORS\u306e\u8a2d\u5b9a\u4f8b\n   const apiConfig = {\n     API: {\n       endpoints: [\n         {\n           name: 'api',\n           endpoint: process.env.REACT_APP_API_ENDPOINT,\n           custom_header: async () =&gt; {\n             return {\n               'Content-Type': 'application\/json',\n               'X-Api-Key': await getApiKey()\n             }\n           }\n         }\n       ]\n     }\n   };<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30d7\u30e9\u30a4\u30a2\u30f3\u30b9\u5bfe\u5fdc<\/strong><br>\u8981\u4ef6 \u5bfe\u5fdc\u65b9\u6cd5 \u78ba\u8a8d\u9805\u76ee<br>\u30c7\u30fc\u30bf\u6697\u53f7\u5316 S3\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u6697\u53f7\u5316 \u6697\u53f7\u5316\u8a2d\u5b9a\u306e\u78ba\u8a8d<br>\u30a2\u30af\u30bb\u30b9\u30ed\u30b0 CloudTrail\u6709\u52b9\u5316 \u30ed\u30b0\u4fdd\u5b58\u671f\u9593\u306e\u8a2d\u5b9a<br>\u30d0\u30c3\u30af\u30a2\u30c3\u30d7 \u81ea\u52d5\u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u8a2d\u5b9a \u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u6210\u529f\u7387<br>\u8a8d\u8a3c\u7ba1\u7406 Cognito\u30dd\u30ea\u30b7\u30fc\u8a2d\u5b9a \u30d1\u30b9\u30ef\u30fc\u30c9\u30dd\u30ea\u30b7\u30fc \u30b3\u30b9\u30c8\u7ba1\u7406\u3068\u30ea\u30bd\u30fc\u30b9\u306e\u6700\u9069\u5316\u624b\u6cd5<ol><li><strong>\u30b3\u30b9\u30c8\u6700\u9069\u5316\u306e\u57fa\u672c\u6226\u7565<\/strong><\/li><\/ol><code>\/\/ API\u30b3\u30fc\u30eb\u306e\u6700\u9069\u5316 const optimizedApiCall = async () =&gt; { \/\/ \u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u5b9f\u88c5 const cache = new Map(); const cacheKey = 'data-key'; if (cache.has(cacheKey)) { return cache.get(cacheKey); } const result = await API.graphql(graphqlOperation(query)); cache.set(cacheKey, result); return result; };<\/code><ol start=\"2\"><li><strong>\u30ea\u30bd\u30fc\u30b9\u4f7f\u7528\u91cf\u306e\u6700\u9069\u5316<\/strong><\/li><\/ol><ul><li>Lambda\u95a2\u6570\u306e\u30e1\u30e2\u30ea\u8a2d\u5b9a\u6700\u9069\u5316<\/li><li>S3\u30e9\u30a4\u30d5\u30b5\u30a4\u30af\u30eb\u30eb\u30fc\u30eb\u306e\u8a2d\u5b9a<\/li><li>DynamoDB\u306e\u30aa\u30f3\u30c7\u30de\u30f3\u30c9\u30ad\u30e3\u30d1\u30b7\u30c6\u30a3\u8a2d\u5b9a<\/li><li>CloudFront\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u6d3b\u7528<\/li><\/ul><ol start=\"2\"><li><strong>\u30b3\u30b9\u30c8\u76e3\u8996\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9<\/strong> \u30b3\u30b9\u30c8\u9805\u76ee \u76e3\u8996\u65b9\u6cd5 \u6700\u9069\u5316\u30a2\u30af\u30b7\u30e7\u30f3 API\u5229\u7528\u6599 \u4f7f\u7528\u91cf\u30b0\u30e9\u30d5 \u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565 \u30b9\u30c8\u30ec\u30fc\u30b8 \u5bb9\u91cf\u63a8\u79fb \u4e0d\u8981\u30c7\u30fc\u30bf\u524a\u9664 \u8a8d\u8a3c MAU\u63a8\u79fb \u30d7\u30e9\u30f3\u898b\u76f4\u3057 \u30db\u30b9\u30c6\u30a3\u30f3\u30b0 \u30c8\u30e9\u30d5\u30a3\u30c3\u30af CDN\u6700\u9069\u5316<\/li><li><strong>\u30b3\u30b9\u30c8\u6700\u9069\u5316\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/strong><\/li><\/ol><code># \u958b\u767a\u74b0\u5883\u306e\u30ea\u30bd\u30fc\u30b9\u524a\u9664 amplify delete # \u7279\u5b9a\u306e\u6a5f\u80fd\u306e\u524a\u9664 amplify remove auth amplify remove api # \u672c\u756a\u74b0\u5883\u306e\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u8a2d\u5b9a amplify update api # - Choose the type of API: REST # - Configure throttling: Yes # - Rate: 1000 # - Burst: 200<\/code><ol start=\"5\"><li><strong>\u904b\u7528\u52b9\u7387\u5316\u306e\u305f\u3081\u306e\u30c4\u30fc\u30eb\u6d3b\u7528<\/strong><\/li><\/ol><code>\/\/ \u81ea\u52d5\u30af\u30ea\u30fc\u30f3\u30a2\u30c3\u30d7\u30b9\u30af\u30ea\u30d7\u30c8 const cleanup = async () =&gt; { \/\/ \u53e4\u3044\u30c7\u30fc\u30bf\u306e\u524a\u9664 const oldItems = await API.graphql( graphqlOperation(listItems, { filter: { createdAt: { lt: getDateXDaysAgo(30) } } }) ); \/\/ \u30d0\u30c3\u30c1\u524a\u9664\u306e\u5b9f\u884c await Promise.all( oldItems.data.listItems.items.map(item =&gt; API.graphql(graphqlOperation(deleteItem, { input: { id: item.id } })) ) ); };<\/code> \u3053\u308c\u3089\u306e\u904b\u7528\u7ba1\u7406\u3068\u30b3\u30b9\u30c8\u6700\u9069\u5316\u306e\u65bd\u7b56\u3092\u9069\u5207\u306b\u5b9f\u65bd\u3059\u308b\u3053\u3068\u3067\u3001AWS Amplify\u3092\u4f7f\u7528\u3057\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5b89\u5b9a\u904b\u7528\u3068\u30b3\u30b9\u30c8\u52b9\u7387\u306e\u5411\u4e0a\u3092\u5b9f\u73fe\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u3001\u65e9\u671f\u304b\u3089\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u3068\u30b3\u30b9\u30c8\u7ba1\u7406\u306e\u4f53\u5236\u3092\u6574\u3048\u308b\u3053\u3068\u3067\u3001\u5c06\u6765\u7684\u306a\u904b\u7528\u8ca0\u8377\u306e\u8efd\u6e1b\u3068\u30b3\u30b9\u30c8\u8d85\u904e\u306e\u9632\u6b62\u306b\u3064\u306a\u304c\u308a\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-15\">AWS Amplify\u306e\u6d3b\u7528\u4e8b\u4f8b\u3068\u767a\u5c55\u7684\u306a\u4f7f\u3044\u65b9<\/h2>\n\n\n\n<p>AWS Amplify\u306e\u5b9f\u8df5\u7684\u306a\u6d3b\u7528\u4e8b\u4f8b\u3068\u3001\u3088\u308a\u9ad8\u5ea6\u306a\u4f7f\u7528\u65b9\u6cd5\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u7d4c\u9a13\u306b\u57fa\u3065\u304f\u77e5\u898b\u3068\u3001\u767a\u5c55\u7684\u306a\u5b9f\u88c5\u30c6\u30af\u30cb\u30c3\u30af\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-16\">\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306e\u6210\u529f\u4e8b\u4f8b\u3068\u5b66\u3073\u306e\u30dd\u30a4\u30f3\u30c8<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>E\u30b3\u30de\u30fc\u30b9\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u306e\u69cb\u7bc9\u4e8b\u4f8b<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ \u5546\u54c1\u691c\u7d22\u6a5f\u80fd\u306e\u5b9f\u88c5\u4f8b\n   import { API, graphqlOperation } from 'aws-amplify';\n   import { searchProducts } from '.\/graphql\/queries';\n\n   const ProductSearch = () =&gt; {\n     const [searchResults, setSearchResults] = useState([]);\n\n     const handleSearch = async (searchTerm) =&gt; {\n       try {\n         const filter = {\n           or: [\n             { name: { contains: searchTerm } },\n             { description: { contains: searchTerm } }\n           ]\n         };\n\n         const results = await API.graphql(\n           graphqlOperation(searchProducts, { filter })\n         );\n\n         setSearchResults(results.data.searchProducts.items);\n       } catch (error) {\n         console.error('\u691c\u7d22\u30a8\u30e9\u30fc:', error);\n       }\n     };\n\n     return (\n       \/\/ \u691c\u7d22UI\u5b9f\u88c5\n     );\n   };<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>SNS\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u4e8b\u4f8b<\/strong> \u6a5f\u80fd \u5b9f\u88c5\u65b9\u6cd5 \u5f97\u3089\u308c\u305f\u77e5\u898b \u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u901a\u4fe1 AppSync + WebSocket \u63a5\u7d9a\u7ba1\u7406\u306e\u91cd\u8981\u6027 \u30e1\u30c7\u30a3\u30a2\u7ba1\u7406 S3 + CloudFront CDN\u6d3b\u7528\u306e\u52b9\u679c \u30d7\u30c3\u30b7\u30e5\u901a\u77e5 SNS + Pinpoint \u30e6\u30fc\u30b6\u30fc\u4f53\u9a13\u5411\u4e0a<\/li>\n\n\n\n<li><strong>\u4f01\u696d\u5411\u3051\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u306e\u69cb\u7bc9\u4e8b\u4f8b<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ \u30ab\u30b9\u30bf\u30e0\u30d5\u30c3\u30af\u4f8b: \u30c7\u30fc\u30bf\u540c\u671f\n   const useDataSync = (query, options = {}) =&gt; {\n     const [data, setData] = useState(null);\n     const [loading, setLoading] = useState(true);\n\n     useEffect(() =&gt; {\n       let isSubscribed = true;\n\n       const fetchData = async () =&gt; {\n         try {\n           const result = await API.graphql(graphqlOperation(query));\n           if (isSubscribed) {\n             setData(result.data);\n             setLoading(false);\n           }\n         } catch (error) {\n           console.error('\u30c7\u30fc\u30bf\u53d6\u5f97\u30a8\u30e9\u30fc:', error);\n         }\n       };\n\n       fetchData();\n\n       return () =&gt; {\n         isSubscribed = false;\n       };\n     }, [query]);\n\n     return { data, loading };\n   };<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-17\">\u4ed6\u306eAWS\u30b5\u30fc\u30d3\u30b9\u3068\u306e\u9023\u643a\u306b\u3088\u308b\u6a5f\u80fd\u62e1\u5f35<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u6a5f\u68b0\u5b66\u7fd2\u30b5\u30fc\u30d3\u30b9\u3068\u306e\u9023\u643a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ Amazon Rekognition \u3068\u306e\u9023\u643a\u4f8b\n   import { Predictions } from 'aws-amplify';\n\n   const analyzeImage = async (imageData) =&gt; {\n     try {\n       const result = await Predictions.identify({\n         text: {\n           source: {\n             bytes: imageData\n           },\n           format: \"PLAIN\" \n         }\n       });\n\n       return result.text;\n     } catch (error) {\n       console.error('\u753b\u50cf\u5206\u6790\u30a8\u30e9\u30fc:', error);\n     }\n   };<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u9ad8\u5ea6\u306a\u8a8d\u8a3c\u30b7\u30b9\u30c6\u30e0\u306e\u5b9f\u88c5<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ MFA\u8a8d\u8a3c\u306e\u5b9f\u88c5\u4f8b\n   const setupMFA = async () =&gt; {\n     try {\n       const user = await Auth.currentAuthenticatedUser();\n       const preferredMFA = await Auth.setPreferredMFA(user, 'TOTP');\n\n       if (preferredMFA === 'SUCCESS') {\n         const totpCode = await Auth.setupTOTP(user);\n         \/\/ QR\u30b3\u30fc\u30c9\u306e\u751f\u6210\u3068\u8868\u793a\n         return totpCode;\n       }\n     } catch (error) {\n       console.error('MFA\u8a2d\u5b9a\u30a8\u30e9\u30fc:', error);\n     }\n   };<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-18\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u30c7\u30d0\u30c3\u30b0\u306e\u30c6\u30af\u30cb\u30c3\u30af<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4e00\u822c\u7684\u306a\u554f\u984c\u3068\u89e3\u6c7a\u65b9\u6cd5<\/strong> \u554f\u984c \u539f\u56e0 \u89e3\u6c7a\u65b9\u6cd5 API\u8a8d\u8a3c\u30a8\u30e9\u30fc \u30c8\u30fc\u30af\u30f3\u671f\u9650\u5207\u308c \u518d\u8a8d\u8a3c\u30d7\u30ed\u30bb\u30b9 \u30c7\u30fc\u30bf\u540c\u671f\u5931\u6557 \u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u5207\u65ad \u30aa\u30d5\u30e9\u30a4\u30f3\u5bfe\u5fdc \u30c7\u30d7\u30ed\u30a4\u5931\u6557 \u8a2d\u5b9a\u30df\u30b9 \u74b0\u5883\u5909\u6570\u78ba\u8a8d<\/li>\n\n\n\n<li><strong>\u30c7\u30d0\u30c3\u30b0\u7528\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u306e\u5b9f\u88c5<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ \u30c7\u30d0\u30c3\u30b0\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\n   const DebugUtils = {\n     logApiCall: async (operation, params) =&gt; {\n       console.group(`API Call: ${operation}`);\n       console.log('Parameters:', params);\n       try {\n         const result = await API.graphql(\n           graphqlOperation(operation, params)\n         );\n         console.log('Result:', result);\n         console.groupEnd();\n         return result;\n       } catch (error) {\n         console.error('Error:', error);\n         console.groupEnd();\n         throw error;\n       }\n     },\n\n     checkAuthState: async () =&gt; {\n       try {\n         const user = await Auth.currentAuthenticatedUser();\n         console.log('Current user:', user);\n         return user;\n       } catch (error) {\n         console.log('Not authenticated');\n         return null;\n       }\n     }\n   };<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\n   const PerformanceMonitor = {\n     startTime: null,\n\n     start: () =&gt; {\n       this.startTime = performance.now();\n     },\n\n     end: (operation) =&gt; {\n       const duration = performance.now() - this.startTime;\n       console.log(`${operation} took ${duration}ms`);\n\n       \/\/ CloudWatch\u3078\u30e1\u30c8\u30ea\u30af\u30b9\u9001\u4fe1\n       if (duration &gt; 1000) {\n         logMetric('SlowOperation', {\n           operation,\n           duration,\n           timestamp: new Date().toISOString()\n         });\n       }\n     }\n   };<\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>\u767a\u5c55\u7684\u306a\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ \u30b0\u30ed\u30fc\u30d0\u30eb\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30e9\u30fc\n   class AmplifyErrorHandler {\n     static handle(error) {\n       if (error.errors) {\n         \/\/ GraphQL\u30a8\u30e9\u30fc\u306e\u51e6\u7406\n         error.errors.forEach(err =&gt; {\n           switch (err.errorType) {\n             case 'UnauthorizedException':\n               Auth.signOut();\n               break;\n             case 'ValidationException':\n               notifyUser('\u5165\u529b\u30c7\u30fc\u30bf\u304c\u4e0d\u6b63\u3067\u3059');\n               break;\n             case 'ServiceException':\n               reportToMonitoring(err);\n               break;\n             default:\n               console.error('\u672a\u5206\u985e\u306e\u30a8\u30e9\u30fc:', err);\n           }\n         });\n       } else {\n         \/\/ \u305d\u306e\u4ed6\u306e\u30a8\u30e9\u30fc\u51e6\u7406\n         console.error('\u30b7\u30b9\u30c6\u30e0\u30a8\u30e9\u30fc:', error);\n       }\n     }\n   }<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u4e8b\u4f8b\u3068\u6280\u8853\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001AWS Amplify\u3092\u4f7f\u7528\u3057\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u3092\u3088\u308a\u52b9\u679c\u7684\u306b\u9032\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u3001\u4ed6\u306eAWS\u30b5\u30fc\u30d3\u30b9\u3068\u306e\u9023\u643a\u3084\u9069\u5207\u306a\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u306e\u5b9f\u88c5\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4fe1\u983c\u6027\u3068\u6a5f\u80fd\u6027\u3092\u5927\u304d\u304f\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002\u307e\u305f\u3001\u30c7\u30d0\u30c3\u30b0\u30c4\u30fc\u30eb\u306e\u6574\u5099\u306f\u3001\u958b\u767a\u52b9\u7387\u306e\u5411\u4e0a\u3068\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u8fc5\u901f\u5316\u306b\u8ca2\u732e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-19\">AWS Amplify \u3068\u306f\uff1f\u521d\u5fc3\u8005\u306b\u3082\u308f\u304b\u308b\u57fa\u790e\u89e3\u8aac<\/h2>\n\n\n\n<p>AWS Amplify\u306f\u3001Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3084\u30e2\u30d0\u30a4\u30eb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a\u30fb\u30c7\u30d7\u30ed\u30a4\u3092\u52b9\u7387\u5316\u3059\u308b\u305f\u3081\u306e\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3067\u3059\u3002\u5f8c\u8ff0\u3059\u308b\u74b0\u5883\u69cb\u7bc9\u3084\u904b\u7528\u7ba1\u7406\u306e\u7ae0\u3067\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u3059\u304c\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u8005\u304cAWS\u306e\u5f37\u529b\u306a\u6a5f\u80fd\u3092\u6700\u5c0f\u9650\u306e\u5b66\u7fd2\u30b3\u30b9\u30c8\u3067\u5229\u7528\u3067\u304d\u308b\u3053\u3068\u304c\u7279\u5fb4\u3067\u3059\u3002\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u8005\u304cAWS\u306e\u5f37\u529b\u306a\u6a5f\u80fd\u3092\u7c21\u5358\u306b\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u8a2d\u8a08\u3055\u308c\u3066\u304a\u308a\u3001\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u52b4\u529b\u3092\u6700\u5c0f\u9650\u306b\u6291\u3048\u306a\u304c\u3089\u3001\u672c\u683c\u7684\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-20\">\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d3\u30b9\u306e\u8ab2\u984c\u3092\u89e3\u6c7a\u3059\u308bAWS Amplify\u306e\u7279\u5fb4<\/h3>\n\n\n\n<p>AWS Amplify\u306f\u3001\u5f93\u6765\u306e\u30af\u30e9\u30a6\u30c9\u30b5\u30fc\u30d3\u30b9\u5229\u7528\u306b\u304a\u3051\u308b\u69d8\u3005\u306a\u8ab2\u984c\u3092\u89e3\u6c7a\u3059\u308b\u7279\u5fb4\u3092\u5099\u3048\u3066\u3044\u307e\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u7d71\u5408\u958b\u767a\u74b0\u5883\u306e\u63d0\u4f9b<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CLI\u30c4\u30fc\u30eb\u306b\u3088\u308b\u4e00\u8cab\u3057\u305f\u958b\u767a\u4f53\u9a13<\/li>\n\n\n\n<li>Visual Studio Code\u3084WebIDE\u3068\u306e\u9023\u643a<\/li>\n\n\n\n<li>Git\u30d9\u30fc\u30b9\u306eCI\/CD\u81ea\u52d5\u5316<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u8c4a\u5bcc\u306a\u6a5f\u80fd\u30bb\u30c3\u30c8<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30c7\u30fc\u30bf\u30b9\u30c8\u30a2\uff08DynamoDB\uff09<\/li>\n\n\n\n<li>\u8a8d\u8a3c\uff08Cognito\uff09<\/li>\n\n\n\n<li>API\u306e\u81ea\u52d5\u751f\u6210\uff08AppSync\/API Gateway\uff09<\/li>\n\n\n\n<li>\u30b9\u30c8\u30ec\u30fc\u30b8\u7ba1\u7406\uff08S3\uff09<\/li>\n\n\n\n<li>\u30d7\u30c3\u30b7\u30e5\u901a\u77e5\uff08SNS\uff09<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5ba3\u8a00\u7684\u306a\u8a2d\u5b9a\u30a2\u30d7\u30ed\u30fc\u30c1<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>YAML\u30d9\u30fc\u30b9\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb<\/li>\n\n\n\n<li>\u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\u306e\u30b3\u30fc\u30c9\u5316<\/li>\n\n\n\n<li>\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u3068\u306e\u89aa\u548c\u6027<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-21\">\u5f93\u6765\u306e\u958b\u767a\u624b\u6cd5\u3068\u6bd4\u8f03\u3057\u305fAWS Amplify\u306e\u30e1\u30ea\u30c3\u30c8<\/h3>\n\n\n<div id=\"id-8a3b0209-4b83-4103-9c5c-39bf81cf0724\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u958b\u767a\u30a2\u30b9\u30da\u30af\u30c8<\/th><th>\u5f93\u6765\u306e\u624b\u6cd5<\/th><th>AWS Amplify<\/th><\/tr><\/thead><tbody><tr><td>\u521d\u671f\u8a2d\u5b9a<\/td><td>\u8907\u6570\u30b5\u30fc\u30d3\u30b9\u306e\u500b\u5225\u8a2d\u5b9a\u304c\u5fc5\u8981<\/td><td>CLI\u306b\u3088\u308b\u30ef\u30f3\u30b9\u30c8\u30c3\u30d7\u8a2d\u5b9a<\/td><\/tr><tr><td>\u30a4\u30f3\u30d5\u30e9\u7ba1\u7406<\/td><td>\u624b\u52d5\u8a2d\u5b9a\u3068\u7ba1\u7406\u304c\u5fc5\u8981<\/td><td>\u81ea\u52d5\u30d7\u30ed\u30d3\u30b8\u30e7\u30cb\u30f3\u30b0<\/td><\/tr><tr><td>\u30c7\u30d7\u30ed\u30a4<\/td><td>\u8907\u96d1\u306a\u30c7\u30d7\u30ed\u30a4\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u4f5c\u6210<\/td><td>Git\u9023\u643a\u306b\u3088\u308b\u81ea\u52d5\u30c7\u30d7\u30ed\u30a4<\/td><\/tr><tr><td>\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0<\/td><td>\u624b\u52d5\u3067\u306e\u76e3\u8996\u3068\u8abf\u6574<\/td><td>\u81ea\u52d5\u30b9\u30b1\u30fc\u30ea\u30f3\u30b0\u5bfe\u5fdc<\/td><\/tr><tr><td>\u30b3\u30b9\u30c8<\/td><td>\u521d\u671f\u6295\u8cc7\u304c\u5fc5\u8981<\/td><td>\u5f93\u91cf\u8ab2\u91d1\u5236<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"i-22\">AWS Amplify\u304c\u63d0\u4f9b\u3059\u308b\u4e3b\u8981\u6a5f\u80fd\u3068\u6d3b\u7528\u30b7\u30fc\u30f3<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u652f\u63f4<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React\u3001Angular\u3001Vue\u306a\u3069\u306e\u4e3b\u8981\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u30b5\u30dd\u30fc\u30c8<\/li>\n\n\n\n<li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u306e\u30d7\u30ec\u30d3\u30e5\u30fc\u6a5f\u80fd<\/li>\n\n\n\n<li>\u30d6\u30e9\u30f3\u30c1\u3054\u3068\u306e\u74b0\u5883\u5206\u96e2<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u6a5f\u80fd\u306e\u81ea\u52d5\u751f\u6210<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ GraphQL API\u306e\u5b9a\u7fa9\u4f8b\n   type Todo @model {\n     id: ID!\n     name: String!\n     description: String\n     status: String\n   }<\/pre>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306a\u7c21\u5358\u306a\u5b9a\u7fa9\u304b\u3089\u3001CRUD\u30aa\u30da\u30ec\u30fc\u30b7\u30e7\u30f3\u3092\u5099\u3048\u305fAPI\u304c\u81ea\u52d5\u751f\u6210\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u8a8d\u8a3c\u30fb\u8a8d\u53ef\u306e\u5b9f\u88c5<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ \u8a8d\u8a3c\u6a5f\u80fd\u306e\u5b9f\u88c5\u4f8b\n   import { Auth } from 'aws-amplify';\n\n   async function signUp(username, password, email) {\n     try {\n       await Auth.signUp({\n         username,\n         password,\n         attributes: { email }\n       });\n     } catch (error) {\n       console.log('error signing up:', error);\n     }\n   }<\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>\u5b9f\u8df5\u7684\u306a\u6d3b\u7528\u30b7\u30fc\u30f3<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b9\u30bf\u30fc\u30c8\u30a2\u30c3\u30d7\u306eMVP\u958b\u767a<\/li>\n\n\n\n<li>\u30a8\u30f3\u30bf\u30fc\u30d7\u30e9\u30a4\u30ba\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30e2\u30c0\u30ca\u30a4\u30ba<\/li>\n\n\n\n<li>\u30e2\u30d0\u30a4\u30eb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u69cb\u7bc9<\/li>\n\n\n\n<li>\u30b5\u30fc\u30d0\u30fc\u30ec\u30b9\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u767a<\/li>\n<\/ul>\n\n\n\n<p>AWS Amplify\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u958b\u767a\u8005\u306f\u8907\u96d1\u306a\u30a4\u30f3\u30d5\u30e9\u30b9\u30c8\u30e9\u30af\u30c1\u30e3\u306e\u7ba1\u7406\u304b\u3089\u89e3\u653e\u3055\u308c\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u306b\u96c6\u4e2d\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u8005\u304c\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u69cb\u7bc9\u3059\u308b\u969b\u306e\u969c\u58c1\u3092\u5927\u304d\u304f\u4e0b\u3052\u3001\u958b\u767a\u671f\u9593\u306e\u77ed\u7e2e\u3068\u30b3\u30b9\u30c8\u306e\u6700\u9069\u5316\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-23\">AWS Amplify\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3068\u74b0\u5883\u69cb\u7bc9\u624b\u9806<\/h2>\n\n\n\n<p>\u524d\u7ae0\u3067\u89e3\u8aac\u3057\u305fAWS Amplify\u306e\u57fa\u672c\u6982\u5ff5\u3092\u5b9f\u8df5\u3059\u308b\u305f\u3081\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u306e\u305f\u3081\u306e\u74b0\u5883\u69cb\u7bc9\u624b\u9806\u3092\u3001\u521d\u5fc3\u8005\u306b\u3082\u308f\u304b\u308a\u3084\u3059\u304f\u89e3\u8aac\u3057\u307e\u3059\u3002\u3053\u306e\u7ae0\u3067\u8aac\u660e\u3059\u308b\u8a2d\u5b9a\u306f\u3001\u5f8c\u8ff0\u3059\u308b\u5b9f\u8df5\u7684\u306a\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u69cb\u7bc9\u306e\u57fa\u790e\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-24\">\u5fc5\u8981\u306a\u524d\u63d0\u77e5\u8b58\u3068\u30c4\u30fc\u30eb\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5fc5\u8981\u306a\u524d\u63d0\u77e5\u8b58<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JavaScript\u306e\u57fa\u672c\u7684\u306a\u7406\u89e3<\/li>\n\n\n\n<li>npm\u307e\u305f\u306fyarn\u306e\u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9<\/li>\n\n\n\n<li>Git\u3068GitHub\u306e\u57fa\u672c\u64cd\u4f5c<\/li>\n\n\n\n<li>AWS\u30a2\u30ab\u30a6\u30f3\u30c8\u306e\u4f5c\u6210\u3068\u57fa\u672c\u6982\u5ff5<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u5fc5\u8981\u306a\u30c4\u30fc\u30eb\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # Node.js\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\uff08v14.x\u4ee5\u4e0a\u63a8\u5968\uff09\n   # macOS\u306e\u5834\u5408\n   brew install node\n\n   # AWS CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n   curl \"https:\/\/awscli.amazonaws.com\/AWSCLIV2.pkg\" -o \"AWSCLIV2.pkg\"\n   sudo installer -pkg AWSCLIV2.pkg -target \/\n\n   # Amplify CLI\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n   npm install -g @aws-amplify\/cli<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-25\">AWS Amplify\u306e\u521d\u671f\u8a2d\u5b9a\u3068\u8a8d\u8a3c\u60c5\u5831\u306e\u8a2d\u5b9a<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>AWS\u8a8d\u8a3c\u60c5\u5831\u306e\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # AWS CLI\u306e\u8a2d\u5b9a\n   aws configure\n   # AWS Access Key ID: [YOUR_ACCESS_KEY]\n   # AWS Secret Access Key: [YOUR_SECRET_KEY]\n   # Default region name: ap-northeast-1\n   # Default output format: json\n\n   # Amplify CLI\u306e\u521d\u671f\u5316\n   amplify configure<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u521d\u671f\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # React\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210\u4f8b\n   npx create-react-app my-amplify-app\n   cd my-amplify-app\n\n   # Amplify\u306e\u521d\u671f\u5316\n   amplify init\n   # Project\u540d\u306e\u8a2d\u5b9a\n   # \u74b0\u5883\u540d\u306e\u8a2d\u5b9a\uff08dev\/prod\u7b49\uff09\n   # \u30a8\u30c7\u30a3\u30bf\u306e\u9078\u629e\n   # \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30bf\u30a4\u30d7\u306e\u9078\u629e<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u5fc5\u8981\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # Amplify\u30b3\u30a2\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\n   npm install aws-amplify @aws-amplify\/ui-react\n\n   # \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u3067\u306e\u8a2d\u5b9a\n   import { Amplify } from 'aws-amplify';\n   import awsconfig from '.\/aws-exports';\n   Amplify.configure(awsconfig);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-26\">\u958b\u767a\u74b0\u5883\u3068\u672c\u756a\u74b0\u5883\u306e\u5206\u96e2\u3068\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u74b0\u5883\u306e\u5206\u96e2<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   # \u958b\u767a\u74b0\u5883\u306e\u4f5c\u6210\n   amplify env add dev\n\n   # \u672c\u756a\u74b0\u5883\u306e\u4f5c\u6210\n   amplify env add prod\n\n   # \u74b0\u5883\u306e\u5207\u308a\u66ff\u3048\n   amplify env checkout prod<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u74b0\u5883\u5225\u306e\u8a2d\u5b9a\u7ba1\u7406<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ config\/aws-exports.js\n   const awsconfig = {\n     \/\/ \u5171\u901a\u8a2d\u5b9a\n     Auth: {\n       region: 'ap-northeast-1',\n       userPoolId: process.env.REACT_APP_USER_POOL_ID,\n       userPoolWebClientId: process.env.REACT_APP_CLIENT_ID\n     },\n     \/\/ \u74b0\u5883\u5225\u8a2d\u5b9a\n     API: {\n       endpoints: [\n         {\n           name: 'api',\n           endpoint: process.env.REACT_APP_API_ENDPOINT\n         }\n       ]\n     }\n   };<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/strong> \u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u9805\u76ee \u63a8\u5968\u8a2d\u5b9a \u7406\u7531 \u74b0\u5883\u5909\u6570 .env.local\u3067\u7ba1\u7406 \u6a5f\u5bc6\u60c5\u5831\u306e\u4fdd\u8b77 API Key \u74b0\u5883\u5909\u6570\u3067\u7ba1\u7406 \u30bb\u30ad\u30e5\u30a2\u306a\u5024\u306e\u7ba1\u7406 \u8a8d\u8a3c\u60c5\u5831 Cognito\u306e\u4f7f\u7528 \u5b89\u5168\u306a\u8a8d\u8a3c\u7ba1\u7406 \u30d6\u30e9\u30f3\u30c1\u4fdd\u8b77 main\u30d6\u30e9\u30f3\u30c1\u306e\u4fdd\u8b77 \u8aa4\u3063\u305f\u30c7\u30d7\u30ed\u30a4\u306e\u9632\u6b62<\/li>\n\n\n\n<li><strong>\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d6\u30e9\u30f3\u30c1\u30d9\u30fc\u30b9\u306e\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u6226\u7565<\/li>\n\n\n\n<li>\u81ea\u52d5\u30c6\u30b9\u30c8\u306e\u5c0e\u5165<\/li>\n\n\n\n<li>\u6bb5\u968e\u7684\u306a\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\uff08dev \u2192 staging \u2192 prod\uff09<\/li>\n\n\n\n<li>\u30ed\u30fc\u30eb\u30d0\u30c3\u30af\u624b\u9806\u306e\u6e96\u5099<\/li>\n<\/ul>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u76e3\u8996\u3068\u30ed\u30ae\u30f3\u30b0<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ \u30ed\u30b0\u8a2d\u5b9a\u4f8b\n   Amplify.Logger.LOG_LEVEL = 'DEBUG'; \/\/ INFO, WARN, ERROR\n\n   \/\/ \u30ab\u30b9\u30bf\u30e0\u30ed\u30b0\u306e\u5b9f\u88c5\n   const logger = new Amplify.Logger('MyApp');\n   logger.info('\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u8d77\u52d5');\n   logger.debug('\u30c7\u30d0\u30c3\u30b0\u60c5\u5831');\n   logger.warn('\u8b66\u544a\u30e1\u30c3\u30bb\u30fc\u30b8');<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u8a2d\u5b9a\u3068\u624b\u9806\u3092\u9069\u5207\u306b\u5b9f\u65bd\u3059\u308b\u3053\u3068\u3067\u3001\u5805\u7262\u3067\u7ba1\u7406\u3057\u3084\u3059\u3044\u958b\u767a\u74b0\u5883\u3092\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u7279\u306b\u3001\u74b0\u5883\u306e\u5206\u96e2\u3068\u9069\u5207\u306a\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u8a2d\u5b9a\u306f\u3001\u672c\u756a\u74b0\u5883\u3067\u306e\u5b89\u5b9a\u3057\u305f\u904b\u7528\u306e\u305f\u3081\u306b\u91cd\u8981\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Warning: Undefined array key &#8220;is_admin&#8221; in \/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/ &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":{"0":"post-2230","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-aws","7":"nothumb"},"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2230"}],"version-history":[{"count":1,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2230\/revisions"}],"predecessor-version":[{"id":2231,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/2230\/revisions\/2231"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}