目的

1. S3の静的ページホスティング機能を使ってみたかった。
2. code~系のサービス、どれがどんなこと出来るのか分からないので使ってみたかった。

ので、今回SPAをS3に配置して参照出来るものを作成しました。

作成した仕組み

デプロイまでの流れ

1. ローカル端末からGithubへ作業ブランチをpush
2. Githubにて作業ブランチをmasterブランチへマージ
3. masterブランチへのマージをトリガーにCodePipeline起動
4. masterブランチのソースをCodeBuildに渡し、ビルド実行
5. ビルドされたものをホスティング機能を有効にしたS3バケットへ格納

構築

以下の通り構築した。

S3バケット作成

任意の公開バケットを作成し、静的ホスティング機能を有効にする。

CodePipeline作成

ソースステージ追加

「パイプラインを作成する」ボタンからパイプラインを作成していく。
ソースプロバイダにはGitHubバージョン2を選択し、自分のGitHubを接続可能にする。
GitHubとの接続が出来ればリポジトリなどがプルダウンから選択出来るようになるので、デプロイしたいものを選択する。

バージョンの違いについて参考

ビルドステージ追加

CodeBuildを選択し、「プロジェクトを作成する」を押下する。
buildspecファイルはGitから引っ張ってきたソースをビルドする為の設定ファイル。
今回はこちらを使用する。(後述)

デプロイステージ追加

デプロイ先のS3バケットを選択する。
資材はバケット直下に配置したい為、デプロイパスに/を入力する。
また、そのままではzipファイルが配置されてしまうので「デプロイする前にファイルを抽出する」にチェックを入れておく。

ソースコード準備

myappはアプリケーション用ディレクトリで、ビルドしたいソースはここに入っています。
CodeBuildで使用するbuildspec.ymlはルートディレクトリに配置します。

.
├── buildspec.yml
└── myapp

buildspec.ymlは以下の通り。

version: 0.2

phases:
  pre_build:
    commands:
      - if [ -e /tmp/node_modules.tar ]; then tar xf /tmp/node_modules.tar; fi
      - npm install --prefix ./myapp
  build:
    commands:
      - npm run build --prefix ./myapp
  post_build:
    commands:
      - tar cf /tmp/node_modules.tar ./myapp/node_modules
artifacts:
  files:
    - "**/*"
  base-directory: ./myapp/dist
cache:
  paths:
    - /tmp/node_modules.tar

動作確認

ローカルからソースコードをGithubにpushし、masterブランチにマージします。
すると、masterブランチの変更をトリガーにCodePipelineが実行開始され、しばらく待つとデプロイが完了します。

デプロイ完了後、S3のウェブサイトエンドポイントにアクセスしてウェブページが表示されれば成功です。

今回SPAはVue.jsを使って作成してみました。
Vueについては何一つ知らなく、どこかの記事を参考に勉強させて頂いたのですが参考記事がどこか分からなくなってしまい申し訳ないことを。。
ちなみにこのログイン画面はCognitoを利用していて、アカウントや認証関係の処理はcognitoのメソッドを呼ぶだけでOKだったので非常に便利でした。

まとめ

・codepipeline,codebuild便利！
・cognitoはしっかり理解出来ていないのでちゃんと勉強したい。
　セッション管理どうなってるの。IDプール何に使うのとか