netlifyでホスティングしたときに5分悩んだこと
概要
片手間でやっている作業です。
さくらインターネットから、静的サイトはnetlifyに移転させようとしました。
その時、大したことじゃ無いけど、一瞬悩んだので記録しておきます。
デプロイ方法は、ここでは説明しません！ググってね。
www.netlify.com
悩んだこと
悩んだことはnetlifyでjQueryが動かなかったんですよ。
自分は、すぐに気付きました、意外と見落としがちだと思いました。
解決するために以下のことをしました。
ここで気付きます。
原因
元のサイトはhttpサイトだったのでjQueryのCDN先はhttpでした。
netlifyではhttpsになるので、そのまま移行するとミックスコンテンツとなりjQueryが読めなかった。
jQueryのCDN先をhttpsに変更してGitHubにpushして自動的に反映させる。
無事にnetlifyでjQueryが動きました。
まとめ
ミックスコンテンツには気を付けろ！
.devドメインを取得したので、サクッとFirebaseでホスティング
Firebaseでホスティングしなくても絶対やって！！
Google domainsのデフォルト設定ではDNSSECが無効です、以下のように有効にしてください。
マイドメイン、購入ドメイン、DNSで、DNSSECを有効にしてください。
DNSSECが無料で使えるGoogle domainsでDNSSECを有効にしないのは損ですよ！！
概要
Google domainsを使って .devドメインを取得した方は多いと思います。
domains.google
そして取得しただけで何もしていない方も多いと思います。
それなら、Firebaseを使って簡単にホスティングしちゃえばいいと思います。
firebase.google.com
Firebaseの準備
上記サイトから、右上の「コンソールへ移動」を押下します、色々とでますが、Firebase へようこその画面になりましたら、「プロジェクトを追加」を押下します。
プロジェクト名は適当につけて、日本リージョンを選択して「プロジェクトを作成」を押下する。
プロジェクトが作成されたら、左のメニューから「Hosting」を押下し「使ってみる」を押下します。
デプロイ方法が出るので、適当に「次へ」を押下して進めます。
Firebaseでデプロイ
ローカルマシンにNode.jsの環境があれば、ターミナルなどを立ち上げて $ npm install -g firebase-tools でツールを入れます。
そしてFirebaseの環境を作ります、まずはターミナルでログインします。
$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information?と聞かれるのでYを選択します。
Webで認証するので、該当のアカウントを選択して許可をします。
ログインが終わったら、プロジェクトを追加で追加したプロジェクト名でディレクトリーを作成し、Firebase環境を初期化します。
$ mkdir sugoi-dev $ cd sugoi-dev/ $ firebase init
Firebaseの初期化メッセージが表示されます、あとは画面の指示に従って進めていきます。
◯ Hosting: Configure and deploy Firebase Hosting sitesをスペースで選択してエンターを押下します。
[don't setup a default project]を選択してエンターを押下します。
? What do you want to use as your public directory? (public) こちらはそのままエンターを押下します。
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) こちらもそのままエンターを押下します。
作成されたら、public/index.html を適当なのに書き換えます。
$ echo "sugoi.dev" > public/index.html
あとはデプロイだけです。
$ firebase deploy --project sugoi-dev
FirebaseとGoogle domainsを紐付ける
ここから、Firebaeの画面とGoogle domainsの画面を行き来します。
Firebaeの画面
Firebaeの画面に戻り、右上の「ドメインを接続」を押下します。
取得した.devドメインを入力します。
ドメインの所有権確認画面がでますので、コードをコピーしておきます。
Google domainsの画面
Google domainsの画面を開きマインドメインから、DNSを選択し一番下の「カスタム リソース レコード」に先ほどのコードを入力し、タイプは「TXT」を選び、TTLは「1M」を入れ「追加」を押下します。
Firebaeの画面
DNS反映に1分ぐらい待ってから、Firebaeの画面に戻り、「確認」を押下します、うまくいくとクイックセットアップ画面が出るので、そこに表示されているIPアドレスは後で使います。
Google domainsの画面
Google domainsの「カスタム リソース レコード」画面に戻り、タイプは「A」を選び、先ほどのIPアドレスを入力する。
ここで注意！2個分のIPアドレスを入力するとき「追加」ボタンの前に「+」があるので、+を押して2行分の入力欄にしてからIPアドレスを入力してから「追加」を押下します。
Firebaeの画面
Firebaeの画面に戻り、画面を更新すると、ステータスが「保留中？」になります、ここからかなり待ちます、気長に待ちましょう。
2時間ぐら待つと、ステータスが「接続されています」変わります、これで完了です。
料金
Firebaeの料金ですが、取り置き程度ならSparkプランで大丈夫なので0円で済みます。
つまり、ドメインの1年間の料金1,512円（税込）だけで済みます。
SSL/TLS OK
出来上がったサイトを確認すると、きちんとSSL/TLSサイトとして動いております。
Let's Encrypt で発行され、この更新もFirebaseが勝手にやってくれます、楽ですよね。
余談ですが、Google Chromeにおいて.devのサイトはデフォルトでSSL/TLSでつなぎにいこうとします、SSL/TLSの発行までやらないと無意味ですので、ご承知ください。
2人から1on1を受けてみて
要点
- 尻を叩かれた
- 私の問題点が整理しやすい
- 雑談が長い
1on1メンター側のブログ
nitt-san (@nitt_san) | Twitterさんが書いた1on1メンターの内容です。
nitt-san.hatenablog.com
水殿 (@midono_ap1) | Twitterさんが書いた1on1メンターの内容です。
note.mu
受けた感想
違い
2人には、ほぼ同じ問題点をぶつけております。
同じと言ってもnitt-san (@nitt_san) | Twitterさんの方を先に受けているので、少し問題が解決している状態になっています。
それでも、コアな問題は変わらず、問題をぶつけた結果、2人の観点が微妙に異なり、聞いていて非常に参考になりました。
nitt-san (@nitt_san) | Twitterさんは、数多くの1on1をしており、状況の整理が早く、その辺りは自分に欲しいスキルと感じました。
水殿 (@midono_ap1) | Twitterさんは、過去に同じ状況になったことがあったそうで、その上での経験談も踏まえて話してくれました、経験談は、とても参考になります。
受けた後
問題点が整理されたんだから、あとはやるだけです。
nitt-san (@nitt_san) | Twitterさんが指摘した、早くやるべき課題であるセキュリティの件は1on1を受けた翌日には実行に移しました。
水殿 (@midono_ap1) | Twitterさんの前で、自分がやると宣言したAWSの件は1on1を受けた翌日にやり始め、最初の目標は2019/02/14にクリアしました。
↓クリアした時のツイートです。
今日は、デブサミに行ってないし、アフターや各勉強会に行ってないけど、業務で行ってたAWSの設定チャレンジは良い結果で終わり、良い勉強になりました
— さっぴー川原🍶 (@sapi_kawahara) 2019年2月14日
余談
喉の痛み
2人の1on1だけで4時間近く会話をしております、そしてファミレスという人の多いところで行ったので、喉が物凄く痛いです。
1on1を受けるときは、短期間で複数の人とやるのは、喉を守るためにやめようと思いました。
kiitok（キイトク）について
更に余談、自分が直前に、kiitok（キイトク）というのを受けており、その話も別でしてました。
kawahara-ci.hatenablog.com
2人とも気になるサービスであるが利用予定は無いそうです。
今後の運営方法とか、マネタイズなど、サービス運営者じゃないけど、そんな話題も出たりしてサービスを作り出す人ならではの話ができて楽しかったです。
kiitok（キイトク）α版を体験しました
TL;DR
- カジュアル面談を更にカジュアルにした感じです
- 仕事での疑問をぶつけられる
- メンターと話せる
alpha.kiitok.com
今のところ利用料金は無料です！
面談を迎えるまで
サイトに登録は、Facebook認証なので案内通り簡単でした、その後、より良い面談をする為に自分のプロフィールを登録していきます。
それなりの量が有りますし、面談相手をマッチングする為には必要な情報なのでしっかりと書いていきました。
関わったプロジェクトを２つ入力するのですが、自分の場合、関わったプロジェクトが二桁になるので、思い入れのあるところを抜粋して入れました。
その際に、希望するメンターと面談を希望する日を選択します。
三人まで選べます、第1希望、第2希望、第3希望みたいな感じになります。
自分はテクノロジーの点で悩みが一つあったので、エムスリー株式会社 エムスリーAIラボ所長 高木 悠造様を選択しました。
全て入力が終わると、面談日が運営側のFacebook Messenger知らせてきます。
面談を終えて
ここまで読んで、2日前にメンターみたいな登壇をしているくせにと言われるかもしれませんが、悩み多い自分なのでメンティーにもなりたいんです。
kawahara-ci.hatenablog.com
それに、自分ぐらいの年齢になると、メンターとメンティーを両方やると相乗効果がある！と思っているからです。
それと、テクノロジーの悩みで、それに長けている人（AIとか先端テクノロジーに知見がある人）が周りに居なく、その件に関して、ぶっちゃけトークが聞けました、言うなれば裏話ですね、ネットでググっても出てこない、それが聞けるのが本当に良かった。
あと、組織運営の話もしました。
テクノロジーリードをしている人が多忙なときの話、好きな仕事をやりたいが他人に任せる話とか、人を率いる人での立場と、やりたい仕事をしたいときのジレンマを聞けたり出来ました。
現場からの声があると納得できますね。
まとめ
自分としては良い面談でした。
このサービスに出会えて良かったです。
要望にも書きましたが、もっと多くの人と面談したいです。
おまけ
自宅で面談するときの注意です。
面談中に長女が割り込むという事が発生してしまいまして申し訳御座いません、面談は自分にとって良い気付きを得ることになりました、エムスリーAIラボ所長 高木 悠造様、ありがとうございました！
— さっぴー川原🍶 (@sapi_kawahara) 2019年2月6日
そして、このサービスに出会えたことに感謝！
kiitok（キイトク）https://t.co/yPghsF1I8f
おまけ２
kiitok（キイトク）のサイトを見るときに、開発者モードでコンソールを見ましょう！
翌日に面談レポートが到着
面談レポートが、翌日に届きました。
pdfファイルには、面談した内容が細かく書いてありました、想像以上に文字起こしされていてありがたいです。
音声データと、動画ファイルも有ります、聞き逃した事とかを再度聞き直せます！
「20代に送るエンジニアとしての生存戦略」という内容で登壇しました #spzcolab
誕生日登壇
2019年2月4日に、「20代に送るエンジニアとしての生存戦略」という内容で登壇しました！
2月4日は誕生日で、誕生日登壇になりました。
supporterzcolab.com
発表のスライドはこちらです。
登壇して良かった！
29名ぐらいと、思ってたより多くの人が聞きにいらっしゃいまして、とても感謝しております。
お聞き苦しい点もありましたが、発表内容も良かったと言ってくれまして、物凄く嬉しかったです。
懇親会では、多くの人と会話できました、色々と疑問をぶつけてくれて、これも感謝です。
質疑応答
・CTOを目指すのか？VPoEを目指すのか？
→人と関わるのが好きなので、VPoEかな。
・アセンブラ言語の違いがわからない。
→はい、説明に物凄く時間かかるので、全部省略しました。
一番違うのは、68000とR3000はビックエンディアンで、それ以外はリトルエンディアンなので、データの持ち方が全然違います。
それから、65系68系と、80系では命令体形が異なりますが説明しきれませんw
・IntelliJ系を勧める理由は？
→サポートが圧倒的に早い、言語の新バージョン対応も早い、2週間程度の差ですが、この差が開発に影響を及ぼすときもありますので、IntelliJ系を勧めています。
・今後のトレンドの変化を聞きたい。
→Reactとかフロント周りがトレンドになるかな、と言いましたが、訂正します、開発言語が沢山出てきたのと同じように、フロント周りも沢山の仕様が出てきて、どれが良いこれが良い、その辺りが多くの話題になる、そんな気がします。
・ゲーム開発ネタが聞きたい。
→懇親会で話しました、ここでは書きません、どこかで話す機会があればお話します。
・問
https://twitter.com/yoshitaku_jp/status/1092376183449112576?s=21twitter.com
→答
twitter.comgitも無い、ハードディスクも無い、フロッピーディスク、大きな編集をする時は、フロッピーディスクを丸ごとコピーしてやる、そのうちフロッピーディスクが増えすぎて、どれが最新版か判らなくなるwwww
— さっぴー川原🍶 (@sapi_kawahara) 2019年2月4日
#spzcolab https://t.co/AO0ijKMKlN
誕生日プレゼント
誕生日プレゼントをもらいました、ありがとうございました。
@KANEさん、元職場の仲間三人（@のすけさん含む）、@ぴらいさん、日本酒ありがとうございました。
@yumechiさん、@遠藤ヒズミさん、おつまみありがとうございました。
いい思い出になりました
みんなに祝ってもらって、良い誕生日でした！
