やっほー
バケットの作成

【AWS】CloudFront+S3でアプリをデプロイする方法

  • 2020年1月25日
  • 2021年3月15日
  • AWS
  • 190view
AWS バケットの作成

VueやAngularで作ったアプリを公開できると楽しさ倍増

ってことで、AWSの「CloudFront+S3」を使って、ビルドしたアプリを公開するところまで行きマックスオリックス。

今回はVueアプリを公開してみますが、Angularでもやることは同じです。

前提

  • AWSアカウントがあること

Vueビルド

上記コマンドをアプリのルートで実行すると、「dist」っていうフォルダができます。
distフォルダの中にビルドされた成果物ができますが、これをS3にアップロードしていきます。

S3設定

まずはS3の設定から。

 

バケットの作成

S3でバケットを作成しますが、重要なのはここだけ。

バケット名は「Vueで作成したアプリ名」を指定します。

リージョンは「アジアパシフィック(東京)」でいいです。

バケット名は一意でなくてはならないので、使われているものは指定できません。残念。

 

バケットにアップロード

先ほど作成したビルド成果物をアップロードします。

 

ファイルアップロード

こんな感じになっていればOK。

CloudFront設定

適当に設定していきます。

あとで変えられるし、なんとかなるさ。

 

CloudFront

CloudFront2

CloudFront3

CloudFront4

これでどうよ!

 

ただのダッシュボード

出た!!

CloudFrontのデプロイが終わってもすぐには見れないっぽいっす。

サイトはこちら

まとめ

ドメインはダサいですが、公開できるとどこからでもアクセスできるので嬉しいっすね。

モチベーションも上がります。

ってことでさいなら。

バケットの作成
フォローしてもらえると泣いて喜びます