AWS Amplify 3 + Vue.js (Vue CLI) / 2020年5月版
AWS Amplify の公式ドキュメントが、結構ガラッと変わっています。
同時に利用するライブラリ関係も更新されたようで、前回書いたやつ (2020年4月8日作成) の導入ではうまくいかなくなっていました。
https://blog.tacck.net/archives/750
機能面も含め成長著しいサービスなので、バージョンも含めて導入部分を再度書いてみます。
手順
CLI のバージョン
現時点での CLI バージョン
Vue CLI: 4.3.1
Amplify CLI: 4.20.0
Vue.js のプロジェクト作成
$ vue create sample-vue
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated confi
g files
? Save this as a preset for future projects? No
Vue CLI v4.3.1
✨ Creating project in /Users/gray/projects/amplify/sample-vue.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
yarn install v1.16.0
info No lockfile found.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
✨ Done in 13.23s.
🚀 Invoking generators...
📦 Installing additional dependencies...
yarn install v1.16.0
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 4.85s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project sample-vue.
👉 Get started with the following commands:
$ cd sample-vue
$ yarn serve
$ cd sample-vue
$
Vue のプロジェクトへ Amplify パッケージ追加
公式に書いてあるように、パッケージを追加します。 (Vue向けのパッケージが新しくなったようです。)
https://docs.amplify.aws/ui/q/framework/vue
$ yarn add aws-amplify @aws-amplify/ui-vue
(snip)
info Direct dependencies
├─ @aws-amplify/ui-vue@0.2.5
└─ aws-amplify@3.0.11
(snip)
✨ Done in 17.85s.
$
Google OAuath 2.0 と `amplify init` 、`amplify auth add`の作業は こちら と同様に進めます。
Vue.js でのパッケージ読み込み
パッケージ構成が変わったので、ここも少し変更があります。
公式ドキュメント内でも書いてある場所がまとまっていないのですが、こちらに記載されているところです。 ( UI Components のセクションにも書いておいて欲しい。)
https://docs.amplify.aws/start/getting-started/setup/q/integration/vue#set-up-frontend
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Amplify from 'aws-amplify'
import '@aws-amplify/ui-vue'
import aws_exports from './aws-exports'
Amplify.configure(aws_exports)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
他は、今まで通りに実装できます。
Amplify 関連は現在活発に機能追加されているようなので、今後も実装方法に色々と変化が出てくるように思います。
また、公式ドキュメントもかなり整備されてきていますが、今回のように「一連の流れで実装する」方法が不十分だったりもしますし、何より日本語情報も少ないので、気がついたら書き溜めていきたいところですね。