如何让 React.js 应用在 Azure 应用服务上运行？答案

【问题标题】：How to get a React.js app running on Azure App Services?如何让 React.js 应用在 Azure 应用服务上运行？
【发布时间】：2017-05-31 09:08:18
【问题描述】：

我有一个简单的 React.js 应用程序，可以在我的本地主机上 100% 完美运行。

例如 - 克隆 git 仓库 - 转到克隆仓库的根文件夹 - npm install - npm start 并且浏览器在端口 3000 上打开。效果很好！

现在，我正在尝试将此应用程序升级到 Azure 应用程序服务（以前称为 Azure 网站）。

因为我的代码位于一个 git 存储库中，所以我将我的 Azure 应用服务/网站连接到一个 git 存储库并且 KUDU 在提交时启动。所以 git 部署 webhook 正在工作，但我不认为其他任何事情:(

这是我的packages.json 文件：

{
  "name": "Test Website",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.5"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

注意到"build": "react-scripts build" 了吗？我相信这是我需要运行的命令才能实际构建此应用以进行生产。

即npm run build

第一季度。

那么 - 我如何才能在 git commit/push 上完成这两个步骤？

npm install
npm run build

第二季度。

我需要在我的startup 文件中设置什么特别的东西吗？我认为npm run build 将所有新创建的文件扔到\build 文件夹中，所以我假设我需要将启动文件设置为build\index.html？

干杯！

【问题讨论】：

标签： node.js azure reactjs deployment

【解决方案1】：

您需要为 Kudu 创建自己的自定义部署脚本。幸运的是，azure-cli 工具中有一个部署脚本生成器。

更多详情请见 Kudu wiki： https://github.com/projectkudu/kudu/wiki/Custom-Deployment-Script

【讨论】：

【解决方案2】：

我不相信 Azure 支持这种开箱即用的功能..

From the Node Docs:

Azure 云服务期望所有模块都安装在开发环境中，并且 node_modules 目录作为部署包的一部分包含在内。可以在云服务上启用对使用 package.json 或 npm-shrinkwrap.json 文件安装模块的支持，但这需要自定义云服务项目使用的默认脚本。有关如何完成此操作的示例，请参阅Azure Startup task to run npm install to avoid deploying node modules。

tl;dr; 默认情况下，Azure 在部署到容器之前不会“构建”或预处理任何内容。似乎有一些方法可以解决它，但为了起步，在部署之前构建可能会更容易。

【讨论】：

【解决方案3】：

kuduscript 将生成 deploy.cmd，如 Kudu wiki 中所述：https://github.com/projectkudu/kudu/wiki/Custom-Deployment-Script

kuduscript --basic -t batch  -y

在deploy.cmd中，在调用KuduSync之前，可以添加：

:: 1. Installing npm packages
echo Installing npm packages.
call :ExecuteCmd npm install
IF !ERRORLEVEL! NEQ 0 goto error

:: 2. Build the react site
echo Building react site
call :ExecuteCmd npm run build
IF !ERRORLEVEL! NEQ 0 goto error

并且，在对 KuduSync 的调用中，将“\build”添加到：%DEPLOYMENT_SOURCE%\build

对于 Windows/IIS，IIS 将从 wwwroot（KuduSync 复制的）中挑选 index.html，并为静态站点提供服务。

【讨论】：