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

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

## 1-1. 動機
Hyperappでアプリを作ってローンチしたい衝動に駆られた。
## 1-2. 骨格
|名前 |公式ページ |採用理由 |
|---|---|---|
|JavaScript Library|[Hyperapp](https://github.com/jorgebucaran/hyperapp#hyperapp), [etc](https://qiita.com/hajime-nohara/items/4602281e4f4bbab48642#5-%E6%8E%A1%E7%94%A8%E3%81%97%E3%81%A6%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE-library)|[I love Hyperapp](https://qiita.com/hajime-nohara/items/888aae1c4e553f3cec86#1-1-i-love-hyperapp) ➡︎ 衝動的コーディング開始|
|Host Server |[Google Cloud Storage](https://cloud.google.com/storage/?hl=ja) |無料枠めあて ➡︎ より低コストに|
|DNS Server |[Google Cloud DNS](https://cloud.google.com/dns/?hl=ja) |流れ的に|
|Api Sever |[Google App Engine](https://cloud.google.com/appengine/?hl=ja)|無料枠めあて ➡︎ デプロイ超絶ラク|
|Api Language |[Ruby on Rails](https://railstutorial.jp/)|こなれてる|
|Data Store |[Google Cloud Datastore](https://cloud.google.com/datastore/?hl=ja)|Model設計シンプルの極み過ぎ ➡︎ RDB不要 ➡︎ より低コストに|
|Design Framework|[Semantic UI](https://semantic-ui.com/)|美しい ➡︎ Document見やすい|
|Proxy Server(DNS)|[Cloudflare](https://www.cloudflare.com/ja-jp/)|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. ローンチまでの大まかな流れ🏃

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

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

[こちら](https://qiita.com/hajime-nohara/items/4602281e4f4bbab48642)で語っています。

## 2-2. Google Cloud Storage に、くい気味にα版ローンチ
ほぼ段取り作業。やってることはざっくり3つ。

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

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

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

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

#### 2-2-2-1. GCP使える様にする
[GCP を無料で体験、ご利用いただけます。 ](https://cloud.google.com/free/?hl=ja)から登録。クレジットカード情報登録必要。

#### 2-2-2-2. 自分ドメイン所有者っすよ、と証明する
私はドメインをお名前.comで借りてるのでこれが必要。
公式ドキュメント [静的ウェブサイトのホスト]
(https://cloud.google.com/storage/docs/hosting-static-website?authuser=2&hl=ja)にしたがい、sharpen.tokyoドメインの所有者であることを証明します。

要点と詳細

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

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

この項に関してその他参考になる記事[[①]](https://qiita.com/okaji00/items/d0457110169910e92f24)

#### 2-2-2-3. この機会にDNSとは？を1から復習
ザッと[復習](http://www.atmarkit.co.jp/ait/articles/1706/21/news041.html)しておくのもいいかと思います。

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

[クイックスタート](https://cloud.google.com/dns/quickstart?hl=ja)がございますが、
ざっくり説明します。

1. Google Cloud DNS コンソール画面で、DNS名に取得したsharpen.tokyoを入力しzoneを作成

2. Google Cloud DNS コンソール画面で、`レコードセットを追加`ボタンでCNAMEレコードを登録
 * CNAMEレコード

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

3. Google Cloud DNS コンソール画面で、2-2-2-2の Google Search Console で発行したCNAMEレコードを登録(お名前.comの管理画面でも確認できます)

 
4. Googleのネームサーバをお名前.com管理画面で登録
 * Googleのネームサーバの名前は Google Cloud DNS のコンソール画面で確認できます。

        |DNS 名|タイプ|データ|
        |---|---|---|
        |sharpen.tokyo.|NS|ns-cloud-b1.googledomains.com.<br/>ns-cloud-b2.googledomains.com.<br/>ns-cloud-b3.googledomains.com.<br/>ns-cloud-b4.googledomains.com.|
   * お名前.comの管理画面でGoogleのネームサーバの名前を登録する方法
      * `DNS`タブ 
      * `ドメインのDNS関連機能設定`ラジオボタン > `次へ`ボタン
      * 左メニューの `ネームサーバの変更`
      * `他のネームサーバーを利用` タブ
      * 上記 Googleのネームサーバの名前を 4つ全て入力して登録

### 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](https://github.com/GoogleCloudPlatform/getting-started-ruby/tree/master/2-cloud-datastore)をgit clone

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

Google Cloud Datastoreを望んだ時点で、
Googe App Engine に辿りつくさだめでしょうか。
[チュートリアル](https://cloud.google.com/ruby/getting-started/using-cloud-datastore)というグーグルの敷いたレール上を歩くと、その楽さに抗えません。

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

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

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

実際には、

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

[クラウドシェル起動手順](https://cloud.google.com/shell/docs/quickstart?hl=ja)

因みに、[こちらの手順](https://cloud.google.com/ruby/getting-started/hello-world?hl=ja)を参考に
ローカルのマシンに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に

1. CloudFlareにサインアップ
2. `www.sharpen.tokyo` を登録
3. CloudFlareのネームサーバをお名前.com管理画面で登録
    
    CloudFlareのネームサーバが2つ表示されます。
    * お名前.comの管理画面でCloudFlareのネームサーバの名前を登録する
      * `DNS`タブ 
      * `ドメインのDNS関連機能設定`ラジオボタン > `次へ`ボタン
      * 左メニューの `ネームサーバの変更`
      * `他のネームサーバーを利用` タブ
      * CloudFlareのネームサーバの名前を2つ入力し登録(Googleのそれは削除でOK)

4. うまくいくと、メール通知が来て、Cloudflareのコンソール画面で、Status: Active となります。

5. 少し設定変更
 * 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](https://geekflare.com/gcs-site-over-https/)
[Cloudflare参考記事2](https://hajye.blogspot.com/2018/09/cloudflaressl.html)

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

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