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

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

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

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

Kairi Yasumatsu

August 24, 2021
Tweet

More Decks by Kairi Yasumatsu

Other Decks in Programming

Transcript

  1. 流れ。 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
  2. 認証機能を作成する 9 $ amplify add auth ・アプリケーションに認証機能を追加しま す。 ・ユーザーを作成すると、 Amazon Cognito の

    ユーザーグループに追加されていた。 ・App.vueにログイン画面の機能を追加しま す。<template>のタグの中を <amplify-authenticator>で囲い、末尾に <amplify-sign-out></amplify-sign-out>を追 加するだけでOK
  3. デプロイしてホストする 10 $ amplify add hosting & amplify add publish

    ・アプリケーションの静的ファイルのホス ティ ング機能を追加する。 ・構成はcloudfront + s3なので、IP制限とか  もかけられる。 ・表示されたURLにアプリがホストされて い る。  修正→amplify add publishでリリースの 流 れで爆速PDCAを回せる