vue3をApp Serviceにデプロイ

VSCode準備
1. VSCode起動
2. Azure Tools拡張
VSCodeにてAzure操作
Webページ表示してみる
Azure Portal にて設定追加

VSCode準備

VSCode起動

vue3プロジェクトのフォルダでVSCodeを起動。

user1@amebb:~/acre/air/album$ code .

Azure Tools拡張

VSCode にAzure Tools 拡張をインストール。

もしWindows側にてVSCode にインストール済でも再度 wsl の中にインストールするようにする。

Extension is enabled on ‘WSL: Ubuntu-20.04’

と表示されればよし。

VSCodeにてAzure操作

VSCodeにてAzureアカウントにサインインし、新しい名前でWeb appを作成し、ローカルのフォルダからデプロイします。

VSCodeの左端のアクティビティバーのAマークを押下
- Azure Explorer にて APP SERVICEに注目
  - Sign in to Azure
    - Webブラウザが表示されたらアカウントを選択
      - WebブラウザにYou are signed in now and can close this page.と表示されたら閉じてよい
  - subscription名を右クリック
    - Create New Web App…
      - (1/3)グローバルで一意なApp名
      - (2/3)Select a runtime stack. ＞Node 16 LTS
      - (3/3)Select a pricing tier ＞Free（F1）
  - デプロイ
    - Select the forler to deploy ＞ローカルのVueプロジェクトフォルダ（＝package.jsonなどが配置されているフォルダ）を選択する（注意：distフォルダではない）
VSCode右下パネルの OUTPUTウィンドウでデプロイの進捗を見ることができる
- デプロイ先で自動的に npm run build が実行され dist フォルダが作成されていることがわかる。

Webページ表示してみる

デフォルト画面のままだ。失敗。

Your web app is running and waiting for your content
Your web app is live, but we don’t have your content yet. If you’ve already deployed, it could take up to 5 minutes for your content to show up, so come back soon.

Azure Portal にて設定追加

要点

デプロイ先の App Service においてコマンド pm2 serve /home/site/wwwroot/dist --no-daemon が実行されるようにする。

そのために Azure Portal にてスタートアップコマンドにこのコマンドを設定する。

参考

Vue Deployment on App Service Linux

This section provides information for creating, configuring, and deploying a Vue application on App Service Linux.

Using PM2 on App Service Linux

PM2 is a production process manager for Node.js applications that allows you quickly start, manage, scale node processes and keep your application online. It is...

Deploy a Vue application to Azure App service through VS code not success · Issue #51639 · MicrosoftDocs/azure-docs

I followed this tutorial this tutorial to deploy to Azure App Service using Visual Studio Code. It works nice. When I try to deploy a Vue application (I create ...

Azure Portal操作

Microsoft Azure

Azure Portal ＞ App Service ＞ vue3 アプリ名＞ (左ペイン) 設定＞構成＞ (上)全般設定＞スタートアップコマンド

に次を入力

pm2 serve /home/site/wwwroot/dist --no-daemon --spa

(上)保存＞ (左ペイン)概要＞(上)再起動

Webページ表示成功

WebブラウザでWebアプリURLを開くと vue初期画面が表示された。