在当今快节奏的软件开发环境中，有效，无缝地部署应用程序至关重要。在此博客文章中，我将引导您完成设置BitBucket管道的过程，以自动化使用JavaScript和Node.js构建的Web应用程序的部署到Azure static static Web应用程序和Azure App Service。
这是我简单的Bitbucket管道，用于构建和发布基于Nodejs的API，以及基于JS的浏览器到Azure static Web App
image: node:18
pipelines:
default:
- parallel:
- step:
name: Server - Build and Test
caches:
- node
script:
- cd server
- npm install
- echo 'Add test later'
- step:
name: Code linting
script:
- cd server
- npm install eslint
- echo 'Add eslint config file to server'
caches:
- node
branches:
master:
- parallel:
- step:
name: Server Code:Build
caches:
- node
script:
- cd server
- npm install
- apt update && apt install zip
# Exclude files to be ignored
- zip -r app-wp-cloud-$BITBUCKET_BUILD_NUMBER.zip . -x *.git* bitbucket-pipelines.yml
artifacts:
- server/*.zip
- step:
name: Client Code:Build
script:
- cd client
- npm ci
- npm run build
artifacts:
- client/dist/**
variables:
- VITE_API_URL: $VITE_API_URL
- VITE_AUTH_TOKEN: $VITE_AUTH_TOKEN
- step:
name: Security Scan
script:
# Run a security scan for sensitive data.
# See more security tools at https://bitbucket.org/product/features/pipelines/integrations?&category=security
- pipe: atlassian/git-secrets-scan:0.5.1
- parallel:
- step:
name: Server Code:Deploy to Production
trigger: manual
script:
- cd server
- pipe: atlassian/azure-web-apps-deploy:1.0.1
variables:
AZURE_APP_ID: $AZURE_CLIENT_ID
AZURE_PASSWORD: $AZURE_CLIENT_SECRET
AZURE_TENANT_ID: $AZURE_TENANT_ID
AZURE_RESOURCE_GROUP: $AZURE_RESOURCE_GROUP
AZURE_APP_NAME: $AZURE_SERVER_APP_NAME
ZIP_FILE: server-$BITBUCKET_BUILD_NUMBER.zip
- step:
name: Client Code:Deploy to Production
trigger: manual
script:
- pipe: microsoft/azure-static-web-apps-deploy:main
variables:
APP_LOCATION: '$BITBUCKET_CLONE_DIR/client/dist'
OUTPUT_LOCATION: ''
SKIP_APP_BUILD: 'true'
API_TOKEN: $deployment_token
custom:
client:
- step:
name: Client Code:Build
script:
- cd client
- npm ci
- npm run build
artifacts:
- client/dist/**
variables:
- VITE_API_URL: $VITE_API_URL
- VITE_AUTH_TOKEN: $VITE_AUTH_TOKEN
- step:
name: Client Code:Deploy to test
deployment: test
script:
- pipe: microsoft/azure-static-web-apps-deploy:main
variables:
APP_LOCATION: '$BITBUCKET_CLONE_DIR/client/dist'
OUTPUT_LOCATION: ''
SKIP_APP_BUILD: 'true'
API_TOKEN: $deployment_token
DEPLOYMENT_ENVIRONMENT: test
此Bitbucket管道配置定义了一系列用于构建，测试，绒毛和部署应用程序的服务器和客户端组件的步骤。这是主要部分的细分：
图像定义：管道首先定义用于运行管道步骤的Docker映像。在这种情况下，它使用节点：18映像。
默认步骤：默认情况下将对所有分支执行这些步骤。它包括用于构建和测试服务器的并行步骤以及执行代码伸缩。
特定于分支的步骤（主分支）：这些步骤特定于主分支。它包括用于构建和测试服务器，构建客户端代码并执行安全扫描的并行步骤。它还包括用于部署到生产服务器并将客户端代码部署到生产的手动部署步骤。
自定义步骤（客户端分支）：这些步骤是在自定义部分下定义的，仅针对名为client的特定分支执行。它包括构建和部署客户码到测试环境。
此管道配置演示了如何将Bitbucket管道与Azure Services集成在一起，以使JavaScript和Node.js应用程序自动化部署过程。它涵盖构建步骤，测试，代码伸缩，安全扫描以及对生产和测试环境的部署。确保用与项目相关的实际值替换占位符变量（例如$ azure_client_id，$ vite_api_url）。
有了该管道，您的部署过程变得更加高效和可靠，使您可以专注于构建出色的应用程序而不必担心部署复杂性。