1. はじめに

ツッコミどころはありつつもアプリをローンチしました🎉
宣伝も兼ねてローンチまでの流れを記事に。
👇こちらがアプリ
https://www.sharpen.tokyo/gantt.html

1-1. 動機

Hyperappでアプリを作ってローンチしたい衝動に駆られた。

1-2. 骨格

名前	公式ページ	採用理由
JavaScript Library	Hyperapp, etc	I love Hyperapp ➡︎ 衝動的コーディング開始
Host Server	Google Cloud Storage	無料枠めあて ➡︎ より低コストに
DNS Server	Google Cloud DNS	流れ的に
Api Sever	Google App Engine	無料枠めあて ➡︎ デプロイ超絶ラク
Api Language	Ruby on Rails	こなれてる
Data Store	Google Cloud Datastore	Model設計シンプルの極み過ぎ ➡︎ RDB不要 ➡︎ より低コストに
Design Framework	Semantic UI	美しい ➡︎ Document見やすい
Proxy Server(DNS)	Cloudflare	SSL化無料

1-3. どんなアプリか

シングルページなタスク管理アプリ。

そして使い方次第なアプリ。

例えば、新人君の教育に使うとか。
やることを教えたり指示したりしても、優先順位や時間感覚がわからなく
双方とも困ることが多いから、タスクのスケジューリングを
わかりやすく見える化するとトレーニングに最適！
プロジェクトマネージメントの素養を鍛えるため、
社会人としての仕事の運び方を身につけるため、シンプルなツールで教育を😃

1-4. 作業環境

name	value
OS	Mac 10.13.3 (High Sierra)
Editor	vim 8.0.642
Package manager	npm 6.3.0
Bundler	webpack 2.5.1

2. ローンチまでの大まかな流れ🏃

Hyperapp フロントエンド実装
Google Cloud Storage に、くい気味にα版ローンチ
Ruby and Rails API実装
Google App Engine でAPIデプロイ晴れてβ版ローンチ
一息つく
CloudFlareでSSLに

2-1. Hyperapp フロントエンド実装

こちらで語っています。

2-2. Google Cloud Storage に、くい気味にα版ローンチ

ほぼ段取り作業。やってることはざっくり3つ。

① DNSの処理をGoogle Cloud DNSにお任せする設定
② Google Cloud Storageのバケットをウェブサーバとして公開する設定
③ 公開するソースコードを Google Cloud Storage に配置

2-2-1. ドメインを借りる

お名前.comでドメインを1年契約（99円）。
sharpen.tokyo Tokyo発トレンディなアプリ🎃
お名前.comから重要なメールが送信される事あり、メールは見落としなきように。

2-2-2. Google にログインして諸々設定

2-2-2-1. GCP使える様にする

GCP を無料で体験、ご利用いただけます。から登録。クレジットカード情報登録必要。

2-2-2-2. 自分ドメイン所有者っすよ、と証明する

私はドメインをお名前.comで借りてるのでこれが必要。
公式ドキュメント静的ウェブサイトのホストにしたがい、sharpen.tokyoドメインの所有者であることを証明します。

要点と詳細

Google search consoleでCNAME レコードを発行
- プロパティを追加 > shapen.tokyoを入力
- 別の方法 タブ
- ドメイン名プロバイダ ラジオボタン
- Onamae.comを選択
- CNAME レコードを追加するリンク
- CNAME ラベル/ホスト, CNAME 宛先/ターゲット をコピーして次の手順へ(確認ボタンはまだ押さない)
お名前.com管理画面で発行したCNAME レコードを登録
- DNSタブ
- ドメインのDNS関連機能設定ラジオボタン > 次へボタン
- sharpen.tokyo ラジオボタン > 次へ進むボタン
- DNSレコード設定を利用する > 設定するボタン
- 1.で発行した CNAME コードを登録
認証確認
- Google search console 画面に戻る
- 2の手順の30分後くらいに、確認ボタンクリック

万が一72時間以上経過しても認証が通らない場合、
お名前.comがドメインを止めている事があるので、その旨のメール通知がないか確認するか、
お名前.comに直電でお問い合わせてください。
運が良ければ、クールなシスジョがスマートにサポートしてくれます。

この項に関してその他参考になる記事[①]

2-2-2-3. この機会にDNSとは？を1から復習

ザッと復習しておくのもいいかと思います。

2-2-2-4. Google Cloud DNS 設定

クイックスタートがございますが、
ざっくり説明します。

Google Cloud DNS コンソール画面で、DNS名に取得したsharpen.tokyoを入力しzoneを作成
Google Cloud DNS コンソール画面で、レコードセットを追加ボタンでCNAMEレコードを登録
- CNAMEレコード
  
  DNS 名タイプデータ
  
  www.sharpen.tokyo CNAME c.storage.googleapis.com
Google Cloud DNS コンソール画面で、2-2-2-2の Google Search Console で発行したCNAMEレコードを登録(お名前.comの管理画面でも確認できます)
Googleのネームサーバをお名前.com管理画面で登録
- Googleのネームサーバの名前は Google Cloud DNS のコンソール画面で確認できます。
  
  DNS 名タイプデータ
  
  sharpen.tokyo. NS ns-cloud-b1.googledomains.com.
  ns-cloud-b2.googledomains.com.
  ns-cloud-b3.googledomains.com.
  ns-cloud-b4.googledomains.com.
- お名前.comの管理画面でGoogleのネームサーバの名前を登録する方法
  - DNSタブ
  - ドメインのDNS関連機能設定ラジオボタン > 次へボタン
  - 左メニューの ネームサーバの変更
  - 他のネームサーバーを利用 タブ
  - 上記 Googleのネームサーバの名前を 4つ全て入力して登録

DNS 名	タイプ	データ
www.sharpen.tokyo	CNAME	c.storage.googleapis.com

DNS 名	タイプ	データ
sharpen.tokyo.	NS	ns-cloud-b1.googledomains.com. ns-cloud-b2.googledomains.com. ns-cloud-b3.googledomains.com. ns-cloud-b4.googledomains.com.

2-2-3. 静的コンテンツをGoogle Cloud Storageに配置

2-2-3-1. バケット作成と設定

Google Cloud Storage コンソール画面 バケットを作成リンク
名前にwww.sharpen.tokyoを入力
その他項目はデフォルトのまま登録
一覧のwww.sharpen.tokyoの行　右の・・・メニュー > ウィブサイトの設定を編集
メインページのファイル名（エントリポイントなる.htmlファイル）、404ページのファイル名を設定
* 一覧のwww.sharpen.tokyoの行　右の・・・メニュー > バケットの権限を編集
権限タブ > メンバーを追加テキストインプットにallUsersを入力
権限タブ > 役割を選択セレクトボックス > ストレージオブジェクトの閲覧者 を選択して、追加ボタンクリック

2-2-3-2. α版ローンチ！

www.sharpen.tokyo バケットに、
エントリポイントファイル、404ページファイル、js,cssのファイルを
Google Cloud Storage コンソール画面でドラッグ&ドロップでアップロード。
これにてめでたく、α版ローンチ！🎉
ちなみに、α版はブラウザのlocalStorageにStateを保存する、
スタンドアローンなアプリでした！
Google Cloud DNS の設定反映に時間がかかるのか、
設定したwww.sharpen.tokyoでページが見れるまで3時間程かかりました。

2-3. Ruby and Rails API実装

Apiモード、PostgreSQLで。
実装後Google Cloud Datastoreを使いたくなり結局getting-started-rubyをgit clone

2-4. Google App Engine でAPIデプロイ晴れてβ版ローンチ

Google Cloud Datastoreを望んだ時点で、
Googe App Engine に辿りつくさだめでしょうか。
チュートリアルというグーグルの敷いたレール上を歩くと、その楽さに抗えません。

2-4-1. Google App Engine デプロイ手順

$ gcloud app deploy
　
　... い、以上、デプロイ完了！🎉

2-4-2. 謝罪

すみません、Google App Engine デプロイ手順に関しての記述、
演出の為、若干、はしょってますが、
そのくらいの、印象、インパクトだった事をお伝えしたいです。

実際には、

クラウドシェル起動
git clone

と行った手順がありますが、GCPを使い始めたばかりなら、
Google Cloud Platformのコンソール画面からクラウドシェルを起動すると
チュートリアルが始まるので是非それに沿ってこのデプロイ体験を味わってください。

クラウドシェル起動手順

因みに、こちらの手順を参考に
ローカルのマシンにCloud SDKをインストールしローカルマシンのコマンドラインから、同じようにデプロイができます。

2-5. 一息つく

ああ、衝動的な欲求がやっと満たされたところで、
今後ゆっくり楽しむ残作業を整理しましょう。

SSL化

httpでは恥ずかしいと感じるご時世です。
本記事では最後にこの手順を紹介して終わります。
取り急ぎの表向き対応です。
API を Ruby on Rail から Go言語にリプレイス

APIのプロジェクトルートに app.yaml と言う、Google App Engineの
Webサーバの構成を設定するファイルがあります。
この設定によってGoogleに支払うGCPの利用料金が変わってくるのですが、
Ruby on Railsの場合、これが柔軟に設定できない模様。実際にautomatic_scalingと言う項目に色々設定するとデプロイできませんでした。しかしGo言語で実装すれば今より柔軟に設定できる模様。より低コストを目指し、Goへゴー！です。

2-6. CloudFlareでSSLに

CloudFlareにサインアップ
www.sharpen.tokyo を登録
CloudFlareのネームサーバをお名前.com管理画面で登録

CloudFlareのネームサーバが2つ表示されます。
- お名前.comの管理画面でCloudFlareのネームサーバの名前を登録する
  - DNSタブ
  - ドメインのDNS関連機能設定ラジオボタン > 次へボタン
  - 左メニューの ネームサーバの変更
  - 他のネームサーバーを利用 タブ
  - CloudFlareのネームサーバの名前を2つ入力し登録(Googleのそれは削除でOK)
うまくいくと、メール通知が来て、Cloudflareのコンソール画面で、Status: Active となります。
少し設定変更
- Crypto画面に移動
- SSLを Flexible に変更
  
  Flexible は FULL に比べるとセキュリティは低い設定ですが、すぐにSSLを導入できます。
- 同じ画面で、Always use HTTPSとAutomatic HTTPS RewritesをONに変更
- DNS画面で、一覧に表示されているDNSレコードのStatus列を変更
  
  雲のマークをクリックするとDNS only から DNS and HTTP proxy (CDN) に切り替わります。

暫く待てばSSLでアクセス出来るようになります！

これで、SSL通信を行うCloudflareのプロキシサーバーを介して、
www.sharpen.tokyoにアクセスする形になります。
Cloudflare プロキシサーバと実際のGCPのサーバ間はSSL通信ではないので、
ここは追って対応する事となります。

Cloudflare参考記事1
Cloudflare参考記事2

⚠️注意
この時点で、ネームサーバがCloudflareになっていますので、
Google Cloud DNS だけにレコード追加してもうまく行きませんので
ご注意を。

これにて、ぱっと見は、恥ずかしくないサイトになったかと思います。
あとは、こころおきなく、Hyperappのソースをイジりまくりデプロイを繰り返すのみ。

Hyperapp + GCP でアプリをサクッとローンチ