配置管道并在azure devops和azure应用服务上部署react应用

Question

我的package.json在脚本部分具有以下内容

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"lint:check": "eslint . --ext=js,jsx;  exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
"build-package-css": "cp src/assets/css/material-dashboard-react.css dist/material-dashboard-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist"

}

所以我必须写一些步骤来构建管道来完成所有这些工作吗？

Answer 1

1. 添加npm任务并配置命令install以安装npm软件包
2. 添加任务npm，选择命令字段，从下拉菜单“ custom”中选择，然后为command and argument输入run build，我们可以在字段Working folder that contains package.json中配置package.json文件。
3. 添加任务CopyFiles，ArchiveFiles和PublishBuildArtifacts以发布工件。
4. 创建发布管道->选择工件作为资源->添加任务Deploy Azure App Service，将您的React应用程序部署到Azure应用服务。

注意：我们需要在Azure门户中创建应用程序服务，并在项目设置中配置服务连接。

您可以参考此blog和doc以获得更多详细信息。