カップラーメンを待ってる間に出来るVue.js実行環境 #Amplify #Vue.js

はじめに

CX事業本部でマネージャーをやってますアンディです。最近とある案件でVue.jsを触り始めました。Vue.jsのCD環境を作ってたらカップラーメンが出来上がるのを待ってる間に構築出来てしまったので手順を共有したいと思います。

作り方

Amplifyの設定（1分）

AWSのAmplifyコンソールを立ち上げて、「アプリを作成」を押下します。

Gitプロバイダを選択します。ここではGitHubを選択します。

 

GitHubの認証画面が表示された場合は、GitHubアカウントを確認しつつ「Authorize aws-amplify-console」を押下しましょう。

リポジトリを選択します。まだ用意できていない方はGitHubにSign inして作りましょう。

 

ビルドの設定はひとまずそのままで。

 

「保存してデプロイ」ボタンを押下してアプリを作成しましょう。

Visual Studio Codeの設定（1分）

拡張機能「Vetur」をインストールします。ESLintも入れたいところですがこれだけでも十分です。

VSCodeがインストールされていない場合はケトルが無いのと一緒なのでこちらへ(=ﾟωﾟ)ﾉ

GitHub Desktopの設定（2分）

GitHubのリポジトリをブラウザで表示して「Open in Desktop」を押下します。

GitHub Desktopがインストールされていない場合は箸が無いのと一緒なのでこちらへ(=ﾟωﾟ)ﾉ

これでCD環境の準備完了です！簡単でしたね！ちょうどどん兵衛を作っていたので5分以内で完成しました。

デプロイしてみる

Vue公式のチュートリアルを参考にしながらHello Worldを出してみましょう。

リポジトリにPushします。

しばらく待ちましょう・・・

検証まで進んだらURLをクリックするとデプロイしたWebページが表示されます。

無事表示されました！Amplifyを使用することで非常に簡単にCD環境が構築できました。