Azure App Service で反応する
概要
この記事では、Azure App Service にデプロイされた React アプリの実験について共有したいと思います. 1) node_modules を含むルート フォルダー、2) スタートアップ コマンドを含むビルド フォルダーの 2 つのパターンが正しく機能します.起動コマンドは、Azure App Service にデプロイされている zip フォルダー構造に応じて慎重に選択する必要があります.
コードサンプル
React on App Service デプロイ実験
目次
Experiments
これは、起動コマンド
root と appsettings build をセットアップします.この背後にある理由については、この記事の後半で説明します..
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
└── tsconfig.json
構成の成功
The contents below show how you configure React and Azure App Service to make it work correctly.
アップロードしたフォルダ
npm run build is React root folder. npm install -g serve && serve -s . is generated with "WEBSITE_RUN_FROM_PACKAGE":"1" for React app.
root
.
├── node_modules
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
└── tsconfig.json
root + node_modules
upload.zip
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
├── css
│ ├── main.073c9b0a.css
│ └── main.073c9b0a.css.map
├── js
│ ├── 787.9750ae9a.chunk.js
│ ├── 787.9750ae9a.chunk.js.map
│ ├── main.e0162b9f.js
│ ├── main.e0162b9f.js.LICENSE.txt
│ └── main.e0162b9f.js.map
└── media
└── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
build
{
"type": "Microsoft.Web/sites",
"kind": "app",
"properties": {
"siteConfig": {
"linuxFxVersion": "NODE|16-lts",
"appCommandLine": "npm install -g serve && serve -s ."
}
}
},
{
"type": "Microsoft.Web/sites/config",
"properties": {
"WEBSITE_RUN_FROM_PACKAGE":"1"
}
}
ノード開発者の皆さん! (hostingstart.html)
404
成功
You can see the sample
ARM テンプレートのサンプル
起動コマンドと WEBSITE_RUN_FROM_PACKAGE
In this chapter, I am trying describe what trials I did and what were those results.
反応
Application Error
WEBSITE_RUN_FROM_PACKAGE=1
実験
When you set appsettings WEBSITE_RUN_FROM_PACKAGE=1 , the uploaded zip file and packagename.txt are generated. When you update the deployment source, zip files are added but packagename.txt is updated so it points to the newest zip file.
home
└── Data
└── SitePackages
├── 20220110085830.zip
├── 20220110094211.zip
├── 20220110100120.zip
├── 20220110100833.zip
└── packagename.txt
packagename.txt
20220110100833.zip
Azure App Service の起動コマンドとして npm install を設定すると、node_module のないルート フォルダーが機能することを期待していました.しかし、うまくいきませんでした. npm install と npm install && npm start を試しましたが、どちらも機能しませんでした.唯一の方法は、node_modules フォルダーと共にデプロイすることです.通常、node_modules フォルダーは大きいため、デプロイとしてアップロードしたくありません.したがって、ルート フォルダーを展開することは、ワークフローとしての実際のオプションではありません.
実験: ルート フォルダー
Red mark means newly added after deployment. Deployment is done through Azure CLI.
Azure CLI Powershell command example
az webapp config appsettings set --resource-group {Resource Group name} --name {App Service name} --settings WEBSITE_RUN_FROM_PACKAGE="1"
az webapp deployment source config-zip --resource-group {Resource Group name} --name {App Service name} --src .\upload.zip
WEBSITE_RUN_FROM_PACKAGE=0
この実験では、upload.zip フォルダーを作成し、CLI コマンドで Azure App Service にデプロイします. upload.zip には、upload.zip レベルの直下に index.html が含まれます.したがって、serve -s . は正しく機能します. serve -s build は 
のようには機能しません.また、スタックオーバーフロー 
から、 pm2 serve /home/site/wwwroot --no-daemon --spa はスタートアップコマンドでも機能します.
起動コマンドを設定しないと、「Hey, Node Developers!」と表示されます. /opt/startup/hostingstart.html を指しているためです.
opt
├── startup
│ └── hostingstart.html
home
└── site
└── wwwroot
└── hostingstart.html
Reference
この問題について(Azure App Service で反応する), 我々は、より多くの情報をここで見つけました
https://dev.to/koheikawata/react-on-azure-app-service-45pd
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
npm run build is React root folder. npm install -g serve && serve -s . is generated with "WEBSITE_RUN_FROM_PACKAGE":"1" for React app..
├── node_modules
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── index.css
│ ├── index.tsx
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── reportWebVitals.ts
│ └── setupTests.ts
└── tsconfig.json
upload.zip
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
├── css
│ ├── main.073c9b0a.css
│ └── main.073c9b0a.css.map
├── js
│ ├── 787.9750ae9a.chunk.js
│ ├── 787.9750ae9a.chunk.js.map
│ ├── main.e0162b9f.js
│ ├── main.e0162b9f.js.LICENSE.txt
│ └── main.e0162b9f.js.map
└── media
└── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
{
"type": "Microsoft.Web/sites",
"kind": "app",
"properties": {
"siteConfig": {
"linuxFxVersion": "NODE|16-lts",
"appCommandLine": "npm install -g serve && serve -s ."
}
}
},
{
"type": "Microsoft.Web/sites/config",
"properties": {
"WEBSITE_RUN_FROM_PACKAGE":"1"
}
}
When you set appsettings WEBSITE_RUN_FROM_PACKAGE=1 , the uploaded zip file and packagename.txt are generated. When you update the deployment source, zip files are added but packagename.txt is updated so it points to the newest zip file.
home
└── Data
└── SitePackages
├── 20220110085830.zip
├── 20220110094211.zip
├── 20220110100120.zip
├── 20220110100833.zip
└── packagename.txt
packagename.txt
20220110100833.zip
Azure App Service の起動コマンドとして
npm install を設定すると、node_module のないルート フォルダーが機能することを期待していました.しかし、うまくいきませんでした. npm install と npm install && npm start を試しましたが、どちらも機能しませんでした.唯一の方法は、node_modules フォルダーと共にデプロイすることです.通常、node_modules フォルダーは大きいため、デプロイとしてアップロードしたくありません.したがって、ルート フォルダーを展開することは、ワークフローとしての実際のオプションではありません.実験: ルート フォルダー
Red mark means newly added after deployment. Deployment is done through Azure CLI.
Azure CLI Powershell command example
az webapp config appsettings set --resource-group {Resource Group name} --name {App Service name} --settings WEBSITE_RUN_FROM_PACKAGE="1"
az webapp deployment source config-zip --resource-group {Resource Group name} --name {App Service name} --src .\upload.zip
WEBSITE_RUN_FROM_PACKAGE=0
この実験では、upload.zip フォルダーを作成し、CLI コマンドで Azure App Service にデプロイします. upload.zip には、upload.zip レベルの直下に index.html が含まれます.したがって、serve -s . は正しく機能します. serve -s build は のようには機能しません.また、スタックオーバーフロー から、 pm2 serve /home/site/wwwroot --no-daemon --spa はスタートアップコマンドでも機能します.
起動コマンドを設定しないと、「Hey, Node Developers!」と表示されます. /opt/startup/hostingstart.html を指しているためです.
opt
├── startup
│ └── hostingstart.html
home
└── site
└── wwwroot
└── hostingstart.html
Reference
この問題について(Azure App Service で反応する), 我々は、より多くの情報をここで見つけました
https://dev.to/koheikawata/react-on-azure-app-service-45pd
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
az webapp config appsettings set --resource-group {Resource Group name} --name {App Service name} --settings WEBSITE_RUN_FROM_PACKAGE="1"
az webapp deployment source config-zip --resource-group {Resource Group name} --name {App Service name} --src .\upload.zip
opt
├── startup
│ └── hostingstart.html
home
└── site
└── wwwroot
└── hostingstart.html
Reference
この問題について(Azure App Service で反応する), 我々は、より多くの情報をここで見つけました https://dev.to/koheikawata/react-on-azure-app-service-45pdテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol