建立Vue x Amplify的專案

  • 安裝Vue-CLI
  • 安裝Amplify-CLI

僅供參考

在安裝Amplify-cli時,需要設定後續操作amplify-cli的IAM user

CLI會問你“`? Profile Name:“`,我是輸入**amplify**可參考命名設定檔

初始化專案

$ vue create amplify-vue-project
$ cd amplify-vue-project
$ amplify init # 初始化amplify,幾乎都選預設值,environment輸入dev

到這邊其實就完成了,接下來非常建議要先看看Typical workflows知道用amplify pull/push管理雲上的資源

如果是團隊開發,記得要看看Team environments下每一篇才能在這個專案在各個環境切來切去的時候比較有頭緒

如果在同個專案、多aws帳號各自建立環境時,遇到從dev分支merge到production分支後,出現衝突的狀況…
可以來參考看看這篇

加上 AppSync GraphQL API

照著Create a GraphQL API做吧

更新GraphQL

你可以透過更新 project folder 下的“`backend/api/~apiname~/schema.graphql“`更新GraphQL API
雖然還有其他方式,但在這邊做的好處是,CLI會一併幫你處理一些事情:

  • 加上“`@model“`會幫你開 dynamodb
  • 加上“`@key“`幫你定義 dynamodb table 的 primary key,或者LSI以及GSI
  • 加上“`@auth“`替你在根據這份檔案產生出來的 mutation, query 及 resolver 內加上權限控管

其他方式?有哪些?

也可以直接到 AppSync控制台 開一個 sample api,sample api 好像會用 cloudformation 一併幫你開好 dynamodb table。

也可以先手動開好 dynamodb table,再去 AppSync控制台 開一個空白api,到**DataSource**分頁使用『建立資料來源』,裡面便可以直接把 dynamodb table 匯入成 graphql api,也會一併產生 resolver,但整體上來說還是沒有用 Amplify CLI 產生來的便利

想要過濾Subscription

可以參考Filter Subscriptions by model fields and/or relations而且要額外補充Using Subscription Arguments,其中的 **Argument null value has meaning** 章節很重要又很有趣

想要自訂resolver

參考Add a custom resolver that targets a DynamoDB table from @model

用不到後端資源了,想刪掉?

如果你使用過 Terraform…
要小心使用 amplify delete 指令,它的刪除跟 terraform 不一樣!

well
你可以執行“`amplify delete“`
但它的問題是,它不僅會把(目前env下)已經佈置上雲的後端資源收掉,還會把專案資料夾下所有後端資源的設定刪光光