コンテンツへスキップ
ホーム > Tech > Amplify Vue Workshop やってみた！

Amplify Vue Workshop やってみた！

今回は Amazon Web Services (AWS) の サービスの1つ AWS Amplify と Vue.js を用いたワークショップである Amplify Vue Workshop をやってみたアウトプットです。

記事にて公開するということで、やった際に陥ったトラブルシューティング的なものも記載しております。それが少しでも本記事を読んでいただいている方への貢献になれれば幸いです。

目次
  1. きっかけ
  2. 筆者の AWS 経験
  3. Workshop 内容
  4. トラブルシューティング
  5. 感想

きっかけ

ちょっとした機会で AWS 社員とお話する機会になり、フロントエンドをやっている＆ AWS 勉強したい旨を伝えたところ、本ワークショップをお勧めいただきました。

筆者の AWS 経験

初学者です。（S3 と AWS Certificate Manager (ACM) を用いて、 HTTPS の静的ホスティングをしたことがあるくらい。）

なので、そのレベルの人がやってみて〜、みたいな感じで見ていってください。

Workshop 内容

AWS では、AWS を使用したスケーラブルなモバイルアプリおよびウェブアプリの作成、設定、実装を容易にする AWS Amplify  を提供しています。 このワークショップでは、AWS Amplify と Vue.js を利用した、手早く、かつスケールするアプリの実装を体験できます。

Amplify Vue Workshop

Amplify で爆速で Web アプリを開発しデプロイしてみよう！という内容です。

実装する機能

Web アプリを開発する上で実装する主な機能は以下です。

タイムライン

  1. Cloud9 環境作成。このとき、同時に EC2 インスタンスが建つ。以降は Cloud9 での操作です。
  2. Vue プロジェクト作成。
  3. AWS Amplify ホスティング。
    • GitHub などのリモートリポジトリと紐付ければ自動でデプロイされる。すごい。
  4. 各種機能を実装。
  5. 片付け。

トラブルシューティング

spawn xdg-open ENOENT とエラー

2-3. Amplify CLI の手順2で、

amplify configure

をする際、spawn xdg-open ENOENTとエラーが出ることにハマりました。

しかし現在は、ワークショップ内で以下のようにトラブルシューティングが記載されています。

spawn xdg-open ENOENT とエラーが出た際は、sudo yum -y install xdg-utils を実行します。

2-3. Amplify CLI | Amplify Vue Workshop

私がやっていたときはこの文章がなかった気が…追記されたのか、はたまた、私が見落としていたのか…

無料枠でも利用料金が発生…！？

私の様な初学者の方へ向けた注意喚起を念の為、記載しておきます。

本ワークショップは、無料枠を利用していても場合によっては料金が発生します。
実際に私はワークショップ終了後、コストを見ると $0.61 かかっていました。

利用料金 $0.61 - 6.4h
　

今回の場合の原因は Cloud9 です。ちゃんと言うと、 Cloud9 を使用する際に建てる EC2 インスタンスです。

AWS Cloud9 には追加料金はかかりません。AWS Cloud9 開発環境に Amazon EC2 インスタンスを使用する場合は、コードの実行と保存に使用された コンピューティング とストレージのリソース分 (例: EC2 インスタンス、 EBS ボリューム) のみのお支払いとなります。

料金 – AWS Cloud9

上記の通り、 Cloud9 には料金はかかりませんが、EC2 には（無料枠においても）一部料金が発生します。

今回、ワークショップの記載に則り、 EC2 のインスタンスサイズを m5.large で建てていました。
m5.large は無料枠外なので、インスタンス起動中は時間単位で課金されることになります。

Amazon EC2 は AWS 無料利用枠に含まれているので、無料で開始できます。これには、1 年間毎月 750 時間分の Linux および Windows の t2.micro インスタンス (t2.micro が利用できないリージョンでは t3.micro) が含まれています。無料利用枠内に抑えるには、EC2 マイクロインスタンスのみを使用してください。

AWS EC2 の料金 | AWS公式

さらに、私は Cloud9 をちまちま起動しては閉じてを繰り返していたため、6.4時間も起動中になったといった感じですね。ワークショップは一気にやるべきですね…

料金を発生させたくない場合は、ローカル環境でやることをお勧めします。
そして、各ソリューションの無料枠適用条件をしっかり調べることですね。

感想

Amplify は爆速で簡単に Web サービスを公開できる。 API も充実している。

フロントエンド書けて、バックエンドの知識がそこそこあれば、
簡単なサービスなら開発できそうと感じたワークショップでした。

AWS はすごい。

もっと勉強するぞ！

タグ: