在 azure devops 和 azure app services 上配置管道和部署 react app

Question

my package.json has the following in scripts section

"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"

}

so do I have to write steps to build pipeline to do all these?

Answer 1

1. Add npm task and configure the Command install to install npm packages
2. Add task npm, select the command field, choose from the dropdown “custom” and for the command and argument enter run build , we can configure the package.json file in the field Working folder that contains package.json
3. Add task CopyFiles , ArchiveFiles and PublishBuildArtifacts to publish artifact.
4. Create release pipeline->select the artifact as resource->add task Deploy Azure App Service to deploy your react app to azure app service.

Note: We need create app service in the Azure Portal and configure service connect in the project settings.

You can refer to this blog and doc for more details.