aws amplifyを使ってみた|vue cliのプロジェクトをhosting機能を使って公開

最終更新日:2020年10月28日 未分類

クラウドサービスとしてfirebaseを愛用していたが、さらに効率よくアプリを作れるサービスとしてawsの存在を知り、使ってみることにした。

AWS無料アカウントの取得

アカウントの取得から請求アラート・アラームの設定など基本的なことは、こちらのページを参考にして設定した。

https://note.com/mc_kurita/n/n6d93b62fee28

vueでプロジェクト作成

まずは、vue createでローカル環境にamplify-first-testというプロジェクトを作成する。

念の為に、開発サーバーで表示を確認しておく。

問題なさそう。

Github に新規リポジトリを作成

githubにamplify-first-testというリポジトリを作成する。

ローカルのリポジトリを初期化し、最初のコミットを行う。

git init
git add --all
git commit -m "first commit"

リモートリポジトリと紐付けを行い、pushする。
git remote add origin https://github.com/yukito234/amplify-first-test.git
git push -u origin master


 

Amplify CLIのインストール

Amplify CLI をグローバルインストール.

インストールされたことを確認。

AWSアカウントの紐付け

amplify configureを実行。

ログイン後、regionを選択。

ユーザ名はそのまま。

管理画面からプロンプトに表示されていたユーザを追加。

「次のステップ:アクセス権限」をクリック.

既存ポリシーを直接アタッチが選択されているので、「AdministratorAccess」のポリシーがチェックされていることを確認し、そのまま「次のステップ:タグ」をクリック。

何もせず、「次のステップ:確認」をクリック。

「ユーザーの作成」をクリック。

これでユーザの生成が完了。

コマンド画面に戻ってenterキーを押す。

accessKeyIdに、先ほどのIAMユーザ作成完了画面のアクセスキー IDを貼り付け、

secretAccessKeyにシークレットアクセスキーを貼り付ける。

後は、Profile Nameにプロジェクト名を入力してenter。

secretAccessKeyに誤って、accessKeyIdを貼り付けてしまったのでお気をつけください。

Amplify アプリの新規作成

amplify initでAmplify プロジェクトを作成、初期化する。

必要事項を選択していく。

 

続いて、AWSの管理画面にて、すべてのサービスからAWS Amplifyを検索して実行すると、以下のように先程のアプリが作成されていることがわかる。

CloudFormationでは、新規スタックが作成されている。

S3には構成情報のファイルが作成されている。

vueアプリをデプロイする

amplify hosting addのコマンドを実行。

以下のように選択する。

自動でAWS Amplifyの管理画面が起動する。

すでにgithubにvueアプリをpushしてあるので、そのリポジトリと連携させる。

 

 

以下の画面で少し待つと、プロビジョン、ビルド、デプロイ、検証の順番に緑色のチェックが入っていく。

 

コンソール画面に戻り、Enter を押す。

デプロイ先のURLが表示されるので、実際にアクセスしてみる。

アクセスはamplifyの管理画面にリンクが記載されているので、そちらをクリックした方が早い。

 

vuecliでプロジェクトを作成したときの初期画面が正しく表示された。

 

まとめ

今回は、vuecliのプロジェクトをamplifyでデプロイするところまでを行った。

amplifyは様々な機能があるので、少しずつ使って慣れていきたい。

参考サイト

・amplify全体に関して

https://qiita.com/yone_suke/items/b2a0334b36ac5de4f4f8#2-4-vuejs-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9

https://qiita.com/Junpei_Takagi/items/f2bc567761880471fd54

https://qiita.com/drafts/ac1b99df926493e0fa13/edit#1-5-develop-%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%82%82%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B

・amplify initに関して

https://qiita.com/rubytomato@github/items/5d9b6e184b615f974f28

https://devtab.jp/entry/internal/122

https://dev.classmethod.jp/articles/aws-cli-install/

・amplify hostingに関して

https://microcms.io/blog/frontend-amplify-console/

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です