Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

4fe56d2e6ecf4cbde3ddbf6ef54fc568?s=128

Kairi Yasumatsu

August 24, 2021
Tweet

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ロー ルが2つ デプロイ用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