クラウドサービスとして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/
