LearnJS を Vuex, Golang と Terraform で実装してみる (2)

前回は 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 へデプロイされるようになる。

Contents

comments powered by Disqus