Implantação contínua do aplicativo React Native com Azure DevOps

Implantando seu aplicativo no React Native

A implantação é uma parte do fluxo de trabalho de desenvolvimento de software que pode ser facilmente automatizada. Automatizar a implantação remove muitos erros e permite que você se concentre nas coisas que importam.

No React Native, você deve normalmente implantar aplicativos em duas plataformas: Android e iOS. Ambas as plataformas usam linguagens e ferramentas de construção diferentes. Neste tutorial, construiremos um pipeline de implantação contínua de um aplicativo React Native no App Center via Azure DevOps .

Configurando seu projeto React Native

Primeiro, você precisa configurar um projeto React Native. Siga o guia oficial de configuração do React Native e inicialize o projeto usando o seguinte comando:

 npx init nativo reactivo MyProject

Após a conclusão do comando acima, navegue até o diretório do projeto recém-criado usando o seguinte comando:

 cd MyProject

Em seguida, crie o projeto usando yarn android -se você tiver o Android configurado-ou yarn ios se desejar testá-lo no iOS. Após a conclusão da compilação, você deverá ver a seguinte tela:

Agora precisamos enviar nosso código para o Azure DevOps. Vá para o Azure DevOps e crie um novo projeto usando este guia oficial .

Precisamos enviar o código do nosso projeto para o repositório Git deste projeto. Dentro do diretório do projeto, execute os seguintes comandos:

 git remote adicionar origem 
git push-u origin--all

Depois que seu código é enviado ao Azure DevOps, precisamos cuidar de algumas coisas antes de escrever o script de implantação. Primeiro, precisamos alterar os arquivos gradle do Android para que ele possa usar os parâmetros de compilação da linha de comando como argumentos. Em seguida, precisamos carregar todos os certificados e chaves Android/iOS para o Azure DevOps. Manter segredos no repo nunca é uma boa prática.

Alterando arquivos gradle no Android

Faça as seguintes alterações em seu arquivo android/build.gradle :

 diff--git a/android/build.gradle b/android/build.gradle
índice ed5a568..5cfd558 100644
---a/android/build.gradle
+++ b/android/build.gradle
@@-1,11 +1,25 @@
//Arquivo de construção de nível superior onde você pode adicionar opções de configuração comuns a todos os subprojetos/módulos. buildscript {
+
+ def getMyVersionCode={->
+ def code=project.hasProperty ('versionCode')? versionCode.toInteger (): 1
+ println"VersionCode está definido para $ code"
+ código de retorno
+}
+
+ def getMyVersionName={->
+ def name=project.hasProperty ('versionName')? versionName:"1.0"
+ println"VersionName está definido para $ name"
+ nome de retorno
+} ext { buildToolsVersion="29.0.2" minSdkVersion=16 compileSdkVersion=29
-targetSdkVersion=29
+ targetSdkVersion=29
+ versionName=getMyVersionName ()
+ versionCode=getMyVersionCode () } repositórios { Google()

Em seguida, adicione as seguintes alterações em seu arquivo android/app/build.gradle :

 diff--git a/android/app/build.gradle b/android/app/build.gradle
índice 64f4347..5774b17 100644
---a/android/app/build.gradle
+++ b/android/app/build.gradle
@@-132,8 +132,8 @@ android { applicationId"com.myproject" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion
-versionCode 1
-versionName"1.0"
+ versionCode rootProject.ext.versionCode
+ versionName rootProject.ext.versionName } divide { abi {

Adicionando segredos ao Azure DevOps

Primeiro, siga o guia oficial do React Native para criar uma chave de assinatura de produção e obter um arquivo .keystore e credenciais. Em segundo lugar, gere credenciais iOS (perfil de provisionamento e certificado de assinatura) usando sua conta Apple. Vá para Azure DevOps → Seu projeto → Pipelines → Biblioteca e crie um novo grupo de variáveis ​​conforme mostrado nas seguintes capturas de tela:

Em seguida, vá para Azure DevOps → Seu projeto → Pipelines → Biblioteca e carregue o certificado de assinatura do iOS e o perfil de provisionamento, bem como a chave de assinatura do Android, conforme mostrado na captura de tela abaixo:

Escrevendo script de pipeline de implantação do Azure

Agora está tudo pronto com as configurações necessárias. Vamos começar a escrever o script do pipeline do Azure.

Na raiz do seu projeto, crie um novo arquivo:

 touch azure-pipelines.yml

Neste arquivo, primeiro, diremos quando o script deve ser executado. Vou acioná-lo em cada commit no branch master. Existem muitas maneiras de acionar o script. Com base no nome do branch ou quando uma nova tag é enviada, etc. As possibilidades são infinitas. Existe um abrangente lista de acionadores em documentos oficiais que você pode usar. Adicione as seguintes linhas ao arquivo:

 gatilho: galhos: incluir: -mestre

Depois disso, precisamos definir que usaremos as variáveis ​​ambientais e os arquivos seguros que acabamos de configurar em Pipelines → Biblioteca . Adicione as seguintes linhas no final do seu arquivo atual:

variáveis ​​

: -group: Mobile # altere para o nome que você definiu

Vamos agora dizer ao sistema operacional em que queremos executar este script. Como o iOS pode ser construído apenas no MacOS, mas o Android pode ser construído em todas as plataformas, é melhor usar apenas o MacOS, pois ele acomodará ambas as plataformas. Adicione as seguintes linhas no final do seu arquivo atual:

piscina

: vmImage:'macos-latest'

Siga estas etapas uma por uma:

1. Check-out : código de check-out do repo.

   -checkout: self persistCredentials: true limpo: verdadeiro 

2. Instalar Nó : Instale a versão necessária de Node.js .

   -tarefa: NodeTool @ 0 displayName:'Instalar Nó' entradas: versionSpec:'12.19.0'# você pode usar a versão desejada aqui 

3. Instalar dependências : instale as dependências listadas em package.json .

   -script: instalação do yarn displayName: instale dependências 

4. Bump versão e definir variáveis ​​: Bump versão em package.json e definir essa versão para as variáveis ​​ambientais a serem usadas em etapas posteriores como versão de construção.

   -script: | # Desative o autocommit no aumento da versão yarn config set version-sign-git-tag false yarn config set version-git-tag false yarn config set version-commit-hooks falso # Branch Checkout onde a construção é acionada git checkout $ (Build.SourceBranchName) # Extraia a versão existente de package.json oldVer=$ (jq-r".version"package.json) # Versão Bump versão do fio-patch # Adicionar versão reforçada ao teste git add * # Extraia a nova versão de package.json newVer=$ (jq-r".version"package.json) # Definir variáveis ​​de ambiente echo"## vso [task.setvariable variable=OLD_VERSION] $ oldVer" echo"## vso [task.setvariable variable=NEW_VERSION] $ newVer" displayName:'Bump versão e definir variáveis'

5. Versão Bump iOS : versão Bump no projeto iOS.

   -tarefa: ios-bundle-version @ 1 displayName:'Bump versão iOS' entradas: sourcePath:'ios/MyProject/Info.plist' versionCodeOption:'buildid' versionCode:'$ (Build.BuildId)' versionName:'$ (NEW_VERSION)' printFile: false 

6. Construir APK não assinado : Construir APK não assinado. A assinatura será feita na próxima etapa. Você pode ver como estamos passando NEW_VERSION como o argumento para o script de compilação do Gradle.

   -tarefa: Gradle @ 2 displayName:'Build APK' entradas: gradleWrapperFile:'android/gradlew' workingDirectory:'android/' opções:'-PversionName=$ (NEW_VERSION)-PversionCode=$ (Build.BuildId)' tarefas:'assembleRelease' publicarJUnitResults: false javaHomeOption:'JDKVersion' jdkVersionOption:'1.8' gradleOptions:'-Xmx3072m' sonarQubeRunAnalysis: false 

7. Assinar APK : assine o APK usando o arquivo keystore e a senha que armazenamos em Pipelines → Biblioteca . AndroidKeyStorePassword , AndroidKeyAlias ​​ e AndroidKeyAliasPassword vêm da Biblioteca. Certifique-se de que esses nomes correspondam ao que você definiu na Biblioteca.

   -tarefa: AndroidSigning @ 3 displayName:'Assinar APK' entradas: apkFiles:'android/app/build/outputs/apk/release/*. apk' apksignerKeystoreFile:'mobile-prod.keystore' apksignerKeystorePassword:'$ (AndroidKeyStorePassword)' apksignerKeystoreAlias:'$ (AndroidKeyAlias)' apksignerKeyPassword:'$ (AndroidKeyAliasPassword)' zipalign: verdadeiro 

8. Publicar APK em artefatos : para o APK gerado nas etapas anteriores, precisamos publicá-lo em artefatos porque precisamos acessá-lo em etapas posteriores para carregá-lo no App Center.

   -tarefa: PublishBuildArtifacts @ 1 displayName:'Publicar APK em artefatos' entradas: PathtoPublish:'android/app/build/outputs/apk/release' Nome do artefato:'android' publicarLocalização:'Contêiner'

9. Faça upload do APK para o App Center : faça upload do APK para o App Center Aqui, appSlug pode ser encontrado no URL de seu aplicativo no App Center, e distributionGroupId pode ser encontrado no grupo de distribuição de seu aplicativo no App Center.

   -tarefa: AppCenterDistribute @ 3 displayName:'Upload APK to AppCenter' entradas: serverEndpoint:'App Center' appSlug:'hnadeem/MyProject-Android' appFile:'android/app/build/outputs/apk/release/app-release-unsigned.apk' releaseNotesOption:'arquivo' isMandatory: true destinationType:'grupos' DistributionGroupId:'f940ccde-a812-4ade-98d8-76c3ab1d0c2e' isSilent: true 

10. Bump commit : até agora, atualizamos a versão no projeto package.json , Android e iOS. Agora precisamos confirmar essas mudanças.

    -script: | tag="móvel _ $ (NEW_VERSION)" echo"Nova tag $ tag" git add * git commit-m"Atualizar versão de $ (OLD_VERSION) para $ (NEW_VERSION)" git tag $ tag git pull--rebase origin $ (Build.SourceBranchName) git push origin $ (Build.SourceBranchName) git push--tags displayName: Bump commit 

11. Instalar o certificado Apple : a partir dos certificados carregados em Pipelines → Biblioteca , precisamos instalar o certificado de assinatura antes de construir o aplicativo iOS. AppleCertificatePassword vem da Biblioteca. Certifique-se de que esse nome corresponda ao definido na Biblioteca.

    -tarefa: InstallAppleCertificate @ 2 displayName: Instale o certificado Apple entradas: certSecureFile:'MobileProd.p12' certPwd:'$ (AppleCertificatePassword)' chaveiro:'temp' deleteCert: true 

12. Instalar perfil de aprovisionamento da Apple : a partir dos certificados carregados em Pipelines → Biblioteca , precisamos instalar o perfil de aprovisionamento antes de construir o aplicativo iOS.

    -tarefa: InstallAppleProvisioningProfile @ 1 displayName:'Instalar perfil de provisionamento Apple' entradas: provisioningProfileLocation:'secureFiles' provProfileSecureFile:'MyProject.mobileprovision' removeProfile: true 

13. Instalar CocoaPods : depois de instalar todas as dependências nas etapas anteriores, também precisamos instalar pods.

    -tarefa: CocoaPods @ 0 displayName:'Instalar CocoaPods' entradas: workingDirectory:'ios'

14. Compilar IPA : para compilar iOS, você pode ver como estamos usando APPLE_CERTIFICATE_SIGNING_IDENTITY e APPLE_PROV_PROFILE_UUID , que são preenchidos automaticamente pelo Azure DevOps com base em nossas etapas anteriores em que fornecemos certificados.

    -tarefa: Xcode @ 5 displayName:'Build IPA' entradas: ações:'construir' configuração:'Release' sdk:'iphoneos' xcWorkspacePath:'ios/MyProject.xcworkspace' esquema:'MeuProjeto' packageApp: true exportPath:'output' assinaturaOpção:'manual' SignIdentity:'$ (APPLE_CERTIFICATE_SIGNING_IDENTITY)' provisioningProfileUuid:'$ (APPLE_PROV_PROFILE_UUID)'

15. Copiar IPA : precisamos copiar o IPA para o diretório de teste antes de publicá-lo nos artefatos.

    -tarefa: CopyFiles @ 2 displayName:'Copiar IPA' entradas: conteúdo:'**/*. ipa' targetFolder:'$ (build.artifactStagingDirectory)' overWrite: true flattenFolders: true 

16. Publicar IPA para artefatos : para o IPA gerado nas etapas anteriores, precisamos publicá-lo para artefatos porque precisamos acessá-lo em etapas posteriores para carregá-lo no App Center.

    -tarefa: PublishBuildArtifacts @ 1 displayName:'Publicar IPA para artefatos' entradas: PathtoPublish:'$ (build.artifactStagingDirectory)' Nome do artefato:'ios' publicarLocalização:'Contêiner'

17. Carregar IPA para o App Center : carregue o APK para o App Center. Aqui, appSlug pode ser encontrado na URL de seu aplicativo no App Center, e distributionGroupId pode ser encontrado no grupo de distribuição de seu aplicativo no App Center.

    -tarefa: AppCenterDistribute @ 3 displayName:'Upload IPA to AppCenter' entradas: serverEndpoint:'App Center' appSlug:'hnadeem/MyProject-Android' appFile:'output/MyProject.ipa' releaseNotesOption:'arquivo' isMandatory: true destinationType:'grupos' DistributionGroupId:'058a4704-ea24-4877-a2f0-bdfaff9335dc' isSilent: true 

Isso é tudo na parte de script! Aqui está nosso azure-pipelines.yml completo para este tutorial:

 gatilho: galhos: incluir: -mestre
variáveis: -group: Mobile # altere para o nome que você definiu
piscina: vmImage:'macos-latest'
degraus: -checkout: self persistCredentials: true limpo: verdadeiro -tarefa: NodeTool @ 0 displayName:'Instalar Nó' entradas: versionSpec:'12.19.0'# você pode usar a versão desejada aqui -script: instalação do yarn displayName: Instalar Dependências -script: | # Desative o autocommit no aumento da versão yarn config set version-sign-git-tag false yarn config set version-git-tag false yarn config set version-commit-hooks falso # Branch Checkout onde a construção é acionada git checkout $ (Build.SourceBranchName) # Extraia a versão existente de package.json oldVer=$ (jq-r".version"package.json) # Versão Bump versão do fio-patch # Adicionar versão reforçada ao teste git add * # Extraia a nova versão de package.json newVer=$ (jq-r".version"package.json) # Definir variáveis ​​de ambiente echo"## vso [task.setvariable variable=OLD_VERSION] $ oldVer" echo"## vso [task.setvariable variable=NEW_VERSION] $ newVer" displayName:'Bump version and set variables' -tarefa: ios-bundle-version @ 1 displayName:'Bump versão iOS' entradas: sourcePath:'ios/MyProject/Info.plist' versionCodeOption:'buildid' versionCode:'$ (Build.BuildId)' versionName:'$ (NEW_VERSION)' printFile: false -tarefa: Gradle @ 2 displayName:'Build APK' entradas: gradleWrapperFile:'android/gradlew' workingDirectory:'android/' opções:'-PversionName=$ (NEW_VERSION)-PversionCode=$ (Build.BuildId)' tarefas:'assembleRelease' publicarJUnitResults: false javaHomeOption:'JDKVersion' jdkVersionOption:'1.8' gradleOptions:'-Xmx3072m' sonarQubeRunAnalysis: false -tarefa: AndroidSigning @ 3 displayName:'Assinar APK' entradas: apkFiles:'android/app/build/outputs/apk/release/*. apk' apksignerKeystoreFile:'mobile-prod.keystore' apksignerKeystorePassword:'$ (AndroidKeyStorePassword)' apksignerKeystoreAlias:'$ (AndroidKeyAlias)' apksignerKeyPassword:'$ (AndroidKeyAliasPassword)' zipalign: true -tarefa: PublishBuildArtifacts @ 1 displayName:'Publicar APK em artefatos' entradas: PathtoPublish:'android/app/build/outputs/apk/release' Nome do artefato:'android' publicarLocalização:'Contêiner' -tarefa: AppCenterDistribute @ 3 displayName:'Upload APK to AppCenter' entradas: serverEndpoint:'App Center' appSlug:'hnadeem/MyProject-Android' appFile:'android/app/build/outputs/apk/release/app-release-unsigned.apk' releaseNotesOption:'arquivo' isMandatory: true destinationType:'grupos' DistributionGroupId:'f940ccde-a812-4ade-98d8-76c3ab1d0c2e' isSilent: true -script: | tag="móvel _ $ (NEW_VERSION)" echo"Nova tag $ tag" git add * git commit-m"Atualizar versão de $ (OLD_VERSION) para $ (NEW_VERSION)" git tag $ tag git pull--rebase origin $ (Build.SourceBranchName) git push origin $ (Build.SourceBranchName) git push--tags displayName: Bump commit -tarefa: InstallAppleCertificate @ 2 displayName: Instale o certificado Apple entradas: certSecureFile:'MobileProd.p12' certPwd:'$ (AppleCertificatePassword)' chaveiro:'temp' deleteCert: true -tarefa: InstallAppleProvisioningProfile @ 1 displayName:'Instalar perfil de provisionamento Apple' entradas: provisioningProfileLocation:'secureFiles' provProfileSecureFile:'MyProject.mobileprovision' removeProfile: true -tarefa: CocoaPods @ 0 displayName:'Instalar CocoaPods' entradas: workingDirectory:'ios' -tarefa: Xcode @ 5 displayName:'Build IPA' entradas: ações:'construir' configuração:'Release' sdk:'iphoneos' xcWorkspacePath:'ios/MyProject.xcworkspace' esquema:'MeuProjeto' packageApp: true exportPath:'output' assinaturaOpção:'manual' SignIdentity:'$ (APPLE_CERTIFICATE_SIGNING_IDENTITY)' provisioningProfileUuid:'$ (APPLE_PROV_PROFILE_UUID)' -tarefa: CopyFiles @ 2 displayName:'Copiar IPA' entradas: conteúdo:'**/*. ipa' targetFolder:'$ (build.artifactStagingDirectory)' overWrite: true flattenFolders: true -tarefa: PublishBuildArtifacts @ 1 displayName:'Publicar IPA para artefatos' entradas: PathtoPublish:'$ (build.artifactStagingDirectory)' Nome do artefato:'ios' publicarLocalização:'Contêiner' -tarefa: AppCenterDistribute @ 3 displayName:'Upload IPA to AppCenter' entradas: serverEndpoint:'App Center' appSlug:'hnadeem/MyProject-iOS' appFile:'output/MyProject.ipa' releaseNotesOption:'arquivo' isMandatory: true destinationType:'grupos' DistributionGroupId:'058a4704-ea24-4877-a2f0-bdfaff9335dc' isSilent: true

Agora é hora de enviar nosso commit para o branch master para ver este script de implantação em ação.

Aqui você pode ver a execução do trabalho no branch master e que dois artefatos foram publicados.

Conclusão

Este foi um breve tutorial sobre como configurar um pipeline de implantação contínua no Azure DevOps para um projeto React Native. Usando a implantação contínua, você se livrará de erros humanos e economizará muito tempo. Qualquer novo desenvolvedor poderá começar a trabalhar no projeto sem se preocupar com as implantações.

A postagem Implantação contínua do React Native aplicativo com Azure DevOps apareceu primeiro no LogRocket Blog .

Source link