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 。
どうせなら新しい構成で試したいので #Vite + Vue 3 で <script setup> な書き方で置き換えたら、結構スッキリ移行できたー。一旦 #Bootstrap も載って、つくるのたのしー。 #vuejs #Azure pic.twitter.com/WukG78B0Pm— Tanaka Seigo (@1ft_seabass) April 20, 2022
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 関連をインストール
この段階で
npm i
[/]
で再度 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 を動作させておく意図の対応です。
いざローカル起動
npm run all
[/]
で動かしてみると、
無事動きました!
どういうわけか、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 インポートするようになるので、原因自体ははっきりしませんが、開発するうえでは、このあたりを意識しておけば、ハマらず進められるので問題なさそうです。