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 Apps がかなりいいなと思っていて Vue で何か作ろうと思っていたんですが、

staticwebdev/vue-basic: A Vue.js example for Azure Static Web Apps

公式の Vue チュートリアル が Vue CLI + Vue 2 でして、最新を追いすぎずガチっと以前のバージョンで動くようにする大切さは理解しつつも、 Vite での開発のしやすさと Vue 3 の script setup の書きやすさを使いたく、書き換えてみます。

なぜ Vite なのか | Vite

こちらにもあるように、手元でのサーバーの起動や更新が遅いと、ササっと作るときに足かせになるなあというのが一番の理由です。

とても参考になるリポジトリがあった

色々調べていたところ、Azure Static Web Apps で Vite + Vue 3 で動かしているサンプルがありました。

marcduiker/staticwebapp-vue-vite: A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

しかもこのサンプル、テンプレートにできるようなので、自分の環境で立ち上げてみたところバッチリ動いたので、かなり良い感じ。

ということでやってみる

とはいえ、ストアまで載せてくれているものの、よりシンプルに使いたいのと、自分なりにいろいろ加えたいときに、このリポジトリから基礎のセットを理解しておいたほうが、あとあと安全にスクラップアンドビルドできそうなので、自分なりにやってみます。

まず、チュートリアルを進める

2022/4/29 の情報で進めます。

クイックスタート: Azure Static Web Apps を使用して静的サイトを初めて構築する | Microsoft Docs

をベースに

に進めて Vue CLI + Vue 2 の静的サイトを立ち上げます。

image

Hello World とサイトで見えれば、うまく動いたはず。

下準備

手元で npm i でインストールしてしまうと node_modules に色々入ってしまうので、手元では Vue CLI + Vue 2 のローカルの動作確認はせずに進めました。

image

まず、 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 プロジェクトを移動

image

vite-project フォルダの内容を、プロジェクトフォルダ直下に移動します。

image

移動しました。

.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

うまくいったら、このコマンドでローカルで動作確認です。

image

手元では Vite がうまく動きました!やはりサーバー起動が早い!

Azure Static Web Apps まわりの設定をすすめる

marcduiker/staticwebapp-vue-vite: A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

こちらの、いろいろな準備を移植していきます。

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 を作っておきます。

image

これは Overwrite にしておきました。

さきほどの scripts の func や swa を動かすために API を動作させておく意図の対応です。

いざローカル起動

[]
npm run all
[/]

で動かしてみると、

image

無事動きました!

どういうわけか、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 してサーバーも更新します。

image

待っていたところ、無事、デプロイが通りました!

image

こちらでは、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 インポートするようになるので、原因自体ははっきりしませんが、開発するうえでは、このあたりを意識しておけば、ハマらず進められるので問題なさそうです。