【学習記録】VueのコードをS3に配置

今日はS3上にVue.jsのコードを置く方法を練習しました。
いまいちフロントエンドのコードの扱いのベストプラクティスがわかってないので、手を動かしながらいろんな記事読んで知見深めていきます。

とりあえず想定通りにS3にアクセスしてページが表示されるところまでできたので良かったです。

やったこと

  • 以下のコマンドを実行して、ローカルでVue.jsのコードをビルドする
npm run build

上記コマンドを実行することで、ローカルにdistディレクトリが作成され、その中にindex.htmlやCSSファイルなどが生成されている。(Vue.jsのコードを公開用に最適化したもの?詳しい内部動作は要勉強)

S3の操作は基本的にこちらの動画を参考にして行いました。
今のAWSのUIは動画と違うみたいですが、同じ操作で問題なく動きました。

www.youtube.com

S3の操作でやることは以下

・アクセス許可の項目で「パブリックアクセスをすべて ブロック」をオフにする ・バケットポリシーで読み込み可能にするJSONを貼り付けて設定

次はS3とECSの通信上手くいくか試してみます。