概要
Vueで作成したプロジェクトをAWS Amplifyを用いて爆速でホスティングする
手順
vueのビルド
まずは作成したVueのプロジェクトファイルを静的ファイルにビルドします。
npm run build
上記のコマンドを実行すると、プロジェクト内に「/dist」というフォルダができてそこに静的ファイルとして出力されます。
ホスティングする際はこちらのファイルを使います。
AWS Amplifyでホスティング
AWSのコンソール画面に入り、Amplifyのページに遷移します。
そして、真ん中にある「使用を開始する」を選択
その後、右側のAplifyホスティングの方の「使用を開始する」を選択
開始方法として選択肢が出てくるので好きなものを選びます。
今回自分は手元のコードをアップロードしたいので「Gitプロバイダーなしでデプロイ」を選択しました。
名前と環境名を入力し、先程作成した「/dist」フォルダをドラックアンドドロップします。
最後に「保存してデプロイ」を選択して、画面に出てくるURLを踏むと
こんな感じで手元のVueプロジェクトがホスティングできます！
早い...
細かい設定とかしたい場合はS3のほうがいいケースもあると思うのですが、特に制約など設けないのであればこの方法が早そうな気がしました！