Morix💪😼✨の投稿 - Crieit

なるべくお金をかけず個人開発をしていくには

2018-12-05T09:08:01+09:00

こちらはCrieitのアドベントカレンダー Advent Calendar 2018の5日目の記事です。

自分は結婚しておりまして現在お小遣い制です。
独身時代と比較すると自由に使えるお金がそんなに多くありません。

そんな中、個人でWebサービスを作るというのを趣味にしてます。
Webサービスを作るためにはお金が色々かかるわけです。

サーバー
ドメイン
素材

そこでいかにお金をかけずに個人開発をしていくかを考えながら開発しています。
そのノウハウをこの記事で書いていきたいと思います。

サーバー

作ったWebサービスを動かすための基盤が必要になるわけですがここが結構お金がかかるポイントじゃないでしょうか。
さくらのVPSやConohaを使うのが最初に思いつくと思うのですが、これは月額制です。
払っているお金以上請求が来ないというのはすごく安心感があり魅力的です。

ただ自分の場合そこにお金をあまりかけたくないです。ものすごくケチです・・・

ということでSaasなどをうまく使ってお金を最低限しかかけないようにしてます。

SaaS/PaaS/MBaaSをうまく使う

Webサービスを作るとなると

Webアプリを動かすためにWebサーバーが必要
APIを動かすためのアプリケーションサーバーが必要
DBを動かすためにDBサーバーが必要

といろんなサーバーが必要になりますし、運用を楽にするならそれぞれ冗長化をしたいところです。
となるとやたらお金がかかるので自分でインフラは用意したくないです。

ということでこういうのはSaas/PaaS/MBaaSを使って無料枠を駆使します。

Webホスティング

SPAを前提としますが、html/css/JavaScriptは静的ファイルです。
最近は無料で静的ファイルをホスティングできるところが増えてきています。

Netlify
GItHub Pages
Firebase Hosting

その他にはAWS S3でもWebホスティングできるので安く済ませることが出来ます。

またこれらはHTTPSに必要な証明書も無料で発行してくれます。
今時であれば必ずHTTPS対応しておきたいので、これは嬉しい。Let's Encryptさまさまです！
（S3であればCloud Frontを使ってHTTPS対応する必要がありますが）

APIやDB

ブラウザからは直接叩けないものをバックエンドのAPIから叩きたいとか
情報をDBに保存したいという要件は必ずあるでしょう。

これはFirebaseやHerokuといったMBaasやPassの無料枠を使うことが出来ます。

Firebase
- 認証/API/DB/ストレージと全部揃ってる
- DBはNoSQLなので要件にあったら使うといい
- 無料プランがある
Heroku
- RailsなどのWebアプリケーション置ける
- MySQLやRedisが無料で使える（制限がきついけど）

もちろんFirebaseとHerokuを組み合わせて使うことも出来るのでおすすめです。

ちなみになんですがこういうインフラを考えなくて良いサービスを作ってると監視も最低限で済みます。
Firebase起因の障害でない限り落ちたりはしないので！
監視をしたい場合はメトリクスの保持期間の少なさや制限が多いですがMackerelもフリープランがあるのでそれが使えます。

ストレージ

画像や動画を保存したくなると思いますが、それも最近は従量課金やその無料枠で使うことが出来ます。

AWS S3
Firebase Storage
Cloud Storage

ドメイン

Webサービスを公開するためにはできれば独自ドメインがほしいところです。
ただWebホスティングできるサービスはだいたいそこの無料ドメインを提供してくれるので、お金をケチりたかったらそれを使ってもいいと思います。

サブドメインをサービスのドメインにする

せっかく自分のWebサービスを作ったんだから、どうせならイケてるドメインにしたいですよね！
Kibelaは「kibe.la」というドメインで非常に美しいです・・・

ただドメインを取得するにはお金がかかります。
1ドメインが安くても年間1,000円前後はかかるんじゃないですかね。（セールはありますが！）

しかし1回買って終わりじゃなく、毎年請求がきます。
1サービスだったらいいかもしれませんが、何個も何十個も作っていくと結構な額になります。

そこで自分は、作ったサービスはほとんどサブドメインにしてます。

nyaaan.haramishio.xyz
markdowntable.haramishio.xyz
blog.haramishio.xyz
trash.haramishio.xyz

オシャレ感はありませんが、1ドメイン分のお金しか払わなくていいので安く済みます。

またサブドメイン戦略は他にもメリットがあります。

サブドメインだと広告を出すのが楽

以下の内容は間違いで、一回ルートドメインで審査通れば別ドメインでも広告出せるみたいです。

Google Adsenseで広告を出すのは一般的じゃないかなと思ってるのですが、
Adsenseはそのドメインで広告を出す許可をもらったら、そのサブドメインすべてで広告を載せることが出来ます。

僕の場合は、このブログのドメインで広告を出す許可をもらったのでその他のサブドメインで広告を載せられるようになりました。
1つ1つのサービスでドメインを取っていると毎回広告を出す申請（結構ハードル高い）をしないといけないので大変です。

素材

Webサービスを作ってると、どうしてもイラストやロゴなど素材が必要になります。
僕は絵を書くスキルが皆無なのでフリー素材でどうにかしています。

ロゴ

サービスのロゴはフリーイラストとフリーフォントで作ってます。
フリーフォントでいいのないかなーと探すときに便利なのがためしがきです。

これで良さそうなフォントを見つけたら、Gimpに入れてロゴを作ってます。

素材

フリーのイラストは「フリーイラスト ○○」でひかかったものを使ってます。
特にこれ！っていうサイトはないですが、「いらすとや」はなるべく使わないようにしてます。

なぜかというと、いらすとやのイラストの世界観が強すぎてうまくサービスにマッチしないときが多いからです。

運用方針

個人で開発・運用してますのである程度「俺ルール」を使えると思っています。

なので、現在Firebaseを従量課金プランで使うことが多いのですが
もしトラフィックが多くなり多額の請求が来そうになったらサービスを止めると思います
そういう割り切りを行えるのも個人開発のいいところだと思います。

ただ永久閉鎖というわけではなく、利益を取れるようマネタイズを考えた上でインフラをきちっと整えたものでまた出せればと思ってます。
そんな機会あるのかわかりませんがｗ

最後に

ということで、なるべくお金をかけずに個人開発をしていくにはというお話をしました。
昔よりはだいぶ安く済ませるためのサービスが出ているので、いい時代になりました。

同じようにお金あんまりかけられない・・・って人はぜひ参考にしていただけばと思います！

ちなみになんですが、現在4サービス運営しておりまして
そのサーバー費用やドメイン費用合わせて 毎月200円くらいです。
ほぼドメイン費用とDNSサーバー費用です。

次回はSさんです。お楽しみに！

Nyaaanを支える技術

2018-12-02T08:57:46+09:00

こちらはCrieitの個人開発サービスに用いられている技術 Advent Calendar 2018の2日目の記事です。
前日はなべさんの日本語のフリーフォントを一度に試せる「ためしがき」に用いられている技術についてでした！

11/5にNyaaanというWebサービスをリリースしました。

そこで

どのような技術を使ってるのか
どういう知見が得られたのか

を書いていこうと思います！

どういうサービスかは以下の記事を読んでいただけたらと思います！

https://blog.haramishio.xyz/entry/service-nyaaan

使用している技術

ざっくりな構成でいうと

フロントエンド
- Nuxt.js
Webホスティング
- Netlify
バックエンド
- Firebase

です。

Nuxt.js

Nuxt.jsはVue.jsアプリケーションを作るためのフレームワークです。
ちょっと大きめのVue.jsアプリを作る際に必要なVuexやVue Routerなどが入ってるのでNuxtをインストールすればすぐにWebアプリが作れます。
今回はSSR（サーバーサイドレンダリング）を行わないため、SPAモードで利用しています。

Netlify

Webホスティングはさまざまな種類がありますが、今回はNetlifyを選択しました。
選択した理由としては・・・

ビルドを勝手にやってくれる（npm run build がビルドコマンドよ！ってNetlifyに登録しとくだけでいい)
ビルドしたらデプロイもやってくれる
他のホスティングサービスと比較して無料枠の制限が少ない

Firebase

APIやDBが必要になったのですが、すべてFirebaseで行いました。
主要なFirebaseサービスはHostingとML Kit以外使いました。

それぞれの用途としては・・・

Authentication
- Twitter認証のため利用
Firestore
- ユーザ投稿データやユーザデータを保存
Functions
- Twitter APIに問い合わせる処理やユーザ削除機能で利用
Storage
- ユーザのアイコンの保存で利用

得られた知見

Firestoreのクエリーのクセ

FirestoreはNoSQLです。RDBのような柔軟なクエリーを書くことは出来ません。
その制限にひっかかってちょっと苦しんだ事例があるので共有します。

Nyaaanでは「有効期限」という機能があり
これを設定すると1時間または1日経つと、鳴き声（つぶやきみたいなもの）が見れなくなるというものです。

その鳴き声テーブルはこんな感じになってます（本当はもっとカラムあります）

カラム	型
ID	string
鳴き声	string
本音	string
有効期限	timestamp
作成時間	timestamp

Nyaaanにはタイムラインがあり、鳴き声は作成時間の降順でソートしたいです。
なので・・・

// カラム名はわかりやすく日本語にしてます
mewRef.where("有効期限", ">", now).orderBy("作成時間", "desc").limit(10).get()

としたかったのですがこれはNG。
範囲フィルタ(>や>=)を使う場合は、orderByの最初の要素はその範囲フィルタで使用したカラムしか指定できません。
Cloud Firestore でのデータの並べ替えと制限

RDBならこういうのは普通にできますが、NoSQLはこういう制限があるのかと勉強になりました。

結局どうしたかというと、後述するバッチ的なもので有効期限をチェックして削除してます。

FirebaseでCron的なことをしたいとき

上述したバッチ的なものの話です。

サービスを作っていくとバッチが必要になる場面があるとおもいます。
なにかしらの処理を定期的に動かすとなるとCronを使ったりJenkinsを使ったり色々あると思います。
これらはサーバーが必要になりますよね。
すでに持ってる人はそれを使えば良いんですが、僕はお金をかけたくないのでどうにかしてサーバーレスにしたいです。

さて、FirebaseのFunctionsはHTTPSフックで起動することが出来ます。
つまりcronでcurlを定期実行すればバッチみたいなことができるわけです！

そして世の中には外形監視のために定期的に指定したURLを叩いてくれるサービスがあります。
cron-job.orgやUptime Robotがそれです。

これを利用してFunctionsを定期的にトリガーするようにしてバッチ処理をサーバーレスで実現しました。

懸念点として、Functionsの実行を外部からできるようにしてしまっているのでセキュリティ的に問題ないのか？という点ですが
今回の場合はリクエスト時にGETパラメーターでアクセストークンを渡しており、そのアクセストークンじゃないとアクセス拒否するようにコーディングしています。
それでも攻撃されて突破されるリスクもなくはないので、センシティブなことをしたい場合はやめたほうがいいと思います。

Functionsの様々なトリガー

Fucntionsのトリガーは色々あります。

トリガー	内容
HTTPS	URLを叩くだけ
onCall	クライアントから直接呼び出し
Authentication	ユーザの登録/削除で呼び出し
Firestore	ドキュメントの登録/更新/削除で呼び出し
Storage	オブジェクトの登録/更新/削除で呼び出し
Pub/Sub	Cloud Pub/SubのPublishで呼び出し

NyaaanではHTTPSとAuthenticationのトリガーを使用してます。
特にAuthenticationトリガーは便利で、以下のようにFunctionsに書くだけで簡単に書くことが出来ます。

// ユーザが削除されたら実行されるFunction
exports.removeUser = functions.region('asia-northeast1').auth.user().onDelete(function(user, context) {
~~~
});

Nyaaanではユーザ削除されると今までの鳴き声が消えるようになってます。
クライアントでそこまでやると重いので、クライアントではAuthenticationのユーザだけ削除してレスポンスをすぐ返し、
FunctionsのAuthenticationトリガーで非同期で削除処理を走らせてます。

Netlifyのリダイレクト設定

Nuxt.jsのSPAモードを使用していて、Netlifyでホスティングしていたのですが
ルートパス以外を直接呼び出すと404エラーになってしまいます。(例: https://nyaaan.haramishio.xyz/top)

SPAではルートパス以外でアクセスされたらindex.htmlへリダイレクト処理をする必要があります。

Netlifyはリダイレクトの機能があり、デプロイするディレクトリのトップに _redirects を配置しそこにリダイレクト設定を記述するとリダイレクトしてくれます。

/*    /index.html   200

この話をもうちょいちゃんと説明したのがこちらの記事になります。
Netlifyを使ってたらルートパス以外が404になった話とその解決方法

最後に

ということでNyaaanの使用技術とそこから得た知見を書きました！
この記事でみなさんの開発のヒントになれれば幸いです！

さて、明日はこのアドベントカレンダーが開催されているCrieitの運営者のだらさんです！

Netlifyを使ってたらルートパス以外が404になった話とその解決方法

2018-11-06T09:50:13+09:00

先日「Nyaaan」というWebサービスをリリースしました。
このWebサービスは「Nuxt.js」で作られており、「Netlify」でWebホスティングしています。

Twitterでシェアして楽しんでもらうことを前提としたWebサービスですので、TwitterCardの画像は広くリーチするのには大切なものです。
しかし以下のような詳細画面など、ルートパス(index.htmlにあたるページ)以外は404にってしまう現象になり、
実際URLにアクセスするとちゃんと画面は見れるけど、TwitterではTwitterCardが表示されないという現象が起こりました。

その原因と解決方法を記載します。

原因

通常SPAサイトを作る場合、ルートパス以外でアクセスされた場合はindex.htmlにリダイレクトをする処理を書くと思います。
自分は404ページを用意して、Nuxt.jsの設定で「ページが存在しない場合、404を表示する」という設定を先にやっていました。

# SPA フォールバック
module.exports = {
  generate: {
    fallback: true, // '404.html' を使用したい場合
    fallback: 'my-fallback/file.html' // ホスティングサービスで特定のロケーションを指定する必要がある場合
  }
}

https://ja.nuxtjs.org/guide/routing/

この対応を先にやったことにより、ルーティングはちゃんと行われるけど404になってしまう現象になりました。

解決方法

解決方法は、Netlify用のリダイレクト設定を入れてあげることです。

HISTORY PUSHSTATE AND SINGLE PAGE APPS 参照
https://www.netlify.com/docs/redirects/#rewrites-and-proxying

/static/_redirects に以下の内容を記載。

/*    /index.html   200

これでルートパス以外はindex.htmlにHTTPステータス200でリダイレクトされます。
fallbackの設定を入れているならパスが見つからない場合、404.htmlに遷移します。