Viteが凄すぎて感動した
Vite
あまりの速さに感動しました。なので何か作ってみようと思います。
掲示板アプリを爆速で作る
参考
やること
- Vite + Vuejs + Vuetifyでシンプルなアプリを作る
- Appsyncでバックエンドを作る
- 結合する
- Amplifyでデプロイする
できたもの
Vueのインストール
まずはyarnでViteアプリを作成
yarn create vite my-vue-app --template vue
フォルダを開いてyarn devで動くか確認
cd my-vue-app
yarn
yarn dev
localhost:3000で動いたのが見れたと思います。
AmplifyとAppsyncの準備
amplify init
? Enter a name for the project myvueapp
The following configuration will be applied:
Project information
| Name: myvueapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: vue
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script serve
あらかじめVueのプロジェクトがあると、全て設定された状態で引き込まれました。すごい。
続いてAPIの登録
amplify add api
? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Blank Schema
✔ Do you want to edit the schema now? (Y/n) · yes
? Choose your default editor: Visual Studio Code
ブランクスキーマを選んで適当に追加します。
amplify/backend/api/myvueapp/schema.graphql
type Post @model {
id: ID!
name: String!
content: String!
}
終わったらデプロイ
amplify push
無事デプロイできたら、Appsyncにアプリが追加されていると思います。
試しにクエリを動かしたりして動作チェック
Vuejsに組み込む
CSSフレームワークにVuetify
日付を表示したかったのでdayjsも追加しています。
vue add vuetify
yarn add aws-amplify aws-amplify-vue
yarn add dayjs
main.jsでインポート
Appsyncをデプロイしたときに作成されるエンドポイントなどや認証情報などがsrc/aws-exports.jsにまとめて入っているので、そちらもインポートします。
src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import Amplify, * as AmplifyModules from "aws-amplify";
import { AmplifyPlugin } from "aws-amplify-vue";
import aws_exports from "./aws-exports";
Amplify.configure(aws_exports);
loadFonts()
createApp(App).use(vuetify, AmplifyPlugin, AmplifyModules).mount("#app");
実際に動く画面がわの実装。１ファイルに全部詰め込む形にしました。
src/App.vue
<template>
<v-app>
<v-main>
<v-container>
<form>
<v-text-field
v-model="name"
:counter="10"
label="Name"
required
></v-text-field>
<v-textarea solo v-model="content" name="content" label="content"></v-textarea>
<v-btn class="mr-4" @click="submit"> submit </v-btn>
<v-btn @click="clear"> clear </v-btn>
</form>
<hr class="my-3">
<h1>Comments</h1>
<v-list three-line>
<template v-for="(item, index) in items" :key="index">
<v-list-item>
<v-list-item-content>
<v-list-item-title>{{item.name}} <small class="text-grey"> {{item.date}}</small></v-list-item-title>
<div class="pl-3 mt-2" v-html="item.content"></div>
</v-list-item-content>
</v-list-item>
<v-divider />
</template>
</v-list>
</v-container>
</v-main>
</v-app>
</template>
<script>
import dayjs from 'dayjs'
import { API, graphqlOperation } from "aws-amplify";
import { createPost } from "./graphql/mutations";
import { listPosts } from "./graphql/queries";
import { onCreatePost } from "./graphql/subscriptions";
dayjs.locale("ja");
export default {
name: "App",
data: () => ({
name: "",
content: "",
items: undefined,
}),
mounted() {
this.getData();
this.registerSubscription();
},
methods: {
submit() {
this.postData();
},
clear() {
this.name = ""
this.content = ""
},
getData: async function () {
// データ取得
await API.graphql(graphqlOperation(listPosts))
.then((response) => {
// 改行をタグに変換
const items = response.data.listPosts.items.map( val => {
val.content = val.content.replace(/\r?\n/g, '<br>')
val.date = dayjs(val.createdAt).format('YYYY/MM/DD')
return val
})
// テーブル表示
this.items = response.data.listPosts.items.sort((a,b)=> a.createdAt < b.createdAt ? 1 : -1)
})
.catch((error) => {
// テーブルリセット
this.items = []
})
},
registerSubscription: async function (){
// サブスクリプション登録
await API.graphql(
graphqlOperation(onCreatePost)
).subscribe({
next: (eventData) => {
const res = eventData.value.data.onCreatePost
const onCreatePost = {
...res,
content:res.content.replace(/\r?\n/g, '<br>'),
date: dayjs(res.createdAt).format('YYYY/MM/DD')
}
this.items.unshift(onCreatePost)
}
})
},
postData: async function () {
// オプション
const myInit = {
name: String(this.name),
content: String(this.content),
};
// データ登録
await API.graphql(graphqlOperation(createPost, { input: myInit }))
.then((response) => {
console.log(response);
this.clear();
})
.catch((error) => {
console.log(error)![Something went wrong]()
;
});
},
},
};
</script>
GithubからAmplifyへCDする
Githubに適当なリポジトリを作って、AWSのチュートリアルを見ながらAmplifyを設定。
ビルドコマンドやディレクトリなどは、あらかじめVuejsアプリを使ってからAmplify CLIを使うとほぼ全自動で設定されます。
うまくできたら、Githubのmasterブランチをコミットします。
完了まで行ったらデプロイアドレスから動作検証できます。
ものの1時間もかからずに出来ましたが、下記のようなつまづきポイントもありました。
つまづいたところ
Viteが邪魔してBuildが通らない
yarn devは通るのにyarn buildだとなぜかエラーが出るのでvite.config.jsを編集しました。
vite.config.js
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
"./runtimeConfig": "./runtimeConfig.browser", // 追加
},
},
コンソールでエラーが出る
ブラウザのコンソールでglobal周りのエラーが出るのでindex.htmlのheaderに下記を追加しました。
index.html
<script>
var global = global || window;
var Buffer = Buffer || [];
var process = process || {
env: { DEBUG: undefined },
version: []
};
</script>
Viteの体感は0秒
編集から反映してページリロードまで本当に早くて素晴らしいです。
GraphQLのサブスクリプションならわざわざAPIをfetchしなくても、動作検証が続けられるので、相性も抜群ですね。
Appsyncもかなり簡単に使えました。Firebaseも簡単ですが、スキーマを設計してより強固なバックエンドに出来ると思います。