Vue-CLI+Azure Static Web Appsをローカル開発する

お久しぶりです。

リサーチデベロップメントのたかはしとし（ @doushiman_jp ）です。

最近はradikoアプリで、芸人さんのラジオを聴くことにハマっています。

オールナイトニッポンとか大昔によく聴いてたなあ……

ふと思い立って、「あぁ……Vue-CLIを使ってWebページが作りてえなぁ……」と思いまして。

それなら、最近勉強中のAzureのStatic Web Apps がいいなあ、となりました。

じゃあいつも通り、開発はVisual Studio Code でというところで、おや？と。

ご存知のようにVue-CLI をローカルで開発する場合、

npm run serve

で開発サーバを起動します。

これでフロント側はいいのですが、Static Web Apps のFunctions のサーバーサイドの実装と組み合わせようとすると、このままではいけません。

通常、Static Web Apps をローカル開発する時は、Static-Web-Apps-CLI を使って

swa start --api-location api

みたいにするのですが(Functions をapi ディレクトリに置いた場合)、普通にVue-CLI とStatic-Web-Apps-CLI を両方起動しても、それぞれ別のポートでCLIが動作しているので、うまく連携できないのです。

ここをどう解消するかで少し（結構？）迷ったので、備忘録的に解決法を書いておきます。

Static Web Apps CLIを使わずにfunc startでfunctionsを起動させて、vue.config.js のdevServerでプロキシを設定します

module.exports = {
  devServer: {
    proxy: '/api/hoge:1234'
  }
}

のようにproxyに関数のURLを記載することで、CORSを回避できるので、ローカルでのVue-CLI + Functionsの動作が可能です。

でもproxy に書くのもめんどくさいなあ、と思っちゃったので、最終的にこうなりました。

まず通常通りVue-CLI を起動します。

npm run serve

ビルドが走った後

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.10:8080/

のように立ち上がります。

次に同じディレクトリで

swa start http://localhost:8080/  --api-location api

でStatic-Web-Apps-CLI を起動します。

swa start の後に開発サーバ（ここではVue-CLI のデバッグURL)を指定することで、Vue-CLI + Static-Web-Apps-CLI 開発がローカルで可能になります。

Static Web Appsが起動すると、

Azure Static Web Apps emulator started at http://localhost:4280. Press CTRL+C to exit.

のように表示されますので、書かれているlocalhostをブラウザで表示すると、無事Static Web AppsとしてVue-CLIで作成したWebページが表示されるはずです。

ちなみに、先にStatic web Apps CLIを起動しても問題ありません。

今回はVue-CLI を使いましたが、Reactなど他のフレームワークとも当然、共存は可能です。参照

ここまででローカル開発が可能になりますので、次はAzure にデプロイすることになるのですが、そこは次の機会に書こうかなと思います。ではでは。

PHONE APPLI Engineer blog