Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

ROM1000

March 18, 2023
Tweet

More Decks by ROM1000

Other Decks in Programming

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