前回は Vuex の雛形のプロジェクトを作成した。
そこで次は、 Terraform を使用して、S3 の設定を行い、デプロイできるようにしたいと思う。
Terraform の設定
まずは、Terraform の環境構築。最初にTerraform のバージョンを切り替えられるように tfenv を導入する。
$ brew install tfenv
そうしたら、terraform のプロジェクトを作成し、そのディレクトリで terraform の最新版を使用するように以下のコマンドを実行する。
$ tfenv install latest
$ tfenv use latest
現時点 (2018/03/17) だと、v0.11.4 がインストールされる。そして、最新版を使用するようにする。 一応、terraform の version を固定するため、.terraform-version を作成。
$ echo 0.11.4 > .terraform-version
aws を使用するため、main.tf を作成し、以下の内容を記述する。
これを実行させるためには、あらかじめ環境変数に以下の3つを指定しておく必要がある。 （これらの環境変数の設定は、こちらを参照。）
- AWS_ACCESS_KEY_ID
- AWS_SECRET_ACCESS_KEY
- AWS_DEFAULT_REGION
terraform init を実行する。
実行すると、aws 用のプラグインがダウンロードされる。
ここで、terraform apply を実行すると、ローカルにterraform.tfstate が作成される。
複数人で開発する場合は -backend=s3 などのオプションを
使用して全員が同じファイルを参照する必要があるが、ここでは簡略するため、その設定を行わなかった。
公開用のバケットを作成
Terraform の設定が終わったので、Javascript などをデプロイし、公開するための S3 のバケットを Terraform を使用して、作成する。
これで、一応、html などを作成し、S3 へアップロードすれば見られるのだが、URL が長い。
そこで、Route53 を使って、CNAME を設定し、分かりやすい URL にする。（ここでは、 learnjs.mzumi.com とした。）
デプロイ設定
最後に作成した Javascript などを S3 にアップロードする方法なのだが、書籍の方ではスクリプトを作成してデプロイしている。
その内容は aws-cli のコマンドなので、 内容通り、 aws s3 ... などのコマンドを打てば良いのだが、ちょっと面倒。
そこで、もっと簡単にデプロイできる方法はないかどうかを調べたところ、 S3 へデプロイできる webpack のプラグイン があったので、こちらを 使用するようにした。
$ yarn add webpack-s3-plugin
でインストールし、frontend/build/webpack.prod.conf.js に設定を記述した。
これで、
$ yarn build
を実行すると、Javascript などが生成され、同時に S3 へデプロイされるようになる。