vue-cliで作ったアプリをAzureWebAppsで公開するまでのメモ

タイトルの通り、vueアプリをAzureWebAppsで公開しようとしたら、少し詰まったのでメモします。

1. config/index.jsの編集

@tiwu_official 様の記事を参考に編集しました。とても助かりました。
.gitignoreの/dist/を消し忘れないようにしてください。
記事：https://qiita.com/tiwu_official/items/43dc554ec43dd951812a#vue-cli%E3%81%A7%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9

2. アプリケーション設定

vue-cliで作ったプロジェクトはそのままgithubにあげて、azureとリポジトリの連携をしています。
しかしhttps://<app-name>.azurewebsites.netにアクセスしても404が返されてしまいます。

vue-cliでプロジェクトを作成して、ビルドすると、公開したいものはdistディレクトリに作られます。
なので、https://<app-name>.azurewebsites.netにアクセスしたらdistディレクトリを参照するように設定します。

AzureのWebアプリ管理画面から、[アプリケーション設定]に進みます。
下の方の画像のように編集します。

以上です。