BETA

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

投稿日:2020-01-01
最終更新:2020-01-01

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を利用します。

  • AmplifyのAPI(AppSync)で条件付きSubscription (T.B.D.)
    パーティションキーやソートキーの指定ができないようだったので、Amplify CLIは使いません。
    AWSのコンソールでDynamoDBとAppSyncを構築し、それをAmplifyを利用して呼び出します。

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

  • Lambda(Python) + Recognition で顔検出 (T.B.D.)
  • API Gatewayでリクエストして、Lambdaで処理させて、AppSyncで受け取る (T.B.D.)
  • Floating Action Button でスクロール制御 (T.B.D.)
  • Lambda(Python)でGoogle Driveへファイルアップロード (T.B.D.)
  • S3ファイルやDynamoDBレコードの自動削除 (T.B.D.)
  • WebアプリのPWA対応とキャッシュ問題の解決 (T.B.D.)
  • 独自ドメインの取得とサブドメインの設定そしてAmplify Consoleでドメイン管理 (T.B.D.)

あとがき

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

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

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


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


  • 2019/12/31 : 7記事 / 17記事
    年内に10記事くらいいけるかなぁと思ってたけど、残念ながら7記事でタイムアップ。
    なかなか大変ですね、書くの。慣れない。時間かかる。
    年始の連休中にもう5記事くらい書き足したいが、果たして、、。
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@w2or3w の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう