Amplify CLIで作る Vue3アプリのバックエンドからデプロイまで

2021/08/24 に実施した【Vue.js】急成長スタートアップを支えるフロントエンド戦略での登壇資料

Transcript

1. Amplify CLIで作る Vue3アプリのバックエンドからデプロイまで ナイル株式会社 エンジニア　安松海里
2. 自己紹介 安松 海里 97年生まれ。 2020年新卒でナイルに入社。 以降、アドテク事業部で広告の計測・集計 システム(php, node.js, aws)の開発に従 事。 今年は初めてISUCONに挑戦しました 2
3. aws Amplify とは？ 3 ・(最速)サーバーレスなバックエンドを、自分のアプ　リに最 速で導入することができる。 ・（スケール）複雑な設定なしで、awsベストプラク　ティスに 沿った構成を実現できる。 ・（簡単）静的アプリケーションなら数クリックでデ　プロイ可 能。 今年2月からvue,js3.0も サポートされました
4. 豊富なカテゴリから、ユースケースベースで、様々な機能を自 分のアプリに追加できる。 4
5. 認証付きTodoアプリを作ってデプロイしてみた 5 API（GraphQL）でCRUD 認証
6. 流れ。 Amplifyのコマンドでバックエンドをどんどん作成 6 No. 実行内容 コマンド 1 Vue CLI・ Amplify CLIを グローバルインストール npm install-g @vue/cli npm install -g @aws-amplify/cli 2 Vueアプリを作成 　　　 vue create プロジェクト名 3 awsリソースのセットアップ amplify init 4 GraphQLとAPIを作成 amplify add api 5 フロント部分実装 vueファイル編集 6 　　　認証機能作成　 amplify add auth 7 デプロイ＆ホスティング amplify add hosting & amplify publish
7. Amplifyのセットアップ 7 $ amplify init CloudFormationスタック ・cognito-identityに関連づけられたIAMロー ルが２つ デプロイ用S3バケット:1つ
8. GraphQLとAPIを作成 8 $ amplify add api ・Schemaファイルが自動生成された。 @model つけるとテーブルが作成される。 ・CRUD操作に必要な最低限のクエリは自動 生成された。 schemaやクエリが自動生成される
9. 認証機能を作成する 9 $ amplify add auth ・アプリケーションに認証機能を追加しま　す。 ・ユーザーを作成すると、 Amazon Cognito　の ユーザーグループに追加されていた。 ・App.vueにログイン画面の機能を追加しま す。<template>のタグの中を <amplify-authenticator>で囲い、末尾に <amplify-sign-out></amplify-sign-out>を追 加するだけでOK
10. デプロイしてホストする 10 $ amplify add hosting & amplify add publish ・アプリケーションの静的ファイルのホス　ティ ング機能を追加する。 ・構成はcloudfront + s3なので、IP制限とか　 もかけられる。 ・表示されたURLにアプリがホストされて　い る。 　修正→amplify add publishでリリースの　流 れで爆速PDCAを回せる
11. まとめ ・APIサーバーの構築・デプロイの設定などの領域を、Amplify 　に託 すことで、フロントエンジニアが一人でデプロイまで可　　能に。 ・何よりも爆速で形にできるので、MVPなどスピードが必要なプ　ロダク トで使いたい。 ・他のカスタマイズも色々あるので、試してみたい。 11