フロントエンドエンジニアのAWSとの付き合い方について
この記事は、ex-handslab Advent Calendar 2018 16日目の記事です(大分遅れています)。 私が以前在籍していたハンズラボはAWS関連技術に強みを持った会社だったので、今回はAWS関連の小ネタを書きたいと思います。
対象の読者
ざーっと、書いてみて以下のような方が対象の読者になるのではないかと思っています。
※ 普段からAWSを使って開発している人にとっては当たり前の内容ばかりかもしれないです
この記事を書こうと思ったきっかけ
フロントエンドエンジニアと一口に言ってもいろいろなバックエンドを持つ人がいる
ここでは、言葉の定義を深掘りすることはしないが、以下のようにフロントエンドエンジニアと言ってもいろいろなバックエンドを持つ人がいるなぁという印象を受けている。
- サーバーサイドインジニア
- Webコーダー
- デザイナー
- プログラミングスクールを経てフロントエンドエンジニアとして働き始めたばかりの人
- などなど
自分自身も、新卒で入社した会社ではWindowsのネイティブアプリケーションの開発/インフラの保守のような仕事を行っていた後、exしたハンズラボでは、AWSのマネージドサービス/アプリケーションサービスを使い、主にフロントエンド仕事をしてきた経緯がある。
フロントエンド/バックエンドともに専門性が増している
フロントエンド(特にSPA)フレームワーク/ライブラリのが普及していることや、ツールチェーン周りのエコシステムの発達などで、フロントエンドエンジニアの備範囲が広がっている印象がある。 一方サーバーサイドインジニアもまた、マイクロサービスアーキテクチャ、AWSなどのクラウドサービスに依存するアプリケーションサービスのキャッチアップなど、それぞれの領域で求められる専門性が増している印象がある。 専門性と同時に多少性もましている気がしていて、これに関してはすごく共感できる記事を書いている方がいた。
今回は、上記を踏まえてAWS上に構築されるWebアプリケーションを開発するフロントエンドエンジニアが最低限知っておきたいAWSサービスに関する内容をざっくりまとめていきたいと思う。
関わりが深そうなAWSサービス一覧
フロントエンドエンジニアと関わりが深そうなAWSサービス一覧とユースケースを並べていく。
S3
Cloud Front
- Webフロントエンド配信CDNとして
- エッジキャッシュサーバーを利用してオリジンからのレスポンスをキャッシュする
- オリジンのアクセス削減
- エッジサーバーを利用するため地理的に離れた環境でも高速な読み込みを実現
- 上記で挙げたS3と合わせて使われることが多い
参考
Lambda (Lambda@Edge)
- SSRのレンダリングサーバとして使う
- Lambda@Edgeでコンテンツヘッダーのカスタマイズ
- CloudFront の Behaviorに対してLambda@EdgeをトリガーすることでCloudFrontのレスポンスヘッダーを操作することができる
- セキュリティ関連ヘッダー(CSPなど)の不可やキャッシュコントロールなども行える
参考 https://dev.classmethod.jp/cloud/aws/lambda-edge-design-best-practices/ https://tech-blog.abeja.asia/entry/front-engineer-re-invent
Route53
- S3 + CloudFrontで配信するコンテンツに独自のDNS名を付ける必要がある際に利用する
Cognito
- フロントエンドアプリケーションとAWSだけで完結する認証/認可
API Gateway
Code Build
- フロントエンドアプリケーションのビルド・テスト
circle CIを使ったことがあれば、同じ感覚でyamlを書けばAWS上でCodeのビルド・テスト(デプロイ)が可能 ソースコードのホスティングまで含めてAWSで行っている場合、AWSに閉じた環境で一貫したフロントエンドアプリの開発・デプロイができるので便利っぽい
AppSync
Amplify Console
- WebフロントエンドアプリケーションのCI/CDを簡単に構築出るサービス
- 今年のre:Inventで発表されたらしい
参考
https://dev.classmethod.jp/cloud/aws/amplify-console/
フロントエンド周りのAWS構築/運用は誰がやるのか問題
上記で挙げたようなフロントエンドアプリケーションを構築するために利用するAWSサービスは様々。 チームの規模感なんかによっても、変わってくるとはいもうけど、AWS特有のアプリケーションサービスが多いので、インフラの管理を行うチームでは対応しきれずフロントエンドエンジニアがここらへんの面倒を見るパターンも多そうというという印象。 AWSに限らず、ある程度の規模感をもって開発しているチームでフロントエンド配信CDNの運用とかをどうやっているかは単純に興味がある。
最後に
ここまで挙げてきたように、AWSではフロントエンド開発にも欠かせないツールを数多く提供している印象。 上記で挙げたようなアプリケーションサービスはサーバーレスアーキテクチャの文脈で話に出ることも多い。 サーバーサイドの開発経験がないフロントエンドエンジニアでもこのようなAWSサービスを組み合わせることで簡単にWebアプリケーション全体を構築することができたりする。
(とりあえず書いてみた感が否めないのとかなり遅れてしまったけど、書けたのでほっとしている😇)
