Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Amplify CLIで作る Vue3アプリのバックエンドからデプロイまで
Search
Kairi Yasumatsu
August 24, 2021
Programming
0
580
Amplify CLIで作る Vue3アプリのバックエンドからデプロイまで
2021/08/24 に実施した【Vue.js】急成長スタートアップを支えるフロントエンド戦略での登壇資料
Kairi Yasumatsu
August 24, 2021
Tweet
Share
More Decks by Kairi Yasumatsu
See All by Kairi Yasumatsu
新卒1年目でもらったコードレビューを振り返って血肉とする
kairiyasumatsu
0
340
Other Decks in Programming
See All in Programming
GitHub Copilot Tips and Tricks
yuichielectric
26
7.5k
Honoとhtmx
yusukebe
6
1.2k
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
TDDと今まで
kanayannet
0
140
導入から5年が経って見えた Datadog APM 運用の課題
bgpat
2
540
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
490
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
LLMチャットボットのアプリケーション設計Tips
os1ma
4
660
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
840
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
130
6.2k
What's new in Ruby 2.0
geeforr
335
31k
We Have a Design System, Now What?
morganepeng
42
6.7k
How STYLIGHT went responsive
nonsquared
92
4.7k
Designing the Hi-DPI Web
ddemaree
275
33k
What the flash - Photography Introduction
edds
64
11k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
A Tale of Four Properties
chriscoyier
150
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Clear Off the Table
cherdarchuk
82
310k
Documentation Writing (for coders)
carmenintech
59
3.8k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
Transcript
Amplify CLIで作る Vue3アプリのバックエンドからデプロイまで ナイル株式会社 エンジニア 安松海里
自己紹介 安松 海里 97年生まれ。 2020年新卒でナイルに入社。 以降、アドテク事業部で広告の計測・集計 システム(php, node.js, aws)の開発に従 事。
今年は初めてISUCONに挑戦しました 2
aws Amplify とは? 3 ・(最速)サーバーレスなバックエンドを、自分のアプ リに最 速で導入することができる。 ・(スケール)複雑な設定なしで、awsベストプラク ティスに 沿った構成を実現できる。 ・(簡単)静的アプリケーションなら数クリックでデ プロイ可 能。
今年2月からvue,js3.0も サポートされました
豊富なカテゴリから、ユースケースベースで、様々な機能を自 分のアプリに追加できる。 4
認証付きTodoアプリを作ってデプロイしてみた 5 API(GraphQL)でCRUD 認証
流れ。 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
Amplifyのセットアップ 7 $ amplify init CloudFormationスタック ・cognito-identityに関連づけられたIAMロー ルが2つ デプロイ用S3バケット:1つ
GraphQLとAPIを作成 8 $ amplify add api ・Schemaファイルが自動生成された。 @model つけるとテーブルが作成される。 ・CRUD操作に必要な最低限のクエリは自動
生成された。 schemaやクエリが自動生成される
認証機能を作成する 9 $ amplify add auth ・アプリケーションに認証機能を追加しま す。 ・ユーザーを作成すると、 Amazon Cognito の
ユーザーグループに追加されていた。 ・App.vueにログイン画面の機能を追加しま す。<template>のタグの中を <amplify-authenticator>で囲い、末尾に <amplify-sign-out></amplify-sign-out>を追 加するだけでOK
デプロイしてホストする 10 $ amplify add hosting & amplify add publish
・アプリケーションの静的ファイルのホス ティ ング機能を追加する。 ・構成はcloudfront + s3なので、IP制限とか もかけられる。 ・表示されたURLにアプリがホストされて い る。 修正→amplify add publishでリリースの 流 れで爆速PDCAを回せる
まとめ ・APIサーバーの構築・デプロイの設定などの領域を、Amplify に託 すことで、フロントエンジニアが一人でデプロイまで可 能に。 ・何よりも爆速で形にできるので、MVPなどスピードが必要なプ ロダク トで使いたい。 ・他のカスタマイズも色々あるので、試してみたい。 11