AWS Amplify 3 + Vue.js (Vue CLI) / 2020年5月版

AWS Amplify の公式ドキュメントが、結構ガラッと変わっています。

同時に利用するライブラリ関係も更新されたようで、前回書いたやつ (2020年4月8日作成) の導入ではうまくいかなくなっていました。

機能面も含め成長著しいサービスなので、バージョンも含めて導入部分を再度書いてみます。

手順

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向けのパッケージが新しくなったようです。)

$ 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 のセクションにも書いておいて欲しい。)

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 関連は現在活発に機能追加されているようなので、今後も実装方法に色々と変化が出てくるように思います。

また、公式ドキュメントもかなり整備されてきていますが、今回のように「一連の流れで実装する」方法が不十分だったりもしますし、何より日本語情報も少ないので、気がついたら書き溜めていきたいところですね。

tacck
  • tacck
  • 札幌のソフトウェアエンジニア。
    インフラ・バックエンド・フロントエンドと、色々やります。

    初心者・若手向けのメンターも希望あればお受けします。

    勉強会運営中
    * ゆるWeb勉強会@札幌
    * スマートスピーカーで遊ぼう会@札幌

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください