個人開発で使用した技術やサービスについてまとめ
個人で開発していたスマホアプリを先日ストアで公開しました。
アニソン好きな方はぜひプレイしてみてください。
この記事ではアプリを開発する上で使用した技術や外部サービスについて書きます。何かしら参考になれば幸いです。
赤字サービスなので、出来るだけケチって月20$くらいに収めました。所々妥協すればもうちょっと安くなると思います。
ケチりつつも何かあった時にすぐ対応できるようにエラー検知できるようにしたり、サービスの利用状況を分析できるようにはしています。
システムの概要は以下のようになっています。 スマホアプリとAPIサーバー、Redashサーバー、DB、管理画面用のSPAを動かしています。
サーバーサイド関連
Rails + GraphQL
Railsは使い慣れているのと、GraphQLは使ってみたかったから使いました。
興味のある技術をエイヤで採用できるのが個人開発の良いところです。
GraphQLはRailsでREST APIにするよりは使い勝手が良かったので、次に同じような構成にするときも使おうと思っています。
APIドキュメント的なものやTypeScriptの型を自動生成してくれるおかげで、クライアント側の実装が特に楽になりました。
GraphQLの学習には以下のサイトを利用しました。
これさえ読めばGraphQLを完全に理解した気になれます。複数のプログラミング言語に対応していてとてもわかりやすいのでおすすめです。
エラーハンドリングや認可など、どうすれば良いか悩んだらgraphql-rubyの公式ドキュメントを読むとだいたい解決します。
Sentry
エラートラッキングサービス
Railsで起きたエラーを検知してSlackに通知してもらっています。
アプリ側のエラーもSentryに検知してもらおうと思っていたのですが、ReactNativeでSentryのパッケージとreact-native-configというパッケージの相性が悪かったので、アプリ側は後述するBugsnagというサービスを使いました。
Dependabot
リポジトリが依存しているパッケージに更新があったらプルリクエストを作ってくれるサービスです。
プルリクエストのコメントにリリースノートなども載せてくれて親切です。
また、更新の種類によって security や bug などのラベルもつけてくれるので、急いで更新すべきかが一目でわかります。
Redash
データ可視化ツール
DBに溜まったデータを分析したかったのでHerokuにRedashサーバーを立てました。
見たい時だけ動いてくれれば良いので、無料プランで運用しています。
Redashサーバーはこのリポジトリを参考にして30分ほどでできました。
インフラ関連
Heroku
開発を始めた当初はAWSのECSを使おうと思っていたのですが、最低限の構成でもお高くつきそうだったので、Herokuを使いました。特にLBがお高い・・・
デプロイパイプラインとかStaging環境とか自分で構築すると恐ろしく面倒くさいことが簡単にできてしまうので、ついついHerokuに甘えてしまいます。
Staging環境とRedashサーバーでは無料のFreeDyno、本番環境では今のところ7$のHobbyDynoを使用しています。
Heroku Postgres
Staging環境とRedashサーバーで無料のHobbyDevプランを使っています。
HerokuPostgresのHobbyDevプランと9$のHobbyBasicプランはメモリキャッシュしてくれないので、本番環境では代わりにAWSのRDSを使いました。
Herokuのサーバーはアメリカにあるので、RDSのリージョンはバージニアを選択しています。インスタンスタイプはt3.microです。
出来るだけStaging環境と本番環境で構成を変えたくないのですが、Staging環境にお金はかけたくないので妥協しました。
CloudFlare
CDNサービス
DNSとファイアウォールの機能を使用しています。
ファイアウォールの設定が、IP制限できたり日本以外のアクセスを制限できたりと結構柔軟に設定できます。
New Relic
アプリケーションのパフォーマンス監視サービス
Herokuのアドオンで入れています。
無料プランだとログが1日までしか保存されないですが、普段ダッシュボードを見ることはほぼなく、異常が起きた時に知らせてくれればそれで良いので、閾値を超えたらSlackにアラートを飛ばしてくれるように設定しています。
Timber.io
ロギングサービス
Herokuのアドオンで入れています。
似たようなロギングサービスはいくつかあったのですが、どれでもできることはそう変わらなそうだったので、あまり調べずに使いやすそうなものを選びました。
無料プランだとどのサービスも数日しかログを残してくれないので、念の為S3とかにログを永続化しようかなと思っています。
LogDNAというサービスを使用してS3にログを永続化できるようです。
Uptime Robot
HTTP監視サービス
apiサーバーのヘルスチェック用のURLに定期的にリクエストを投げて死活監視してくれています。
正常なレスポンスが帰ってこなかったら、slackに通知してくれます。
フロントエンド関連
React
管理画面をSPAにするためReactを使っています。
material-component や parcel を使って手を抜けるところは抜いています。
SEOを気にする必要がないのでSSRもしていません。
TypeScript
TypeScriptがあるのとないのとではコードの変更し易さが段違いなので、ここ1年くらいは必ず使っています。
Apollo Client
GraphQL用のクライアント
RelayというGraphQLクライアントもありますが、そちらは試していません。
確かhowtographqlでApolloがオススメされていたので、そのままApolloを選んだ記憶があります。
こちらもGraphQLと同様にhowtographqlで入門して、足りない部分を公式ドキュメントで補うやり方で十分でした。
Netlify
静的サイトのホスティングサービス
静的サイト版Herokuみたいな感じで簡単便利です。
GitHubのリポジトリに連携させると、ビルドとデプロイをシュッと行なってくれます。
アプリ関連
ReactNative
去年仕事でReactNativeを書いていて、使い心地も気に入っていたのでそのまま使用しました。
ただ、アプリのビルドの設定やリリース周りの作業だけは何度やっても面倒で嫌いです。
Expoを使えばその辺よしなにやってくれるのですが、代わりにネイティブモジュールを自由に使えないデメリットがあるので、Expoは使いませんでした。
AppCenter
アプリ関連のことを色々やってくれるサービスです。
ReactNativeもサポートしていて、公式のドキュメントも充実しています。
以下の機能を使いました。
- アプリのビルド
- アプリのストアへのリリース
- CodePush
課金の形式は、合計ビルド時間が一月に240分を越えると有料になるといった形で、1ビルド5〜10分ほどかかるので無駄にビルドしているとあっという間に無料分がなくなります。
リリース前はどうしてもビルド回数が増えてしまい、ギリギリ240分を超えてしまったので、1月分だけ課金しました。4,480円もかかるのでお高いです。
お金払ってでもAppCenterを使った理由は、使い慣れているからというだけなので、無料で使えそうなBitriseを使うとか手元でビルドするとかでも良いと思います。
Firebase
色々と機能がありますが、AnalyticsとDynamicLinksだけを使いました。react-native-firebaseモジュールを使って設定しています。
Analyticsはそのまま使っても画面遷移の情報が取れないので、ReactNativeの画面遷移で使っているreact-navigationモジュールを使って遷移情報をAnalyticsに送信するようにしています。
Screen tracking for analytics · React Navigation
GoogleAnalyticsを使った例ですが、トラッキング部分のコードを差し替えればFirebaseAnalyticsでも使えます。
Bugsnag
前述の理由でSentryを使わずにBugsnagを使いました。
ReactNativeがサポートされているという理由で選んでいます。
SentryよりUIが好みなので、今後はこっちを使うかもしれません。使ってみた感じだと、できることは大差なさそうです。
CodePushで配信した.jsbundleのsource mapをアップロードする方法について、公式で解説されているのが地味に助かりました。
https://docs.bugsnag.com/platforms/react-native/react-native/showing-full-stacktraces/
CircleCI
定番のCIサービス。 テストを実行したり、codepushさせたりしています。
その他
Zoho Mail
独自ドメインのメールホスティングを無料で利用できるサービス。
この手のサービスはGoogle Appsをはじめ有料なイメージがあるので、無料なのは驚きました。最初は怪しいサービスかと思った
AppFollow
アプリのレビューやランキングの表示、ASOをサポートしてくれるサービス。
無料プランでは2アプリまで登録できるので、とりあえず試しに使ってみています。
アプリのレビューがあったりキーワードの順位が変動したらslackに通知してくれるように設定しています。
