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

More Decks by Kairi Yasumatsu

Other Decks in Programming

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