Web系ぜんぜん分からん組込み系のオッサンがなんかよく分からんけどやってみたメモ。
下記の公式サイトのチュートリアルをもとにやってみた。
ローカルにNode.jsをインストールする
なんかよく分からんけど、とりあえずローカルのPC上で動くNode.js環境を作る。僕はドザー(死語)なので、Windows版のインストーラをNode.jsの公式サイトからダウンロードしてインストールしてもよいのだけど、この先DOS窓で作業するのはツラそうなので、WSLのUbuntu(詳しくはこちらの記事)にインストールすることにする。(PowerShellなにそれおいしいの？)
sudo apt update sudo apt install nodejs sudo apt install npm node --version
しかし、node --version でバージョンを確認してみるとv10と、ちょっと古かった。そこで n をインストールして特定バージョン(今回はv14)のnode.jsをインストールし直し、最初にインストールしたnode.jsとnpmはアンインストールし、ログインし直す。改めてバージョンを確認するとv14になっていた。(詳しくはこちらの記事)
sudo npm install n -g sudo n v14 sudo apt purge -y nodejs npm exec $SHELL -l node --version
あと、ファイルはWindows側に置いておいたほうが便利が良さそうなので、例えばドキュメントフォルダへのシンボリックリンクを張っておく。
ln -s /mnt/c/Users/ユーザ名/Documents ~/documents
ああ、でもファイルをWindows側(NTFS)に置いちゃうとパーミッションが全部777になっちゃうし、シンボリックリンクを作られるとWindowsからは空のファイルに見えちゃうのが難点。悩ましいところで正解が分からんけども、とりあえずこれで進める。
Express + Node.js でローカルにアプリのひな型を作る
なんかよく分からんけど、ExpressとかいうNode.jsのフレームワークを使うと簡単にWebアプリができるらしい。Webアプリのひな型を生成するために、テキトーなディレクトリに移動して次のコマンドを実行する。npx を使うと、よかろうで必要なものをインストールしてくれるらしい。ここで myExpressApp は任意のアプリ名とする。
npx express-generator myExpressApp --view pug
すると、myExpressApp というディレクトリができ、ここにWebアプリのひな型が生成されるようだ。このディレクトリに移動して npm install を実行すると、なんかよく分からんけどアプリがインストールされる？
cd myExpressApp npm install
ここで「found n vulnerabilities (n個の脆弱性が見つかった)」というメッセージが出た場合は npm audit を実行して指示されたコマンドを実行する。(例えば「Run npm install pug@3.0.2 to resolve 2 vulnerabilities」のようなメッセージが出る。) そしてnpm install を実行し直す。
npm audit sudo npm install pug@3.0.2 # 脆弱性対策の一例 npm install
インストールできたら npm start でアプリを起動する。(停止はふつうに Ctrl+C で。)
npm start
ブラウザで http://localhost:3000 にアクセスして「Express Welcome to Express」と表示されたら成功。
VS CodeのAzure App Service拡張機能をインストール
さすがにAzureへのデプロイの操作をコマンドライン(Azure CLI)でやるほどストイックな人間ではないので、VS Codeの拡張機能を利用することにする。(コマンドラインでやりたい硬派な人はこちら)
「Azure」で検索すれば「Azure App Service」という拡張機能がすぐ見つかるのでこれをインストールする。
Azure へのデプロイ
さっきローカルに作ったアプリのディレクトリ(例では myExpressApp)で code . を実行するとVS Codeが起動してアプリのディレクトリが開く。または、VS Codeのメニューの File → Open Folder で アプリのディレクトリを開いても良い。「Do you trust the authors of the files in this folder?」とか聞かれたらYesで。
code .
なんかよく分からんけど、さっきAzure App Service拡張機能をインストールしたので、VS Codeの左端にAzureのアイコンが追加されている。ここをクリックして、「Sign in to Azure」を選択。(組込み系のオッサンはメニューの日本語化などせぬのである。必要ないし、トラブったときに英語の方がググラビリティが良い。)
するとブラウザに飛んでアカウント選択画面になる。ここでサインイン済みのアカウントを選択すると「You are signed in now and can close this page.」と表示されるので、この画面は閉じてVS Codeに戻る。すると作成済みのサブスクリプションが表示される。（なんの手違いかサブスクリプションが2個できてしまっているが、よく分からん。）ここで雲のアイコンをクリックしてWebアプリのデプロイに進む。
（そもそもデプロイってどういう意味かよく分からんけど、まあアプリをAzureにアップロードして実行するってことやろ、知らんけど。）
デプロイまでの手順
- フォルダの選択： 今開いているフォルダを選択。
- サブスクリプションの選択： 作成済みのサブスクリプションを選択。(※1)
- Webアプリの選択：「Create new Web App... Advanced」を選択。
- Webアプリの名前を入力： グローバルにユニークな名前を付ける。
- リソースグループの選択： なんかよく分からんけど新しいリソースグループを作成する。(※2)
- ランタイムの選択： 今回はNode.js v14のアプリなので「Node 14 LTS」を選択。
- OSの選択： とりあえずまあ「Linux」を選択。
- ロケーションの選択： わいは「Japan West」やで。
- Linux Appサービスプランの選択： なんかよく分からんけど新しく作成する。
- 価格レベルの選択： とりあえずまあ「Free(F1)」か「Basic(B1)」で。
- Application Insightsリソースの選択： なんかよく分からんけど、今回はスキップする。
すると、Webアプリのデプロイが始まる。「Always deploy the workspace "フォルダ名" to "アプリ名" ?」と聞かれたら Yes で。Webアプリのデプロイが完了したらポップアップ表示されるので、「Browse Website」をクリックする。ブラウザが開いて、ローカル環境と同様に「Express Welcome to Express」と表示されたら成功。 URLは https://アプリ名.azurewebsites.net/ となる。
※1 ※2：サブスクリプションとかリソースグループとか、公式のドキュメント読んでもなんか分からんけど、こちらの記事にざっくりした解説があった。
アプリを変更して再デプロイする
アプリを試しにちょこっと変更してみる。myExpressApp/views/index.pug を開いて「p Welcome to #{title}」と書かれてあるのを「p Welcome to Azure!」に書き換えてみる。この index.pug ていうファイル、謎言語の謎ファイルだけども、どうやら index.html を生成するテンプレートらしい。
ローカルでアプリを起動してブラウザで再び http://localhost:3000 にアクセスすると今度は「Express Welcome to Azure!」と表示される。
VS Codeで再びAzure App Service拡張機能の雲のアイコンをクリックして再デプロイする。完了通知のポップアップで「Browse Website」をクリックし、ローカルと同様に表示が変わっていたら成功。
ひとまずこれで、「Webアプリをローカルで作成→動作確認→Azureにデプロイ→動作確認→ローカルに戻って変更→以降繰り返し」の流れができた。よく分からんけど。
