今回のテーマ
Amplify Frameworkってのを使うと開発からデプロイまでめちゃくちゃ便利だよーってのを伝えたいのと、そのやり方について軽く通しながら説明出来たらなーって思っています。
大まかには以下のような感じです
- Vue.jsでフロントエンド開発が出来るようになる
- Amplifyを用いた開発が出来るようになる
- 設計からデプロイまでの流れを理解する
あまり細かくは突っ込まない（予定）なのでそこはご了承ください。
今回作成するもの
instagramの機能を最大限まで削り取ったようなシンプルな画像共有アプリ(PWA)です。
手軽に作れるようになるべく単純にしました。
それでいて色々な技術的要素を求められるので丁度いいかなと。
仕様としては以下を想定しています。
- ユーザー登録＆ログインが出来る
- 画像を投稿・削除出来る
- 投稿にいいねが付けられる
- タイムラインに最新の１０件が表示される
- マイページに自分の投稿一覧が表示される
構成図
キーワード
Vue.js
クライアントサイドのJavaScriptフレームワーク
Vue.js
PWA
Progressive Web Applicationの略称
モバイルユーザーのUX向上を目的とした、WEBページ／WEBアプリケーションとネイティブアプリの利点を兼ね備えている
Qiita: PWAに興味を持っている人向けに概要とか動向とかをまとめた
Amplify Framework
アプリケーションと統合するための一連のライブラリ、UI コンポーネント、コマンドラインインターフェイスを提供している
Amplify Consoleを用いることでCI/CDからCDNまで利用可能
Amplify フレームワーク（スケールするアプリを最速で構築する方法をご提供
Amazon Cognito
AWSが提供する認証・認可基盤
ユーザー認証やAPI実行の管理を行う
Amazon Cognito（ウェブ/モバイルアプリのユーザー管理）| AWS
DynamoDB
フルマネージドNoSQL、スキーマレスなデータベースサービス
Amazon DynamoDB（マネージド NoSQL データベース）| AWS
S3
Simple Storage Serviceの略称、クラウド型ストレージ
Amazon S3（拡張性と耐久性を兼ね揃えたクラウドストレージ）｜AWS
GraphQL
RESTfulなAPIの課題を解決するために開発されたクエリ言語
単一エンドポイントや型付けなどの特徴がある
Introduction to GraphQL
AppSync
フルマネージドGraphQLサービス
これとGraphQLでBFFみたいなことが出来る
AWS AppSync（アプリデータをリアルタイムで保存、同期）| AWS
Sketch
UIデザインツール
これを使ってプロトタイピングが出来る
The best products start with Sketch
終わりに
記事のペースは週２くらいになると思われます。
あまり期待せずに待ってもらえると嬉しいです。