【Laravel & AWS】JavaScriptの自動ビルドとアプリケーションサーバのオートスケールを設定する【４日目】

AWSのサービス縛りでコスト最適で弾力性のあるLaravelアプリケーションのインフラを作ろうという企画の４日目です。
前回はstorageフォルダ周りの調整とHTTPSに対応しました。
今回はフロントのリソース(node, npm)の自動ビルドに対応して、アプリケーションサーバがオートスケールする様にします。
ちなみにやりたい事の一覧は以下の通り（破線は完了した物）

~~アプリケーションサーバの構築~~ (１日目)
~~ビルド・デプロイの自動化~~ (１日目)
~~RDBに接続できる~~ (２日目)
~~cronを使える様にする（Laravelのタスクスケジュールのトリガー）~~ (２日目)
~~HTTPS対応~~ (３日目)
~~storageフォルダにシンボリックリンクを作成する~~ (３日目)
~~storageをEFSに置き換える~~ (３日目)
フロントのリソースの自動ビルド(node, npm)に対応
アプリケーションサーバのオートスケール
テストの自動化
Redisに接続できる
リソースをCDNから配信する
RDSのバックアップ／リストア
RDSの容量のオートスケール
ビルド完了時のslack通知

環境を作り直すとドメインの名前解決ができなくなる問題

今日も作業しようと思って、環境を立ち上げたらアプリケーションに接続できなくなってました。
どうやらロードバランサーが作り直されて名前が変わってAレコードのALIASが解決できなくなった模様。
Route53のAレコードを再設定した。
しかし、それでも接続できない。
ローカルのキャッシュが邪魔してるっぽいので以下のコマンドで削除する。
無事、接続できた。

sudo systemd-resolve --flush-caches

CodeBuildでフロントのリソースを自動ビルド(node, npm)できる様にする。

まずはローカルでscssを追加した。
確認するとこんな感じ。
文字が赤色になっていればscssがビルドできて、ちゃんと読み込めている事の証明になる。

とりあえずBeanstalk環境にデプロイする。
まだscssのビルドの設定をしていないので、cssが存在せず、黒字のまま。

Beanstalkでトップページを表示している図。scssがビルドされていないので黒字のまま。

CodeBuildでフロントのリソースのビルドを行うために、buildspec.ymlにnodeのランタイムとnpm関連のコマンドを追加する。
ランタイムを複数扱えるらしく、数行足すだけで出来ちまうんだ😎

phases:
  install:
    runtime-versions:
      php: 7.3
      nodejs: 12
  build:
    commands:
      - composer install
      - npm install
      - npm run prod
      - rm -rf node_modules
artifacts:
  files:
    - '**/*'

改めてBeanstalk環境で確認する。
無事、赤文字が表示された！（フロントのビルドが出来ている）