VueとServerless Frameworkで本番向けアプリのフレームワークを公開しました

こんにちは。てぃろです。

これまでの自分のサーバーレス開発のノウハウを詰め込んで、開発から運用までを見据えたアプリのベースとなるようなフレームワークを作りました。

主な技術要素はVue.jsとServerless Frameworkです。

デプロイしてあるので、以下のURLからアプリそのものを触ってもらえます。

https://vueslsapp.thiroyoshi.com/

ソースはGithubで公開しています。以下からどうぞ。

本番で使えるサーバーレスアーキテクチャのフレームワークを作りたかった

動機は一言でいうと、これに尽きます。

これまで仕事でサーバーレスアーキテクチャでアプリの開発をしてきて、自分の中にノウハウがいろいろ溜まっている実感はありました。

ハッカソンに出たり、自分でアプリ作るのも好きなんですが、時間が潤沢にあるわけではないので、もっと生産性高くアプリを作れるようにならないか、とも考えていました。

そんなときに、長期海外出張でまとまった時間が取れる機会があったので、それを使って、主に今後の自分のためにこれを作ってみました。

でも、せっかくだから、公開していろいろな人に見たり使ってもらってもいいんじゃないかと思って、まずは公開してみました。

特徴は、認証も作りこんだ全部入り

動機でも書いた通り、本番で使えることと生産性を高めることを意識しているので、認証周り含めて全部入りを目指しています。

あえて、特徴として挙げるとしたら、以下になります。

  • APIのコーディングを簡素化する独自フレームワーク
  • AWSとServerless Framework を使った完全サーバーレス構成認証周りが一通りできる
    • サインアップ、ログイン、ログアウト、パスワード変更、退会
  • 認証付きREST API
    • GET、POST、PUT、DELETE

認証については、Cognitoを使用しています。
そのためCognitoを使った、上記のような認証周りの処理が可能な形です。

AWS LambdaにおけるREST APIとしての書き方にノウハウがあります。
そのため、ここの共通化として独自にフレームワークとして作りました。

Serverless Frameworkについては、ちょっとは使い込んだつもりなので、ファイル分割の仕方、開発・本番での環境の分け方など一番ノウハウが詰まっているところかもしれません。

特に、最近追加されたServerless Dashboardを前提とした使い方はまだ世間的にもノウハウが少な目かもしれないので参考にしてもらえると思います。

使用技術

  • Vue.js(Front App)
  • Serverless Framework(Infrastructure as Code)
  • Python(REST API, back-end)
  • AWS(Amazon Web Service)

これは、自分の得意技術に大いに関わっていますが、Vue.jsもPythonも別の言語で代替は可能です。

使い方の解説記事を書いていきます

いくらか自分のノウハウを詰め込んでいるので、これらについて解説記事を書いていきたいと思っています。

まずはデプロイする方法について書く予定です。
いろいろ詰め込んだ結果、一つ一つは簡単ですが、手順自体が長いので、別記事で解説します。

ずっと修正し続けるつもりです

まだまだノウハウを詰め込めてなかったり、今後の開発経験の中で得たものをどんどん取り込んでアップデートしていく予定です。

出張期間中にまず公開するところまでやりたかったので、単体テストを仕込んでなかったり、リファクタリングが十分でなかったり、雑な部分も多々あるので、それもやっていきます。

当然、ソースを修正したら解説記事も修正していく予定です。
現状で見込んでいる主な追加・修正内容は以下です。乞うご期待。

今後は関連記事をVueSlsAppのカテゴリとして追加しますのでチェックしてみてください。