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

Question

mypackage.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，选择命令字段，从下拉列表中选择"自定义"，对于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门户中创建应用程序服务，并在项目设置中配置服务连接。

你可以参考这个博客和文档了解更多细节。