Edited at

AWSのみを使ってサーバレス環境をつくる


そろそろぼくもSPA

当方、へっぽこエンジニアですが、モダンな開発に興味があるのと仕事で必要に迫られて、モダンなSPAを作ってみようと思います。PWAでサービスワーカー的なこともやりたい。

大きな方針は、「AWSを使い倒す」という点です。極力マネージドサービスを使いたい。ブラウザで開発したい。コードを書きたくない。そういうわけで、関連するサービスが広く浅く出てきます。

ちなみに、Cloud9っていうIDEを使いたいがためにシンガポールリージョンにしました。


AWS CodeStar

出発点はここです。CodeStarは、AWSが提供する、開発環境設定をいろいろやってくれる子らしい。

開始しようとしたら、IAMロールつくるよと言われた。OKします。

スクリーンショット 2018-09-07 17.14.12.png

テンプレートがいっぱい出てくる。作りたいのはウェブアプリケーションで、サーバレスでやりたい。Goわかんない。というわけでNode.js+Lambda一択です。

スクリーンショット 2018-09-07 17.18.13.png

リポジトリは、GitHubとCodeCommitから選べますがここはCodeCommitにしてみます。5人まで無料らしいよ。

スクリーンショット 2018-09-07 17.19.59.png

プロジェクトの詳細の確認として、こんな図がでてきました。全部AWS!わーい。

スクリーンショット 2018-09-07 17.21.02.png

ユーザが必要らしい。ふーん。

スクリーンショット 2018-09-07 17.27.00.png

コードは何で書きますか? Cloud9にしてみます。

スクリーンショット 2018-09-07 17.27.11.png

むむ、EC2?と思いますがこれはCloud9の実行環境の選択です。ケチってt2.nanoにします。自分のPCにいろいろ入れるのめんどいですし、これは良い仕組み。

スクリーンショット 2018-09-07 17.31.06.png

プロジェクト作成完了!

スクリーンショット 2018-09-07 17.46.41.png

作成されたリソースはこちら。めっちゃできてる。

スクリーンショット 2018-09-07 18.49.13.png

この時点で、すでに「〜-app」っていうS3バケットにサンプルのHTMLファイルなどが置かれています。

さらに、そのバケットのpublic/index.htmlを表示するためだけのLambda関数が作成されており、

そのLambda関数を公開するためのエンドポイントがAPIGatewayで作成されています。

APIGatewayのエンドポイントURLはCodeStarのダッシュボードにありますので、アクセスしてみましょう。

スクリーンショット 2018-09-07 18.34.51.png

これは、S3でpublic/index.htmlを開いても全く同じものが見れますが、違うのはAPIGatewayのエンドポイントではHTMLしか公開されてない、という点です。S3の方は、パスを書き換えて別フォルダに格納されている画像とかを参照することが出来ますが、エンドポイントではそれはできません。

このようにLambdaを介するメリットはよく理解できていません。S3直接公開よりもそのほうがいいことはなんだろう?

さて、なにはともあれ、 「コーディングの開始」をクリックするとおもむろにCloud9が立ち上がります。シームレス感すごい。

スクリーンショット 2018-09-07 17.48.35.png


コミットからデプロイまで

アプリはなにもいじってないけれど、フレームワークをインストールしたので本番環境に反映してみましょう。

どうやればよいのだ? CodeCommit、CodeBuild、CodePipelineやらいろいろあってよくわからん!


簡単だった

gitでリモートリポジトリにpushするだけで、自動的に変更がS3にまで反映されます。

(masterを直接やっちゃってるけど、本来はbranch切った方がいいです)

$ cd ~/environment/spa-test

$ git add .
$ git commit -m "hoge"
$ git push

簡単すぎじゃない?と思いましたが、これがCodePipelineの威力みたいですね。


  1. Cloud9で編集、commit、push

  2. CodeCommitのmasterの変更をCloudWatchが自動検知しトリガー

  3. CodeBuildでビルド

  4. CloudFormationでデプロイ

これをやってくれるわけです。CodeStarが、自動的に設定してくれていたのです。

ソースをよく見ると、buildspec.ymlというファイルがあります。これはCodeBuildの設定ファイルです。この中には、"aws s3 cp --recursive ほげほげ"という記述があります。これがCodeBuildの設定ファイルで、デプロイ時にS3にファイルをコピーしろ、という設定なわけですね。


buildspec.yml

version: 0.2

phases:
install:
commands:
# Install dependencies needed for running tests
- npm install

# Upgrade AWS CLI to the latest version
- pip install --upgrade awscli
pre_build:
commands:
# Discover and run unit tests in the 'tests' directory
- npm test
build:
commands:
# Use AWS SAM to package the application by using AWS CloudFormation
- aws s3 cp --recursive public/ s3://$WEBSITE_S3_BUCKET/public/ --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
- sed -i -e "s|assets/|$WEBSITE_S3_PREFIX/public/assets/|g" public/index.html
- aws cloudformation package --template template.yml --s3-bucket $S3_BUCKET --output-template template-export.yml

artifacts:
type: zip
files:
- template-export.yml


その他、sed のところで相対パスをS3の絶対パスに書き換えたりしています。前述したようにAPIGatewayのエンドポイントではindex.htmlしか公開されてないですから、画像などを参照するためにはこれが必要ですね。

CloudFormationのデプロイでは、Lambda関数のデプロイが行われます。ここでは設定ファイル template.yml が使われます。


続く

環境設定は概ね出来ました。

今度はアプリの中身の話をしたいです。