NextJS+ReactJSなWebアプリをAzure WebAppsにデプロイしてみた

投稿者 投稿日:

はじめに

前回の記事から随分と経ってしまいましたが、筆者は生存しております。

さて、今回の記事ではリアクティブなWebアプリをAzureWebAppsにデプロイしようという内容です。

言わずもがな、Azure的にはStaticWebを使って欲しい意志を感じますが、そこは争っていきます。

実際にやる前に

当ブログでは、Azureアカウント, サブスクリプション作成等の最低限の準備は整っているものとして進めていきます。また、筆者はUNIXベースのOSで話が進むため、WindowsNT系の場合はご自身で翻訳してください。悪しからず。

早速実践

このブログでは、基本的に上から順番に実施していく想定をしており、「[xxx]」の括弧は実際にコマンドを実行する際には不要。

  • リソースグループを東日本リージョンに作成
az group create -l japaneast -n prac_$(uuidgen | tr "[:upper:]" "[:lower:]")
  • Azure AppService Plan を東日本リージョンに作成
az appservice plan create -g [さっきのリソースグループID] -n prac_$(uuidgen | tr "[:upper:]" "[:lower:]") --is-linux -l japanwest --sku F1
  • Azure AppService Appを作成
az webapp create -g [さっきのリソースグループID] -p [さっきの
プランID] -n prac-$(uuidgen | tr "[:upper:]" "[:lower:]") --runtime "NODE:18-lts"
  • Azure AppService Appに環境変数を設定
az webapp config appsettings set --resource-group [リソースグループ名] --name [WebApps名] --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true
  • NextJSのプロジェクトを作成
npx create-next-app
✔ What is your project named? … sample-app
✔ Would you like to use TypeScript? … No / [Yes]
✔ Would you like to use ESLint? … No / [Yes]
✔ Would you like to use Tailwind CSS? … No / [Yes]
✔ Would you like to use `src/` directory? … No / [Yes]
✔ Would you like to use App Router? (recommended) … No / [Yes]
✔ Would you like to customize the default import alias? … [No] / Yes
  • ReactJSのインストール(runコマンドで確認)
cd [npxで出来たフォルダ]
npm install react react-dom
npm run dev
  • WebAppsにデプロイを行い、返ってきた値のURLでアクセス
az webapp up --sku F1 --name [WebApp名] --runtime "NODE:18-lts"
{
  "URL": "http://XXXXX.azurewebsites.net",
  "appserviceplan": "XXXXXXXXX",
  "location": "japanwest",
  "name": "XXXXXXXX",
  "os": "Linux",
....
}

まとめ

筆者が一番詰まったのは、ポート番号まわりでエラーになったこと。

エラーから何が起こっているのかを推測するのが苦労した。