0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Nuxt.jsとFirebaseで個人開発アプリをシェアできるウェブサービスを作った話

はじめに

4月で2年目になったウェブエンジニアです。普段はFEとBEを3:7くらいの割合でコードを書いています。
1年目は仕事で使っている技術やノウハウを学ぶことで精一杯でしたが、最近は仕事をこなしていく中で興味を持った技術について勉強する余裕が出てきました。
そこで、1年間ウェブエンジニアとして仕事をし、学んだ知識を生かして自分で1からウェブサービスを作ってみようと思い立ちました。
この記事では、備忘録という意味合いを兼ねつつ、なぜ、どのようにして、どんなものを作ったのかを書いていこうと思います。

作ったサービス

アプリガーデンという個人開発アプリをシェアできるサービスを作りました。
Twitter、Google、Githubのいずれかのアカウントがあれば簡単にユーザー登録ができ、アプリを投稿することができます。
また、ユーザー登録をせずに他の方々が作ったアプリを見るだけということも可能です。
スクリーンショット 2020-05-28 20.24.13.png

昨今、プログラミングへの関心が高まり、学びやすい環境になり個人でアプリケーションを開発するハードルが下がったと感じています。
アプリが完成したら公開してできるだけ多くの人に使ってほしいと思うのがエンジニアの性ですが、宣伝という壁が立ちはだかります。
法人であれば広告を出稿したりプレス掲載したりという方法を取ることができますが個人で行うとなると難しいのではないかと思います。
そんな個人開発エンジニアの方々が気軽に、簡単に作ったアプリをシェアできる場を作りたいなと思ったのがアプリガーデンを開発したきっかけです。
アプリをシェアすることはもちろん、ユーザー登録をせずにアプリを見るだけということも可能で、他のエンジニアが作ったアプリを見てモチベーションをもらうという使い方もできます。

システムアーキテクチャ

architecture.001.png

フロントエンドにNuxt.js、バックエンドにFirebase、CI/CDにはGitHub Actionsを利用しています。
UIフレームワークにはVuetifyを採用しています。コンポーネントが豊富で日本語のドキュメントが充実しているのでとても使いやすいです。
バックエンドはできるだけコードを書く量を減らしたかったので全てFirebaseでまかなっています。ウェブコンソールで1つプロジェクトを作ることで様々なプラットフォームを利用できるので管理も楽になります。
今回はSNS認証のためにAuthentication、アプリ情報やユーザー情報を保存するためにFirestore、ウェブサイトとして公開するためにHostingを利用しています。独自ドメインへの接続も含めて全て無料プランで利用することができます。

Firebase Authentication
Firebase Firestore
Firebase Hosting

Firebase HostingへのデプロイはGitHub Actionsで自動化しています。
releaseブランチへのコミットがトリガーとなりビルドからデプロイまで自動で行われるようにしています。

GitHub Actions

おわりに

実装期間は主に土日に作業をして1ヶ月ほどでした。
Firebaseのおかげでバックエンドはウェブコンソールからぽちぽちするだけで環境を作ることができるので楽をすることができました。
今のところ最低限の機能しか実装できていないのでより使いやすくなるように拡張をしていきたいと思います。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?