AWS Amplifyに入門して個人開発への意欲を上げてみる

あつまれ！個人開発を始めたい人！【経験者も大歓迎】
2023.03.18(土)登壇

各URL
Amplify SNS ハンズオン
https://amplify-sns.workshop.aws/ja/
Amplify Tutorial（React）
https://docs.amplify.aws/start/q/integration/react/
public-apis Github
https://github.com/public-apis/public-apis
Amplify UI Components
https://ui.docs.amplify.aws/

Transcript

1. AWS Amplifyに入門して
   個人開発への意欲をあげてみる
   2023.03.18
   あつまれ！個人開発を始めたい人！ Presented by ROM専
   

   View Slide

2. 自己紹介します
   ROM専 です
   でフロントエンド をやっています
   さまざまなイベントや勉強会に出没しています
   最近オフラインのイベントが増えてきて嬉しい
   

   View Slide

3. View Slide

4. WEB、iOS、Android、Flutter、ReactNativeアプリの構築やデプロイ、ホ
   スティングなどを提供する、フルスタック開発フレームワーク
   各AWSサービスへのアクセスが容易で、高速かつスケーラブルなアプリ
   ケーションを比較的簡単に作成することが可能
   AWS Amplify とは？
   

   View Slide

5. Amplify Libraries
   認証、ストレージ、API、プッシュ通知、分析などのAWSサービスへ
   のアクセスを容易にするライブラリを提供
   Amplify Console
   GitHub、GitLab、Bitbucket、またはAWS CodeCommitリポジトリに
   コードをプッシュするだけで、アプリケーションをビルドしてデプロ
   イでき、また、Amazon S3とAmazon CloudFrontを使用してアプリを
   グローバルに配信することもできる
   AWS Amplify とは？
   and more...
   

   View Slide

6. 入門する
   

   View Slide

7. 入門の前に
   チュートリアルやハンズオンに必要なバージョンの
   Node.js、npmをインストールしておく
   （ハンズオンによってはOpenJDKも必要になるかも）
   https://amplify-sns.workshop.aws/ja/
   もちろんAWSアカウントもお忘れなく！
   

   View Slide

8. 入門！
   $ npm install @aws-amplify/cli
   $ amplify -v
   https://docs.amplify.aws/start/q/integration/react/
   

   View Slide

9. 入門！
   $ amplify configure
   ブラウザが起動して、AWSにサインインを求められる
   ターミナルでリージョンを選択すると、自動的にブラウザに戻
   ってAmplify用のユーザー作成画面が表示されているので、
   あとはチュートリアルの指示通りに進めていく
   

   View Slide

10. 入門！
    

    View Slide

11. 入門！
    $ npx create-app-react xxx
    まずは、アプリケーション基盤作成
    

    View Slide

12. 入門！
    $ amplify init
    Amplifyの設定：バックエンドサービスを作成
    対話式で設定を進めていく
    

    View Slide

13. 入門！
    

    View Slide

14. 入門！
    $ npm install aws-amplify
    src/index.js
    import { Amplify } from 'aws-amplify';
    import awsExports from './aws-exports';
    Amplify.configure(awsExports);
    

    View Slide

15. Amplifyの設定完了！
    体感10分くらいで
    フロントエンド とバックエンドの設定が済んだ
    アプリケーション基盤を構築できた…！
    

    View Slide

16. View Slide

17. × public-api でアイデア∞？
    https://github.com/public-apis/public-apis
    自分用
    アニメデータベース
    クロスSNS
    管理ツール
    ペットの
    生活管理
    ランチ検索
    

    View Slide

18. おまけ
    

    View Slide

19. Amplify UI Components がすごい
    https://ui.docs.amplify.aws/
    

    View Slide

20. AWS Amplifyのシンプルさと拡張性をUI開発に取り入れたオープンソース
    のUIライブラリ
    認証や動的データなどの複雑なワークフローを簡素化する接続コンポー
    ネント、UIの構成要素を形成するプリミティブコンポーネント、そして
    Amplify UIをあらゆるブランドに適合させるテーマで構成されている
    Amplify UI Components とは？
    

    View Slide

21. https://ui.docs.amplify.aws/react/components
    UI Library > Conponents
    

    View Slide

22. https://ui.docs.amplify.aws/react/components
    UI Library > Conponents
    

    View Slide

23. 交流タイムでみなさんと
    お話しできるのを
    楽しみにしています…！
    ご清聴ありがとうございました！
    

    View Slide