『自由力』を身に付けるサイト「リバトレ」も見てね!!

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

悩んでいる男の子

CloudFrontとS3を使ってアプリをデプロイしたいんだけど、具体的な手順が分からないな。。

こんな悩みを解決します。

  • 本記事の内容
  • CloudFrontとS3を使ったアプリのデプロイ方法
  • S3の詳細設定
  • CloudFrontの詳細設定
  • 本記事の執筆者
プロフィール
どこの写真だよ
  • 長身ガリガリ自称イケメン(1993/4/1生)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 副業(物販)5か月目で月利30万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、投資を細々とやっています。
  • 物販は彼女と楽しみながらやってます!

今回は、AWSの「CloudFront+S3」を使ったアプリのデプロイ方法を解説します。

今回はVueアプリをデプロイしますが、Angularでもやることは同じです。

目次

前提

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

Vueビルド

npm run build

上記コマンドを実行すると、「dist」というフォルダが作成されます。

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

S3設定

まずはS3の設定から行います。

バケットの作成

S3でバケットを作成します。

バケット名は「Vueで作成したアプリ名」を指定し、リージョンは「アジアパシフィック(東京)」にします。

バケット名は一意でなくてはならないので、既に使用されているものは指定できません。

バケットにアップロード

ビルド成果物をアップロードします。

ファイルアップロード

上記のようになっていればOKです。

CloudFront設定

次に、CloudFrontの設定を行います。

いずみん

設定を間違えても後から修正可能なので、ビビらずいきましょう!

CloudFront
CloudFront2
CloudFront3
CloudFront4

上記のように設定します。

ただのダッシュボード

画面が表示されればOKです。

まとめ

今回は、AWSの「CloudFront+S3」を使ったアプリのデプロイ方法を解説しました。

分かってしまえば意外と簡単でしたね。

ではまた!

バケットの作成

この記事が気に入ったら
フォローしてね!

シェアするんやで!

~ リバトレ ~

お金や副業に関する情報を発信しているよ!

この記事を書いた人

いずみんのアバター いずみん 自由力発信おじ

【自由力発信】うさんくさ笑 | 副業物販で5ヶ月目に月利30万円達成⇨脱サラ予定 | 物販(アパレルせどり)・アフィリエイト・投資で自由になるための情報を発信中?笑 | 元エンジニア | 保有資格約20個

関連記事

コメント

コメントする

目次
閉じる