既存のキーペアがなかったので、新しくキーペアを作成しました。以下のコマンドでキーペアに権限を与えます。下記コマンドでssh接続できます。これで一応ec2インスタンスにssh接続できました。ここにGitとかNodeとか入れてアプリケーションを作っていくことができます。次回はECSを使ってみたいです。2019ts-nodeを使ってTypeScriptでexpressを動かす環境を構築しました。今回は簡単にts-nodeを使って動かします。このような感じにします。つける形で対処しています。こんな感じにしました。起動してみるとエラーが出ました。モジュールのインポートのところでコケています。指定するとうまく行きました。2019Reactのプロジェクトで作業をしているとコンポーネントクラスを毎回コピペで作るのが辛くなってきます。コードジェネレータでワン・コマンドで作れないかなーと思って探してみるとありました。これを使うとテンプレートを記述しておけば簡単にコンポーネントの雛形を作ってくれます。ファイルも生成したいです。つくのがテンプレートファイルです。2019Emotionを使用していて、イケてる感じでCSSをリセットする方法はないかなーと思い探してみました。使おうと思いましたが、cssをimportする必要がありcss-loaderの設定をしないといけないのでちょっと微妙でした。いうライブラリを見つけました。元をたどるとこちらのreset-cssを参照しているようです。2019LPなんか作るときにこういったSNSボタンを埋め込むことがあります。Reactのサイトで埋め込もうと思ったらReactのライフサイクル上でscriptの読み込みなどを発生させる必要があるので、少し面倒なところがあります。LINEの友だち追加ボタンの埋め込みコードは↓ここから取得できます。今回はこのボタンを埋め込みます。埋め込みコードはこんな感じ。要素がちゃんとマウントされた状態でscirptを読み込む必要があります。タグが記述できるライブラリです。Splittingを実装したのでその作業ログです。ようなサブページにアクセスした後もSPAのような感覚でページ遷移できるようにしたいです。各ページで必要なjsファイルだけとってきてページ遷移するときに次のページで必要なjsファイルだけとってくるような構成を作ってみたかったので、やってみました。最初のアクセスでページのロード時間を短くしたいのです。スマホの回線環境とかだとSPAを開こうとしたときにたくさんページがある場合に初期表示に不要なファイルのロードも走るので時間がかかってしまいます。ページが見れるようにしたいです。ここのホスティングしているエンドポイントを直接CloudFrontのOriginsに設定します。デフォルトではバケットのurlになっています。CloudFrontのOrigins設定を変更します。ここに先程のホスティングしているエンドポイントを入力します。なるのでしばらく待ちます。2019静的サイトを作っていて結構思うことなのですが、こういうこと↓が結構あります。これらを回避するために、デプロイする前に全ページ確認する作業をやらなくてはいけません。これはかなり面倒です。サイト全体のスクショを開発前と開発後で差分を抽出して、意図しない見た目の変更をキャッチできるようにすれば確認する手間が減ります。そんな手間を省くためにサイト全体のスクリーンショットの差分を取得できる環境を作ってみました。2019Jestのテスト環境をTypeScriptで動かしたかったのでメモ。テストコードでも型安全に書きたいです。必要なモジュールをインストールします。プロジェクトに追加します。テスト対象になるようにします。配下にテストコードを置きました。実行スクリプトは下記の通りです。入れることでテストコードを監視して再実行してくれます。テストコードを追加すると、こんな感じのエラーが出ます。2019個人的なプロジェクトでejsで作られたS3上の静的サイトをGatsbyJSに移しています。その過程でリダイレクトさせる必要が出てきました。S3でリダイレクトさせるには以下の2つ方法があります。今回はリダイレクションルールを使います。htmlページをディレクトリにリダイレクトさせたいです。ルールにはこのように記述します。