はじめに
199X年(2018年) 、 世界(Qiita) は 核の炎(「WEBサービス作ってみた」ブーム) に包まれた！
海は枯れ、地は裂け、全ての生物が死滅したかのように見えた。
だが、人類は死滅していなかった！
ということで、先人達のWEBサービスのPaaS/ホスティングサービス/技術要素を比較してみた。
（普段遊ぶときは、 Heroku×node.js くらいしか使わないので・・・）
※2018/10/29追記：比較記事追加しました！
※2018/11/4追記：結局、何を使えば良いの？に関してはこちら
- VPS/PaaS/FaaS: 【クラウドVPS/PaaS/FaaS比較】最低料金とサービスレベルの比較
- データベース： 【クラウドDB比較】無料枠で提供されるサービスレベル
サマリ
ホスティングサービス・CDN・DB・ストレージは、「コストで選んでいる」という表現が多かった。
サーバサイド技術はあまりこだわりが見られず、慣れた技術を使っている様子。
一方で、フロントサイドの技術にはこだわる人が多かった。
※2018/10/29追記分の情報を踏まえてサマリに反映済み
| 比較項目 | 比較結果 |
|---|---|
| ホスティングサービス | AWS・Firebase・Heroku・Netlifyが多い。次いでConoHa。AWSでガッツリ構築してる人も居る。 |
| CDN | CloudflareもしくはCloudFront@AWS。 |
| DB | RDBMSのが多いけど、NoSQLも多い。ケースバイケース。 |
| ストレージ | S3@AWSが圧倒的 |
| サーバサイド | Ruby×Railsが強い。次いで、PHP×Laravel、Python。node.jsはそこまで多くない。 |
| フロントサイド | Vue.jsが強い、次いでReact.js。SCSSやSemanticUIなどのCSS系技術も強い。 |
| コスト | 無料〜700円/月くらいが多いけど、どこまで非機能面（性能、監視、運用など）にこだわるかで変わる。 |
比較
前提
- 表の見方
- ハイフンは、記載がない・判別がつかないなど。
- インフラ(主)：処理を担うサーバーが存在する環境
- インフラ(他)：ロードバランサとか
- （だいたい）投稿日時順で並んでます。
- その他注意事項
- 人力判断なので、ミスあるかも。（プログラムで収集とかじゃない）
- CSSやJavascriptはもちろん、BootstrapやjQueryなどは、もはや使われてないことが無いので、割愛。
- SCSSもCSSの一種扱いして表現してません。1
- ドメイン代は記載ない場合が多いので、割愛してます。だいたい100円〜1000円/年くらい。
- 表が崩れるため、ページタイトルは省略してます・・・
比較結果
比較対象一覧
Qiitaの「個人開発」「Webサービス」タグが登録されている記事
いいねが100以上の記事が対象。（一部例外あり）
WEBサービスの個人開発が対象。モバイルとかは対象外。
あと、最近話題になった記事で覚えているものを個人的に追加。
- Rails初心者でもできる1日で作るクソWebサービス
- WordPressでマッチングサービスを3日で作ってリリースした話
- 「中年の危機」ど真ん中のオッサンがWEBサービス作ってみた。
- 東大を出てゼロからプログラミングを学び、1年後にWebサービスを作ってみた話
- 就活のためにWEBサービスを作ったら、転職できた以上の価値をもたらしてくれた話
- 開設後３週間で収益１０万円を得た個人開発サイトでやったことの全部を公開する
- 10万pv/月達成のwebサービスのRailsソースコード、全部見せます！
- まるごとSemantic UIでWebサービスを作った話
- 「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】
- MapAPI を研究したら1週間でWebサービスをリリースした話〜 BingMaps GO! 〜
- 約3年かけてプログラマ向けニュース推薦アプリを作り直した話
- もっと気軽にアウトプットできる技術ブログサービス「Qrunch（クランチ）」をリリースした【個人開発】
- 初心者3人でwebサービス(webアプリ)を作ったので、立ち上げからリリースまでを時系列に書いていく
- Qiitaで草を生やせるGitHubならぬ「QiitaHub」を作った物語【個人開発】
- Netlify+Node.js+MongoDBでJAMstackな草を生やすサービスをOSSで公開しました!
- エンジニア向けにいいこと言ってそうな名言を集めたサイトを作った【個人開発】
- Qiita版TweetDeck！？カラム形式でQiita記事をウォッチできるサービス「QiitaDeck」をリリースしました！
- 【無料】Qiitaの殿堂を作った物語【簡単】
2018/10/29追加
追加分は「2018年内に更新されている」かつ「[WEBサービス]で検索してヒットした」かつ「個人開発（WEBサービス）っぽい」記事です。
- iOSアプリエンジニアがRailsでWebサービスを作るときの学習手順
- ブラウザを誰でも簡単に扱える楽器にしてみた
- 学生でもできる！Webサービスの開発・リリースするまでの道のり
- 今話題のAIをweb上で誰でも気軽に作れる「AIメーカー」を作ってみた
- Nuxt.js, Firebase, Stripe をフル活用してサーバーレスでJAMStackなECサイトを2日で開発した話
- Vue.js + Firebaseでポートフォリオを作ろう！
- 個人のためのコードレビューサービスを開発しました。
- 保育園落ちたアラフォーがプログラミングを学び、2か月でWebサービスを作った話
- 割り勘webサービスを２週間でリリースした手法を紹介する
- AIを使って自分の顔がジャニーズ系かどうかを判定するWebサービスを作ってみた
- Angular + Firebaseで作ったWEBサービスをリリースしたので、たまった知見を書き出してみる
- 新卒, Webサービスを作ってみた話
- 乃木坂46のメンバーからドラクエ風のパーティを作るWebサービスを作ってみた
- フロントエンド全然わからないマンが、ちょっとでも見た目のいいWebサービスを作ろうとしてやったこと
- フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話
インフラ構成
| 記事 | インフラ(主) | インフラ(他) | CDN | DB関連 | ストレージ | 費用 |
|---|---|---|---|---|---|---|
| Rails初心者... | Sakura | - | - | - | - | - |
| WordPressで... | XSERVER | - | - | MySQL | - | サーバ代2376円/月 |
| 「中年の危機」...のオッサン... | Azure | - | - | SQLServer | BlobStorage@Azure | - |
| 東大を出て...1年後に... | Heroku | - | - | PostgreSQL | S3@AWS | - |
| 就活のためにWEBサービスを作ったら... | ロリポップ | - | - | - | - | サーバー代 |
| 開設後３週間で収益１０万円... | Heroku | - | CloudFlare | Redis@Heroku/MongoDB/GraphQL | CloudStorage@GCP/S3@AWS | 無料 |
| 10万pv/月達成...ソースコード... | AWS | - | - | MySQL@AWS | - | 約6000円 |
| ...Semantic UIで... | Firebase | - | CloudFlare | RealTimeDatabase@Firebase | - | - |
| 「ツイッターでつぶやけるボタン」... | ConoHa | - | CloudFlare | Redis | - | 月額630円 |
| MapAPI...でWebサービス... | - | - | - | - | - | - |
| ...プログラマ向けニュース推薦アプリ...2 | Heroku | AWS | CloudFront@AWS | MongoDB@mLab3 | - | - |
| ...技術ブログサービス「Qrunch（クランチ）」... | ConoHa | - | CloudFlare | MariaDB@ConoHA | - | - |
| 初心者3人でwebサービス(webアプリ)を作った... | Netlify | AWS | - | DynamoDB@AWS | S3@AWS | 無料 |
| Qiitaで草...「QiitaHub」... | Netlify | - | - | - | - | - |
| ...JAMstackな草を生やすサービス... | Now/Netlify | - | - | MongoDB@mLab3 | - | 無料 |
| エンジニア向け...名言を集めたサイト... | Heroku/Netlify | - | - | GraphQL | - | 無料 |
| Qiita版TweetDeck... | ConoHa | - | - | - | - | 630円/月 |
| ...Qiitaの殿堂... | GCP | - | - | sqlite3 | - | 無料 |
2018/10/29追加
| 記事 | インフラ(主) | インフラ(他) | CDN | DB関連 | ストレージ | 費用 |
|---|---|---|---|---|---|---|
| ...RailsでWebサービス... | - | - | - | PostgreSQL/Redis | - | - |
| ブラウザを...楽器にしてみた | - | - | - | - | - | - |
| 学生...！Webサービスの開発... | AWS | AWS | CloudFront@AWS | RDS@AWS | S3@AWS | - |
| ...AIを...作れる「AIメーカー」... | AWS | AWS | - | RDS@AWS | EFS@AWS | - |
| ...サーバーレスでJAMStackなECサイト... | Firebase | Firebase | - | FireStore | - | - |
| Vue.js + Firebase... | Firebase | Firebase | - | - | - | - |
| ...コードレビューサービス... | - | - | - | - | - | - |
| 保育園落ちたアラフォー... | Heroku | - | - | - | - | - |
| 割り勘webサービス... | AWS | - | - | - | - | - |
| ...自分の顔がジャニーズ系かどうか... | AWS | AWS | - | - | - | 約2000円/月 |
| Angular + Firebase... | Firebase | Firebase | - | - | - | - |
| 新卒, Webサービス... | さくらVPS | - | - | - | - | 月２０００円 |
| 乃木坂46...ドラクエ風のパーティ... | Netlify/Heroku | - | - | - | Cloudinary | - |
| フロントエンド全然わからないマン... | - | - | - | - | - | - |
| ...大学生が1週間でVue.js... | GitHub Pages | - | - | - | - | - |
アプリ構成
| 記事 | MW | サーバサイド | フロントサイド | 補足 |
|---|---|---|---|---|
| Rails初心者... | nginx/unicorn | Ruby×Rails | - | 2016年の記事 |
| WordPressで... | - | WordPress(PHP) | - | WordPress |
| 「中年の危機」...のオッサン... | IIS | C#×ASP.net | - | WindowsServer |
| 東大を出て...1年後に... | - | Ruby×Rails | - | コメント欄が優しい世界 |
| 就活のためにWEBサービスを作ったら... | - | PHP×Laravel | - | マーケティング |
| 開設後３週間で収益１０万円... | - | Ruby×Rails | React×Redux | マネタイズ |
| 10万pv/月達成...ソースコード... | nginx/unicorn | Ruby×Rails | - | OSS |
| ...Semantic UIで... | - | - | Vue.js | SemanticUI |
| 「ツイッターでつぶやけるボタン」... | - | PHP×Laravel | Vue.js | 好き |
| MapAPI...でWebサービス... | - | - | - | BingMaps |
| ...プログラマ向けニュース推薦アプリ...2 | - | node.js | Vue.js×Vuex | キュレーションアルゴリズム |
| ...技術ブログサービス「Qrunch（クランチ）」... | nginx/unicorn | Ruby×Rails | - | フロント自作 |
| 初心者3人でwebサービス(webアプリ)を作った... | - | - | React×Redux | チーム開発 |
| Qiitaで草...「QiitaHub」... | - | - | React | デザイン重視 |
| ...JAMstackな草を生やすサービス... | - | node.js×express | 独自FW | JAMstack |
| エンジニア向け...名言...サイト... | - | Ruby×Rails | - | 面白さ |
| Qiita版TweetDeck... | - | Ruby×Rails | - | UX重視 |
| ...Qiitaの殿堂... | - | python×Flask | - | 低学習コスト |
2018/10/29追加
| 記事 | MW | サーバサイド | フロントサイド | 補足 |
|---|---|---|---|---|
| ...RailsでWebサービス... | Docker/nginx×Supervisor | Ruby×Rails | - | バッチ処理もある！ |
| ブラウザを...楽器にしてみた | - | Ruby×Rails | SPA(React)×bulma | 音楽な世界 |
| 学生...！Webサービスの開発... | Docker/Nginx | Ruby×Rails | Webpack | インフラが丁寧 |
| ...AIを...作れる「AIメーカー」... | - | PHP×ZendFramework | Python×Flask/Caffe | AI |
| ...サーバーレスでJAMStackなECサイト... | - | FirebaseFunction | Nuxt.js | JAMstack |
| Vue.js + Firebase... | - | - | Vue.js | ポートフォリオ |
| ...コードレビューサービス... | - | - | - | コメント欄が活況 |
| 保育園落ちたアラフォー... | - | PHP×Laravel | - | コメント欄が活況 |
| 割り勘webサービス... | - | Python×Flask | Vue.js | 開発ツール活用 |
| ...自分の顔がジャニーズ系かどうか... | Nginx | Python×Flask | jinja2 | 肉厚な記事 |
| Angular + Firebase... | - | - | Angular.js | Angular解説が丁寧 |
| 新卒, Webサービス... | apache | Ruby×Rails | - | 機械学習(TF-IDF) |
| 乃木坂46...ドラクエ風のパーティ... | - | Java×SpringWebFlux | - | S3じゃない |
| フロントエンド全然わからないマン... | - | Ruby×Rails/Slim | Vue.js/Materialize | UIへのこだわり |
| ...大学生が1週間でVue.js... | - | - | Vue.js | フォントのこだわり |
技術情報補足
インフラ系
記事に無いサービスも紹介してます。
サーバ
- 大手クラウドサービス： エンタープライズ利用の時に使うイメージがあったが、無償枠を上手く使って個人開発している人が多い。
- VPS： 仮想OSサービスなので、OSレイヤーから知識が必要だが、安いサービスが多い。
- ConoHa： 最近よく聞く。安価で使いやすいらしい。
- さくらインターネット：昔からあるので、実績面で安心感がある。
- vultr：激安らしい。よく知らない。
- PaaS： OSレイヤーは気にしなくていいサービスが多い。手軽にリリースしたいときはこっち。ただ、スリープするのに悩まされることが多い。
- BaaS： 基本的には、モバイルアプリ用のサーバ処理を提供するサービス。WEBサービスにも転用可能。
- firebase：BaaSといえば、これ。ってイメージ。他にもあるけど、今回のメインターゲットではないので、これだけ紹介。
- その他
- dokku：VPSとかにインストールすることで、擬似Heroku環境が作れるらしい。とても便利そう。PaaSでも、サービスによっては使えるので、活用していきたい。
メール
- Mailgun : APIベースのメールシステム・・・紹介記事
ツール系
ちょっと目に止まったツール類を軽く紹介。
デプロイツール
- Capistrano ：Railsのデプロイツール・・・紹介記事
デザインツール
- sketch ：お絵かきツール・・・紹介記事
データ収集
ビジネス系
ドメイン
クラウドソーシング
- Lancers：サービス名称の募集に使っている人がいた
その他
アーキテクチャー
- DDD:ドメイン駆動開発。プロセスの定義ではなく、考え方についての定義なのでちょっと難しい。・・・紹介記事
- JAMstack：「サーバとのやり取りはAPIのみとし、HTML側でそれを受け取って表示するような感じ」って理解している。2017からキーワードとしては上がっているけど、作りやすそうだし、流行りそうな気がする。・・・紹介記事1・紹介記事2
個人開発に役立ちそうな記事
- 個人開発における開発プロセスを公開してみる
- Webサービス個人開発するなら読みたい情報源10
- web制作が捗りそうな便利なwebツール【随時更新】
- WebサイトにSNSシェアボタンを設置＆効果測定する方法のまとめ
役立ちそうな書籍
さいごに
気まぐれに比較して見ましたが、だいぶ情報が整理されて個人的にはスッキリしました。
基本的に、みんな急に新しい技術に手を出したというよりは、少しずつ取り入れて行って、いまの形に落ち着いたって人が多いっぽい。
「プログラミング始めて〜ヶ月で」みたいな人には当てはまらないだろうけど、歴史あるぽい方々は、そんな感じで、ある程度似た技術でWEBサービスを作っていた。
自分は幸いにもherokuで遊んだり、AWSのいくつかは触ったことあるので、近い技術から模倣してみようかな。（無償枠の範囲で）
あと、ネットワーク周りの情報が少ないので、そこらへんを意識しながら構築してみたい。
あ、記事内の間違い or こういうサービスもあるよ的な話あれば教えてください。
以上です。
2018/10/31追記
（たぶん一盛り上がり終わったと思うので、反響を追記）
エゴサしてると、GCPのサービスであるGCE推しの人がちらほらいるので、今のトレンドはそっちに移りつつあるのかな？
-
ちょっとフロントエンド界隈には疎いので、どれくらい市民権を得ているのか知らないのですが、なんとなく使っている人が多い空気感を感じました。 ↩
-
プログラマ向けニュースキュレーションサービスを作ってみた話が前日譚としてあります。 ↩
-
mlab は MongoDB, Inc. に買収されました。今後は MongoDB Atlas という mlab と類似のサービスに統合されていくようです。 ↩