Edited at

Vue + AWS Amplifyでシンプルな画像共有アプリを作成する (概要) #1


今回のテーマ

Amplify Frameworkってのを使うと開発からデプロイまでめちゃくちゃ便利だよーってのを伝えたいのと、そのやり方について軽く通しながら説明出来たらなーって思っています。

大まかには以下のような感じです


  • Vue.jsでフロントエンド開発が出来るようになる

  • Amplifyを用いた開発が出来るようになる

  • 設計からデプロイまでの流れを理解する

あまり細かくは突っ込まない(予定)なのでそこはご了承ください。


今回作成するもの

instagramの機能を最大限まで削り取ったようなシンプルな画像共有アプリ(PWA)です。

手軽に作れるようになるべく単純にしました。

それでいて色々な技術的要素を求められるので丁度いいかなと。

instagram-logo-2-e1541140710741.png

仕様としては以下を想定しています。


  • ユーザー登録&ログインが出来る

  • 画像を投稿・削除出来る

  • 投稿にいいねが付けられる

  • タイムラインに最新の10件が表示される

  • マイページに自分の投稿一覧が表示される


構成図

スクリーンショット 2019-07-15 20.51.24.png


キーワード


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


終わりに

記事のペースは週2くらいになると思われます。

あまり期待せずに待ってもらえると嬉しいです。

次 → Vue + AWS Amplifyでシンプルな画像共有アプリを作成する (作成〜デプロイ) #2