最速でサービスをローンチする

最速でサービスをローンチする:

はじめに

細かいことは良いから早くローンチしてそもそもイケてるプロダクトなのか検証したい人向けに書いています。

---

Done is better than perfect.

完璧を目指すよりもまずは終わらせろ

---

JavaScriptでプロトタイプ開発

初動でプロダクトのプロトタイプを作成するとして、JavaScriptでフロントエンドとバックエンドを言語統一するのが最速だと思います。

学習コスト的にもnpmのライブラリも豊富のため、フルスクラッチで作る必要がない。

---

圧倒的npmパッケージ数

---

SPA(Single Page Application)

また、SPAで作成するとページ間の遷移などもサーバ不要で実現できます。

つまり、html+js+img等の静的リソースをホスティングするだけでAPIサーバ不要で簡単なウェブページくらいは実現可能です。

---

個人的におすすめの構成

• SPA: ReactJS
• APIサーバ: nodejs + express
• DB: MongoDB + mongoose

JS統一で楽だし、情報が多いし柔軟性が高い

---

プロダクトファースト

プロダクトの初期開発においては最初から完璧なインフラ構築に注力するよりも、

うまく行ったら、ステップバイステップで環境移行したほうがコストも労力もかからず済みます。

それよりもプロダクトの本質に注力したほうが良いです。

---

最速でローンチする

---

ngrok

• 
  ngrokはlocalhostサーバをトンネリングしてグローバルホストとして公開するサービス
• デモ用とか、https検証用にサーバをグローバル公開する手段としては多分これが一番早いと思います。

---

導入方法

ngrokの導入方法に関してはこちらを参考にしてください。

参考：ngrokが便利すぎる

webpack-dev-serverのproxyと併用する場合は、

--host-header=rewriteのオプションが必要です。

$ ngrok http --host-header=rewrite (ポート番号) 

---

制限

• PCが一台犠牲になる
• 同時アクセスが多いとすぐToo Many Requestを受けるとアクセスできなくなる（１分で解除）

やはり検証用やデモ用です・・・

---

GitHub Pages

GitHubの機能

GitHubリポジトリをそのままホスティングする

---

ローンチ

GitHubリポジトリの公開設定を公開branch指定してindex.htmlを置くだけ

---

---

制限

• 10万リクエスト/月が上限
• 静的ホスティングのみ、APIサーバは置けない

---

Netlify

NetlifyはCLIでdeployできるのと独自ドメインの設定も特に制限がないのが良いです。

静的ホスティングのみだとベストかも知れない。

バックエンドがAWS Lambdaを使っていて、APIの書き方がNetlify専用になるのが・・・

---

メリット

• 専用のCDNにより、ホスティングが高速
• 独自ドメイン設定の制限がない

デメリット

• APIがNetlify専用の書き方になる

---

Glitch

GlitchはTrelloなどを開発しているチームが提供しているサービス

特にnodejs+expressのプロジェクトに関してはテンプレが用意されているので特にバックエンドの実験に便利です。

GitHub経由でのimport(deploy)も可能です。

---

---

package.jsonの設定

サーバ起動前提なのでscripts: "start"が必須

静的ホスティングのみしたい場合はserve等を使う

package.json

"scripts": { 
    "start": "serve ." 
  }, 
  "dependencies": { 
    "serve": "^10.1.1" 
  }, 

---

メリット

• オンラインエディタ付きで編集時に即時反映
• package.jsonも即時判断してnpm installする

デメリット

• GitHubからのimport時の初期化に時間がかかる（表示上ではタイムアウトしたりする）
• 独自ドメイン設定にはThanksを２つ付けてもらわないといけないのでちょいだるい

---

Heroku

SalesForceに買われたホスティングサービス、昔からある。

nodejsに限らず、大体どの言語のサーバのフレームワークもサポートしている。

CLIでデプロイも可能です。

---

Setting

Settingのbuildpacksでnodejsを追加

---

package.jsonの設定

サーバ起動前提なのでscripts: "start"が必須

heroku専用のengines属性にnodejsの設定が必要

package.json

"scripts": { 
    "start": "node app.js" 
  }, 
  "engines": { 
    "node": "8.11.3", 
    "yarn": "^1.9.4" 
  } 

---

メリット

• カスタムドメインが設定できる
• 継続的デプロイが可能（CIツール）

デメリット

• dynoがAWS Lambda同様アクセスがないと起動に時間がかかる（定期的にキックする仕組みが別途必要）
• 550時間／月の無料Dyno時間(クレジットカード登録で1000時間/月)の上限、それ以上は有料

---

mLab

mLabはMongoDB公式のMongoDBサーバホスティングサービスです。

グローバルからアクセスすることもできるし、

Herokuはプラグインがあります。

---

まとめ

静的ホスティングのみの場合はNetlify

API込みの場合はGlitch、Herokuが良さそう。

軌道に乗ったらAWS等に移行すれば良いと思う。

---

デモ

同じサンプルをそれぞれデプロイしてみた

• GitHub Pages
• Glitch
• Heroku
• Netlify

---

ドメイン取得

AWSのRoute 53でサクッと購入できます。

大体$12/年