初Amplifyデプロイした話.pdf

Transcript

1. 初Amplifyデプロイした話
   @eulede (kuroyanagi)
   JAWS-UG浜松 AWS勉強会 2021#11 (2021/11/26)
   

   View Slide

2. Kuroyanagi Hitoshi
   @euledge
   https://github.com/euledge
   黒 柳 仁
   自己紹介
   

   View Slide

3. 袋井市のオープンデータ活用事例
   Alexaスキル「ゴミ出しふくろい」
   を掲載していただきました。
   浜松市のコロナ対策サイト
   お手伝いをさせていただきました。
   

   View Slide

4. そろそろオープンデータ
   使った第２弾作りたいなぁ
   

   View Slide

5. 写真 : 読売新聞オンライン (yomiuri.co.jp) 総裁選４氏、演説で強調したキーワードを可視化 -
   産経ニュース (sankei.com)
   なんか最近よくみるあれ
   

   View Slide

6. http://www.city.fukuroi.shizuoka.dbsr.jp/index.php/
   自分の街にもこんなのあった
   

   View Slide

7. なんか紐づけできてそう
   

   View Slide

8. 今回の構成
   

   View Slide

9. PythonでスクレイピングしてDynamoDBに格納
   

   View Slide

10. DynamoDBテーブル定義
    • Meeting（会議）
    • Speaker (発言者)
    • Comment (発言内容 単語のみ)
    Meeting Comment Speaker
    1..n n..1
    

    View Slide

11. 発言のクレンジング
    • 議長の発言は議事進行のためのも
    のだから議事内容には触れない
    • 記号は不要
    • 普通名詞と一般名詞のみ
    （人名など固有名詞は不要）
    • 頻出しがちな単語を辞書にして削
    除(Stopword)
    

    View Slide

12. 一般的なストップワードに加えて作成された
    ワードクラウド見ながら追加していく
    あそこ
    あたり
    あちら
    あっち
    あと
    あな
    あなた
    あれ
    いくつ
    いつ
    いま
    いや
    いろいろ
    うち
    おおまか
    おまえ
    おれ
    がい
    かく
    かたち
    かやの
    から
    がら
    きた
    くせ
    ここ
    こっち
    こと
    ごと
    こちら
    ごっちゃ
    これ
    これら
    ごろ
    さまざま
    さらい
    さん
    しかた
    上
    中
    下
    字
    年
    月
    日
    時
    分
    秒
    週
    火
    水
    木
    金
    土
    国
    都
    道
    府
    県
    市
    区
    町
    村
    市議会
    議会
    議長
    議案
    午前
    午後
    令和
    休憩
    本会議
    再開
    委員会
    委員長
    委員
    本日
    明日
    昨日
    承認
    異議
    号
    本文
    質疑
    年度
    昨年度
    来年度
    事務局
    採決
    質問
    答弁
    なし
    本件
    条例
    受理
    今後
    現在
    今
    一般
    審議
    概要
    只今
    先日
    開催
    会議
    物
    今迄
    今日
    皆
    定例会
    余
    額
    ただいま
    先ほど
    とも
    

    View Slide

13. • PythonでGraphQL叩く
    • 表示しているAPI-Key
    Endpointは Amplify mock
    

    View Slide

14. https://councilcloud.euledge.com/
    デモ
    

    View Slide

15. 今回の制作ではまったところ
    • Vue3+Viteでやろうと思ったらAmplifyのライブラリでコンパイルエラー
    Vue3でもViteでなければできるかも
    • カスタムドメインで公開しようと思ったらなかなか反映されない
    ドメインレジストラの設定がRoute53のDNS使ってなかった。
    • うまくいかない場合はamplify init を何度もやり直す
    得た知見
    • 分からない時は JAWS-UG浜松 slackに投げてみる 🙏🙏🙏🙏
    • 検索すると結構な確率で知人に出会う
    お名前.comで取得した独自ドメインのサブドメインをAmplify Consoleで割り当てる – Qiita
    AppSyncをフロントエンドとバックエンドで利用する - Qiita
    • Nuxtでコンポネントのページをリロードするとエラー
    SPAちゃんと理解してなかった。AmplifyConsoleの謎設定
    「書き換えて、リダイレクト」で解決
    

    View Slide

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
    成果物
    

    View Slide

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)
    

    View Slide