Help us understand the problem. What is going on with this article?

AWSを活用したサーバーレスWebアプリの制作

AWSを活用したサーバーレスWebアプリの制作

イントロダクション

こんにちは。2or3(ツカサ)です。1982年生まれの37歳。
静岡県浜松市の中小IT企業に勤めるアプリケーションエンジニアです。
2005年頃から働いているので、2019年現在、職歴14年ということになります。

2019年6月頃から勉強会コミュニティ(主にJAWS UG 浜松 / 磐田)に参加するようになり、そこでアウトプットするために『Mosaic』というAWSを活用したサーバーレスWebアプリを勉強しながら制作しました。
https://mosaic.w2or3w.com

制作期間は2019年9月末〜2019年12月頭の約3ヶ月。
2019年12月7日(土)に『浜松IT合同勉強会2019 LT大会』なるものに参加し、そこでこのWebアプリとともに初LTを経験。

作りっぱなしは良くないということで、振り返りと定着のためにハンズオン的な記事としてまとめようと思い立ち、初めてのQiita投稿をと、この記事の下書きを書き始めたのが2019年12月中頃です。

以下のようにいくつかの記事に分けて投稿を予定しています。

コンテンツ

  • サーバーレスWebアプリを開発するためのCloud9環境構築
    Cloud9で開発してまして、なので、その環境構築からはじめます。
    VueのWebアプリ、Lambda用のPython(3.6)、などを開発・ビルドできるようにします。

  • Vue CLIで新規プロジェクト作成と、よくある雛形の実装
    Vue CLI 3でSPA(シングルページアプリケーション)の雛形を新規作成します。
    UI用のフレームワークとして、マテリアルデザインのVuetifyを利用。
    ヘッダー、フッター、いくつかのページへのルーティング、ハンバーガーメニューなどを実装します。

  • Vue Routerのヒストリーモードとリダイレクトの話 (T.B.D.)
    Vue Routerを利用するとURLに #(ハッシュ) が付くのですが、なんだか気持ち悪いですよね。
    そこで、#が付かないようにするための手段としてヒストリーモードというものがあるのですが、色々と検討した結果、ワタシはヒストリーモードを諦めました。#を受け入れともに歩んでゆくことにした、そのワケとは。

  • AWS Amplifyのセットアップ
    開発環境にAWS Amplify CLIをインストールして、AWS Amplifyをセットアップします。

  • AWS Amplifyを利用してS3へファイルアップロードとLambda呼び出し
    VueのプロジェクトへAWS Amplify CLIでStorageとそれをトリガーとするFunctionをセットアップします。
    WebアプリからS3にファイルをアップロードしてそれをトリガーにLambdaが動く仕組みをAmplifyでサクッと構築します。

  • AWS Amplify Consoleでビルド&デプロイ
    VueのプロジェクトをAWS Amplify Consoleにより、プロビジョン→ビルド→デプロイ→検証します。
    指定のリポジトリ&ブランチに対するコミットをトリガーにデプロイが走り、また、amplifyapp.comドメインにホストしてくれます。

  • S3への静的サイトホスティングとAmplify Consoleによるデプロイ比較
    Amplify Consoleの楽さをより実感するために、あえてS3にもデプロイして静的サイトとしてホストします。
    静的サイトといえど、Webアプリのとして動作します。

  • Lambda + OpenCVで画像処理 (グレー画像作成)
    S3への画像アップロードをトリガーに、その画像に対して画像処理をさせるLambdaのファンクションをPython3.6で実装します。
    画像処理にはOpenCVを利用します。

  • AppSyncをフロントエンドとバックエンドで利用する
    アップロードした画像や処理された画像のデータ管理や、クライアント側とのデータ受け渡しのために、AppSyncというAPIを利用します。AppSyncのデータソースにはDynamoDBが使われます。
    AppSyncはAmplify CLIでもセットアップ可能なのですが、DynanoDBのパーティションキーやソートキーの指定ができないようだったので、Amplify CLIは使いません。AWSコンソールでDynamoDBとAppSyncを構築します。
    フロントエンドのVueからはAmplifyを利用してSubscription、バックエンドのLambda(Python)からはHTTPでリクエストします。

  • Lambda(Python) + OpenCV で顔検出 (T.B.D.)

  • Lambda(Python) + Rekognition で顔検出
    顔検出を実現する手段としてOpenCVが最初に思い立つ古い人間なのですが、OpenCVで納得いく検出をさせようと思うとなかなかしんどいんです。で、このAWS Rekognitionを利用してみたのですが感動しました。角度や回転に影響されず、高精度、そして早い!

  • API Gatewayでリクエストして、Lambdaで処理させて、AppSyncで受け取る (T.B.D.)

  • Floating Action Button でスクロール制御
    最近のアプリで良く見かける、ずっと定位置にあるあのボタン。
    最近のアプリで良く見かける、するする〜っとなめらか〜にスクロールするあの機能。
    それらをVueのWebアプリに実装します。

  • Lambda(Python)でGoogle Driveへファイルアップロード
    S3ってファイルを保存するだけならいいのですが、そのファイルを人が参照するのには向いてないですよね。画像にしてもWebブラウザ上でそのまま見ることができず、一度ダウンロードしてから見る必要がある。ちょっと手間なんですよね。
    その点、Google DriveはPCにしろスマホにしろ、ブラウザやアプリでいい感じに画像を参照することができますのでいい感じです。

  • S3ファイルやDynamoDBレコードの自動削除
    S3やDynamoDBって、もちろん長期的に保存したい用途に利用することもありますが、一時的なデータ保存場所として利用するケースも多いですよね。ワタシのMosaicなんかも、30分くらいで消えてしまって何ら問題ありません。
    そんな時は自動的に削除される仕組みがありますので、それを利用しましょう。

  • WebアプリのPWA対応とキャッシュ問題の解決 (T.B.D.)

  • お名前.comで取得した独自ドメインのサブドメインをAmplify Consoleで割り当てる
    Amplify Consoleを利用すれば、amplifyapp.comのサブドメインでサイトを公開することは簡単にできました。このままでも問題ないのですが、いつかは自分のドメインを取ってそこで公開したいですよね。
    ここでは、「お名前.com」でドメインを取得し、そのサブドメインをAWSでホストするサイトに割り当てる、という事をしたいと思います。

あとがき

2019年は、勉強会に参加してみるという行動がそれなりに大きな変化やさらなる行動に繋がったと思ってます。

Qiitaへのこの初投稿も、JAWS UG 浜松のボスが息をするように自然にAmplifyのアドベントカレンダーへ参加してるのを見たり、勉強会に参加する皆さんのLT、AWSのコミュニティプログラムマネージャやエバンジェリストの方が発信しているのを直接見る機会があったことが大きいです。

2020年も引き続き、アプリ開発とサービス運用を通じてインプットしつつ、勉強会、LT、記事投稿、などでアウトプットしていこうと思ってます。
今後ともよろしくお願いします。


Qiita初めてなもので、もしお気付きの点などがあればご指摘をいただけると幸いです。
ご感想やご要望、各種SNSのフォロー、大歓迎です。


  • 2019/12/31 : 7記事 / 17記事
    年内に10記事くらいいけるかなぁと思ってたけど、残念ながら7記事でタイムアップ。
    なかなか大変ですね、書くの。慣れない。時間かかる。
    年始の連休中にもう5記事くらい書き足したいが、果たして、、。

  • 2020/1/3 : 8記事 / 17記事
    「AppSyncをフロントエンドとバックエンドで利用する」を投稿しました。
    内容が少し多くなりすぎてしまったかなと感じるのと、ちょっと雑な感じになってしまった気もする。
    技術記事を書くって大変ですね、なかなか慣れなさそうです。

  • 2020/1/5(朝) : 9記事 / 17記事
    「Lambda(Python) + Rekognition で顔検出」を投稿しました。
    OpenCVで顔検出をついつい飛ばしてしまいました。
    年始の連休中にもう5記事くらいと書きましたが達成できそうにありませんね。
    あぁ、明日から仕事かぁ、もう1週間くらい休みたい!

  • 2020/1/5(夜) : 10記事 / 17記事
    「Floating Action Button でスクロール制御」を投稿しました。
    一番時間がかからなそうな記事を選びました。さて明日は久しぶりのお仕事です。おやすみなさい!

  • 2020/1/8(夜) : 11記事 / 17記事
    「Lambda(Python)でGoogle Driveへファイルアップロード」を投稿しました。
    あと6記事、なかなか先は長いですね。飽きてきたわけではないですが、早くMosaicのリファクタリングや機能追加を再開したい欲がムラムラと、、。
    飽きたわけではないですよ。

  • 2020/1/12(夜) : 12記事 / 17記事
    「S3ファイルやDynamoDBレコードの自動削除」を投稿しました。
    嫁がインフルになりまして。この3連休は毎年大学時代の友人と雪山合宿を恒例行事としてて14年続けているのですがついに穴を開ける日が来てしまいました。ツライ。
    そうこうしているうちに、娘(4)もインフルになりまして。初めて夜間救急を利用しました。かなり混んでるんですね、あそこ。
    家事・育児・看病・買出し、、などやることは比較的多いのですが、それ以外にやることもなく暇という状況の中書き上げた思い出に残る記事です。しかしS3のライフサイクルルールよろしく、DynamoDBのTimeToLiveよろしく、そのうち忘れてしまうのでしょう。
    夜間救急のくだりは、いつか結婚式とかで思い出して涙するやつかもしれないですね!

  • 2020/1/18(昼) : 13記事 / 17記事
    「お名前.comで取得した独自ドメインのサブドメインをAmplify Consoleで割り当てる」を投稿しました。
    あとがきの自分語りが長くなりました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away