新プログラミング言語『Zero』を開発しました! 本サイトの記事数は「589」!!

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

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

 

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

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

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

 

僕のプロフィールはこちら

 

 

前提

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

 

 

Vueビルド

上記コマンドをアプリのルートで実行すると、「dist」っていうフォルダができます。

distフォルダの中にビルドされた成果物ができますが、これをS3にアップロードしていきます。

 

 

S3設定

まずはS3の設定から。

バケットの作成

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

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

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

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

 

 

バケットにアップロード

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

ドラッグ&ドロップでいけます。

 

 

ファイルアップロード

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

 

 

Advertisement

 

CloudFront設定

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

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

 

CloudFront

CloudFront2

CloudFront3

CloudFront4

これでどうよ!

 

 

ただのダッシュボード

出た!!

URL:「https://d3upe524veut2d.cloudfront.net/」

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

 

 

まとめ

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

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

ってことでさいなら。

Travelerを知らないの?