初Amplifyデプロイした話.pdf

Transcript

1. 初Amplifyデプロイした話 @eulede (kuroyanagi) JAWS-UG浜松 AWS勉強会 2021#11 (2021/11/26)
2. Kuroyanagi Hitoshi @euledge https://github.com/euledge 黒 柳 仁 自己紹介
3. 袋井市のオープンデータ活用事例 Alexaスキル「ゴミ出しふくろい」 を掲載していただきました。 浜松市のコロナ対策サイト お手伝いをさせていただきました。
4. そろそろオープンデータ 使った第２弾作りたいなぁ
5. 写真 : 読売新聞オンライン (yomiuri.co.jp) 総裁選４氏、演説で強調したキーワードを可視化 - 産経ニュース (sankei.com) なんか最近よくみるあれ
6. http://www.city.fukuroi.shizuoka.dbsr.jp/index.php/ 自分の街にもこんなのあった
7. なんか紐づけできてそう
8. 今回の構成
9. PythonでスクレイピングしてDynamoDBに格納
10. DynamoDBテーブル定義 • Meeting（会議） • Speaker (発言者) • Comment (発言内容 単語のみ) Meeting Comment Speaker 1..n n..1
11. 発言のクレンジング • 議長の発言は議事進行のためのも のだから議事内容には触れない • 記号は不要 • 普通名詞と一般名詞のみ （人名など固有名詞は不要） • 頻出しがちな単語を辞書にして削 除(Stopword)
12. 一般的なストップワードに加えて作成された ワードクラウド見ながら追加していく あそこ あたり あちら あっち あと あな あなた あれ いくつ いつ いま いや いろいろ うち おおまか おまえ おれ がい かく かたち かやの から がら きた くせ ここ こっち こと ごと こちら ごっちゃ これ これら ごろ さまざま さらい さん しかた 上 中 下 字 年 月 日 時 分 秒 週 火 水 木 金 土 国 都 道 府 県 市 区 町 村 市議会 議会 議長 議案 午前 午後 令和 休憩 本会議 再開 委員会 委員長 委員 本日 明日 昨日 承認 異議 号 本文 質疑 年度 昨年度 来年度 事務局 採決 質問 答弁 なし 本件 条例 受理 今後 現在 今 一般 審議 概要 只今 先日 開催 会議 物 今迄 今日 皆 定例会 余 額 ただいま 先ほど とも
13. • PythonでGraphQL叩く • 表示しているAPI-Key Endpointは Amplify mock
14. https://councilcloud.euledge.com/ デモ
15. 今回の制作ではまったところ • Vue3+Viteでやろうと思ったらAmplifyのライブラリでコンパイルエラー Vue3でもViteでなければできるかも • カスタムドメインで公開しようと思ったらなかなか反映されない ドメインレジストラの設定がRoute53のDNS使ってなかった。 • うまくいかない場合はamplify init を何度もやり直す 得た知見 • 分からない時は JAWS-UG浜松 slackに投げてみる 🙏🙏🙏🙏 • 検索すると結構な確率で知人に出会う お名前.comで取得した独自ドメインのサブドメインをAmplify Consoleで割り当てる – Qiita AppSyncをフロントエンドとバックエンドで利用する - Qiita • Nuxtでコンポネントのページをリロードするとエラー SPAちゃんと理解してなかった。AmplifyConsoleの謎設定 「書き換えて、リダイレクト」で解決
16. 今回使用した技術スタック Python フロントエンド https://github.com/euledge/council-cloud • スクレイピング BeautifulSoup4 https://www.crummy.com/software/BeautifulSoup/ • 日本語形態素解析器 SudachiPy https://github.com/WorksApplications/SudachiPy • GraphQLクライアント gql https://github.com/graphql-python/gql • Vue.js + Nuxt + Vuetify • VueWordCloud https://github.com/SeregPie/VueWordCloud 成果物
17. 今回参考にした記事 • Amplifyで構築したAppSyncへPythonで接続する | DevelopersIO (classmethod.jp) • AppSyncをフロントエンドとバックエンドで利用する – Qiita • AWS Amplify & Nuxt 使って爆速でWebアプリ作る - Qiita • お名前.comで取得した独自ドメインのサブドメインをAmplify Consoleで割り当てる – Qiita • Amplify Console でデプロイした SPA が403エラーになった原因と対策 - サーバーワークス エンジニアブログ (serverworks.co.jp)