記事一覧
ブログをNext.jsで作り直した
WordPressで作ったこのブログ、地味にお金がかかる
このブログは、以前なんとなくWordPressで作ったものなのですが、 いかんせんインスタンスをずっと立ち上げっぱなしなので、地味にお金がかかります。
そろそろMathQのインフラとかを見直さないといけなくなってきていて、 ついでだからブログも静的サイトに作り変えて節約しようかと思いました。
フレームワークは何にしようかと考えて、勉強がてらNext.jsを使うことにしました。
React・Next.jsの勉強に長い時間を費やす
WebサービスをCloudFormation化してみた
AWSのリソース管理が大変すぎる
私が作ったWebサービスや、このブログはAWSで運用しています。
今まではほとんど手動でリソースを作ったり削除したりしていました。
ステージング環境など、何度も作ったり壊したりするものはAWS CLIやシェルスクリプトを使ってはいましたが、 それだけだとわかりにくすぎて、大変すぎました。
そんなに規模的には大きくないのに、自分で作っているのに、どこに何があるのか、全体像が把握できません。 そんな中で今までだましだましやってきました。
そうだ、CloudFormationを使おう
そんな中、CloudFormationという便利なものがあるらしいということを知りました。
フェイルオーバーの方法を変えてみたが、あまり良くなかったかも
以前まで
私の作ったウェブサービスでは、メンテナンス中の表示を出すのに、 以前まではRoute53のフェイルオーバー機能を使っていました。
これを使うと以下のように、普段はALBにルーティングされるが、 コンテナが落ちるとメンテナンス画面用S3にルーティングされるようにできます。
しかし、この方法はDNSキャッシュが悪さをしたり、反応が悪かったりしていまいち使い勝手が悪かったです。
CloudFrontを使ってみた
そこで、CloudFrontを間に挟み、CloudFrontのError Pages機能を使うことにしました。
Promiseとasync/awaitについて整理した【JavaScript】
JavaScriptの非同期処理は難しい
JavaScriptの非同期な処理を書くのは頭がこんがらがりますよね。
初心者のころとかは特に、文が実行される順番とか、タイミングがどうなっているのかさっぱりわかりませんでした。
でもこれがまたよく使うので困ったものです。
最近でこそ慣れてきましたが、まだPromiseとかが入り乱れる処理を書くと訳が分からなくなるので、 この辺で一度整理しておこうと思いました。
今回は、あまり例がよろしくないかもしれませんが、クリックイベントを非同期処理に見立てていろいろ試していこうと思います。
ボタンがクリックされるまでの時間を非同期処理の返り値に見立てます。
10秒以上だったときはエラーにして、エラーハンドリングも試すことにします。
6年前のルータを買い替えた結果
IPv4の通信が安定しない…
最近、よくスマホの通信がWi-Fiなのに頻繁に切れるようになっていました。 おかしいと思って調査してみたら、pingコマンドのレスポンスが異様に遅く、時々途切れていました。
不思議なことに、ping6コマンドだと問題はありませんでした。
ネットワークの知識が乏しいなりによくわからず調べてみた結果、 どうやらIPv4通信がPPPoEなる方式で行われているため遅くなっているらしいとわかりました。
IPv4通信をPPPoEでなくIPoEで行うIPv4 over IPv6というものがあるようですが、どうやら比較的新しい技術らしいです。
確かに使っているルータは6年以上前に購入したもので、調べてみると対応していませんでした。
ChromeのDNSキャッシュクリアがちゃんと動かないとき
DNSフェイルオーバーが効かない
私の作ったWebサービスには、メンテナンス中にメッセージを表示するためにDNSフェイルオーバーを設定しています。 ところが、メンテナンス中に時々DNSフェイルオーバーが効かなくなることがありました。
ALBのヘルスチェックは問題なくhealthyになっているのにもかかわらず、 Chromeからアクセスしてもメンテナンス中のメッセージが表示されてました。
ChromeのDNSキャッシュが悪さをしている…？
色々調べて、目星はついていました。 どう考えてもDNSキャッシュ周りが悪さをしているとしか思えませんでした。
GitHub PagesをVue.jsで作った
GitHub Pagesの存在をいまさら知った
なんとなくTwitterでいろいろ見てたら、GitHub Pagesなるものがあるというのをいまさら知りました。 どうやらGitHubのアカウントがあれば簡単に静的ページを作れるらしいです。
ということで適当に作って今まで自分が作ったサイトへのリンクとかを貼っておくことにしました。
→ I.T.のGitHub Pages
GitHub Pagesをつくろう
作り方は簡単です。リポジトリのSettingsの下のほうにあるGitHub Pagesなる項目をいじればできます。
DjangoでLINEログインを実装する
ソーシャルログインはLINEが多いらしい
私が作ったMathQというWebサービスがあるのですが、今までは開発時間短縮のため、 Googleアカウントでのログインしかできませんでした。
でも調べてみるとソーシャルログイン使用率が高いのはLINEらしいということで、 LINEログインもできるようにしようと思いました。
social-auth-app-djangoを調査
ソーシャルログインにはsocial-auth-app-djangoを使っているので、LINE対応できるか調べてみました。
ドキュメントとかには書いてなかったですが、ソースコードを見る限り対応してるっぽいので試してみたらできました。
WordPressでブログを作った
MathQの宣伝と、自分の経歴とかスキル紹介のために、ブログをWordPressで作ってみました。 ちなみにWordPressもPHPも初体験なので、勉強も兼ねています。
EC2でサーバを立てる
調べると、WordPressがいい感じに入っているAmazon Machine Imageがあったのでそれを使うことにしました。 WordPress Certified by Bitnami and Automattic という物です。Nginx入りの物もありましたがいらないので普通のを使いました。
EC2インスタンスを立ち上げて、ALBとか証明書とかをセットアップして、いろいろ設定したら意外と簡単にできました。
MathQができるまで
MathQというWebサービスを作りました。数学や算数の質問が投稿できるサイトです。よろしくお願いします。
なんで作ったか
今までWebサービスみたいな、不特定多数に公開するアプリを作った経験がなかったからです。
できる限り楽をしたいので、コンテンツをユーザが作るタイプ（プラットフォームっていうんですかね）で、 金銭のやり取りとか発生しないようなものを作れないかな、と考えてたら思いついた感じです。
でも仕事やりながらだと時間とやる気が足りないので会社を辞めることにしました。