はじめに
こんにちは、まつさこ です。
今回は、Node.jsを使用したWebアプリをローカル環境で開発し、Azure Web App にデプロイする手順を紹介します。
開発環境
筆者の開発環境は以下です。
- Node.js 20.10.0
- Express 4.18.2
- Cursor Editor
ローカル開発環境の構築
まず、作業フォルダをPCのローカル環境に作成し、Cursorのターミナルを開きます。
この時、筆者はPowershellではなく、Git Bashを使用しました。npmコマンドをそのまま使用するために、環境変数のパスが通っている必要があります。
※CursorはAI連携に特化したVSCodeのForkエディターです。
ターミナルで作成したフォルダに移動し、 npm install express npm install dotenv を実行してExpressとdotenvをインストールします。
こちらを参考にしました。
上の記事を参考に、 app.js ファイルを作成します。
以下のようにしてみましょう。
// .envファイルの読み込み
require('dotenv').config();
// expressモジュールをロードし、インスタンス化してappに代入。
var express = require("express");
var app = express();
// listen()メソッドを実行して3000番ポートで待ち受け。
const port = process.env.PORT || 3000
var server = app.listen(port, function(){
console.log("Node.js is listening to PORT: http://localhost:" + server.address().port + "/sample");
});
// 以後、アプリケーション固有の処理
// サンプルデータ
var text = "This is GET request sample!!"
// テキストサンプルを取得するAPI
app.get("/sample", function(req, res, next){
res.json(text);
});
次に package.json ファイルを編集します。今回は app.js がメインのファイルとなるので、以下のように編集します。
{
"name": "sample_app",
"version": "1.0.0",
"description": "sample_app",
"main": "app.js",
"scripts": {
"start": "node app.js"
},
"author": "wappaboy",
"license": "MIT",
"dependencies": {
"express": "^4.18.2"
}
}
Cursorのコンソールで npm app.js を実行し、 http://localhost:3000/sample にアクセスしてみましょう。次の画像のようになるはずです。
Azure Web App にデプロイする
今回は、Github Actions を使用して、Azure Web App にデプロイします。
前述のローカル環境で作成したフォルダをリポジトリとして、Github にプッシュします。リポジトリ作成の詳細手順は割愛します。
Azure サブスクリプションやリソースは作成されていることを前提に進めます。
新規で Azure Web App を作成後、サイドメニューから Deployment Center を選択します。
今回は Github Actions を使用するので、Source に GitHub を選択します。
Organization や Repository に適切なものを選択してください。
設定が完了したら、自動的にデプロイが開始されます。
筆者が直面したエラーと対応
デプロイが失敗する
画像のようなエラーが出て、Github Actions でのデプロイが失敗することがありました。
これは package.json の Scripts セクションに、エラーを吐く以下のコマンドを始め入れていたのが原因でした。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
これを外したら、エラーなくデプロイに成功しました。
タイムアウトでWebAppが起動しない
デプロイ完了後、WebApp起動時にタイムアウトでうまく起動しないことが多々ありました。
これは、Web App の Application settings に新規で WEBSITES_CONTAINER_START_TIME_LIMIT という環境変数を追加することで解決しました。
Valueは1800まで許容されます。
まとめ
この記事では、Node.jsを使用したWebアプリをローカル環境で開発し、Azure Web App にデプロイする手順を紹介しました。
自分は特にPortの指定をするところで詰まってしまいましたが、Azureのサポートに問い合わせると丁寧に対応してくださりました！ありがたいですね。
読んでくださりありがとうございました🤗
Discussion