Azure Static Web Apps の公式 Vue CLI + Vue 2 テンプレートを Vite + Vue 3 に書き換えるメモ
Azure Static Web Apps の公式 Vue CLI + Vue 2 テンプレートを Vite + Vue 3 に書き換えるメモです。
この記事は 2022年 ゆるくすすめる ( ワンフットシーバス ) | GWアドベントカレンダー の 5/2 4日目の記事でもあります。
Azure Static Web App で Vue をやりたいが、チュートリアルが Vue CLI + Vue 2 （以前のバージョンで固定したい気持ちもわかる）
Azure Static Web App の Vue の公式チュートリアルから発展させるつもりが、そういえば Vue CLI + Vue 2 。
— Tanaka Seigo (@1ft_seabass) April 20, 2022
どうせなら新しい構成で試したいので #Vite + Vue 3 で <script setup> な書き方で置き換えたら、結構スッキリ移行できたー。一旦 #Bootstrap も載って、つくるのたのしー。 #vuejs #Azure pic.twitter.com/WukG78B0Pm
Azure Static Web Apps がかなりいいなと思っていて Vue で何か作ろうと思っていたんですが、
staticwebdev/vue-basic: A Vue.js example for Azure Static Web Apps
公式の Vue チュートリアル が Vue CLI + Vue 2 でして、最新を追いすぎずガチっと以前のバージョンで動くようにする大切さは理解しつつも、 Vite での開発のしやすさと Vue 3 の script setup の書きやすさを使いたく、書き換えてみます。
こちらにもあるように、手元でのサーバーの起動や更新が遅いと、ササっと作るときに足かせになるなあというのが一番の理由です。
とても参考になるリポジトリがあった
色々調べていたところ、Azure Static Web Apps で Vite + Vue 3 で動かしているサンプルがありました。
しかもこのサンプル、テンプレートにできるようなので、自分の環境で立ち上げてみたところバッチリ動いたので、かなり良い感じ。
ということでやってみる
とはいえ、ストアまで載せてくれているものの、よりシンプルに使いたいのと、自分なりにいろいろ加えたいときに、このリポジトリから基礎のセットを理解しておいたほうが、あとあと安全にスクラップアンドビルドできそうなので、自分なりにやってみます。
まず、チュートリアルを進める
2022/4/29 の情報で進めます。
クイックスタート: Azure Static Web Apps を使用して静的サイトを初めて構築する | Microsoft Docs
をベースに
- リポジトリの複製
- 手元にクローン
- ドキュメントにある「静的 Web アプリを作成する」の対応
に進めて Vue CLI + Vue 2 の静的サイトを立ち上げます。
Hello World とサイトで見えれば、うまく動いたはず。
下準備
手元で npm i でインストールしてしまうと node_modules に色々入ってしまうので、手元では Vue CLI + Vue 2 のローカルの動作確認はせずに進めました。
まず、 Vue 2 に関するファイルは vue2 フォルダに入れて退避しておきます。
.github と public と staticwebapp.config.json だけ残しています。
Vite プロジェクトを作成
プロジェクトフォルダ直下で
npm init vite@latestを実行します。
√ Project name: ... vite-project
√ Select a framework: » vue
√ Select a variant: » vueとすすめて、vite-project フォルダに Vite プロジェクトが作られます。
Vite プロジェクトを移動
vite-project フォルダの内容を、プロジェクトフォルダ直下に移動します。
移動しました。
.vscode/extension フォルダはそのまま
{
"recommendations": ["johnsoncodehk.volar"]
}移動すると、.vscode のフォルダもありますが、このまま利用します。
.gitignore 修正
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
########## add vite .ignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?以前の .gitignore を参考にしつつ Vite の .gitignore を加えたものです。一旦これで大丈夫でした。重複している部分は後で削除する予定。
再度 Vite 関連をインストール
この段階で
で再度 Vite 関連をインストールします。
Vite 動作確認
npm run devうまくいったら、このコマンドでローカルで動作確認です。
手元では Vite がうまく動きました！やはりサーバー起動が早い！
Azure Static Web Apps まわりの設定をすすめる
こちらの、いろいろな準備を移植していきます。
devDependencies 追加
npm install --save-dev @azure/static-web-apps-cli eslint-plugin-vueこれで、devDependencies 追加します。
package.json に eslint , browserslist 追加
eslint , browserslist は Vite 後も共通しているので、package.json にそのまま加えます。
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions"
]scripts 部分を修正
scripts 部分は init 以外、そのまま参考にしておきました。
func とか swa とか all とか手元で進めるときの配慮がしっかりされていますね。よくできています。
"scripts": {
"dev": "vite",
"build": "vite build",
"func": "cd api && func start",
"swa": "swa start http://localhost:3000 --api-location http://localhost:7071",
"all": "npm-run-all --parallel dev func swa",
"serve": "vite preview",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
},all コマンドの実行のために、
npm i npm-run-allで npm-run-all も実行できるようにしておきます。
API の追加
Azure Functions を使用して Azure Static Web Apps に API を追加する | Microsoft Docs
を参考に、 JavaScript の message API を作っておきます。
これは Overwrite にしておきました。
さきほどの scripts の func や swa を動かすために API を動作させておく意図の対応です。
いざローカル起動
で動かしてみると、
無事動きました！
どういうわけか、App.vue で設定している #app に向けた CSS がうまく機能していない模様。
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>素の Vite サーバーでは 3000 ポートで見るとうまくいくのに、統合されたサーバー 4280 ポートの方で崩れるようです。
とりあえず、動作はしているので push してみましょう。
push してサーバーも更新してみる
git push してサーバーも更新します。
待っていたところ、無事、デプロイが通りました！
こちらでは、Vite から吐き出した通りの中央寄せになっています。ということでビルド後の表示は大丈夫そう。
ローカルだけ App.vue にある CSS が効かないので main.js から外部ファイルを呼ぶように
ということで、先ほどの統合されたサーバー 4280 ポートの方で崩れるところは、
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<!--
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
-->まず、App.vue からはコメントアウトします。
main.js と同じ階層に main.css を置いてコメントアウトした内容を移植します。
main.css の内容は以下です。
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}そして、この CSS ファイルを main.js から import で呼び出すようにしたらうまくいきました。
main.js の内容です。
import { createApp } from 'vue'
import App from './App.vue'
import "./main.css"
createApp(App).mount('#app')色々組んでいくと、外部から CSS インポートするようになるので、原因自体ははっきりしませんが、開発するうえでは、このあたりを意識しておけば、ハマらず進められるので問題なさそうです。