Skip to content

Latest commit

 

History

History
42 lines (34 loc) · 4.59 KB

README.md

File metadata and controls

42 lines (34 loc) · 4.59 KB
Raw

Projeto CI/CD com React + AWS

  • Caso de uso de App React com AWS CodeCommit, S3, CodePipeline, CodeBuild.

    • Iniciando Projeto
    • Requisitos: Git, vscode, Node.js V18, Conta na AWS.
    • Crie uma pasta e abra com o vscode e no terminal digite o comando para criar o app react de layout padrão

npx create-react-app sample-repo

ou

yarn create react-app sample-repo

  • AWS CODE COMMIT

  • AWS S3

    • Próximo passo é criar um bucket s3 na AWS onde será feito o upload desse projeto e suas atualizações.
    • Criar nome para o bucket , deixar com acesso publico.
    • Para evitar o erro na build ' An error occurred (AccessControlListNotSupported) when calling the PutObject operation: The bucket does not allow ACLs' é necessário configurar no s3 a Propriedade de objeto ou object ownership e selecionar ' ACLs habilitadas ' no menu de permissões e na propriedade de objeto deixar como ' Autor do objeto' .
    • O objetivo do bucket é receber o código transpilado/compilado do react.js pelo AWS CodeCommit.
    • Próximo passo é criar um arquivo yml no projeto e fazer o upload dele para o repositório CodeCommit o arquivo será responsavel pelo build no AWS CodeBuild e copiar os dados para o S3.
    • criar arquivo , buildspec.yml ele terá os parametros que vai especificar as fases que o build vai percorrer e criar os conteudos para o S3 via codecommit e codebuild, o arquivo yml precisa estar corretamente formatado nos padrões com espaçamento correto.
    • buildspec é o nome padrão que o codebuild vai buscar no diretório raiz do projeto.
    • 1º fase do buildspec instalar o runtime version node js v18 e depois criar o comando de instalar as dependências do projeto node ' npm install ' .
    • proxima etapa é o build , comando 'npm run script build' , ele será responsavel por transpilar o conteúdo do projeto para produção.
    • post build ultima fase , o comando que vai ser executado será um comando do AWS CLI que ja vem integrado no AWS CodeBuild , 'aws s3 cp build' copiar tudo que está na pasta do build para o bucket s3 ' nome do bucket ' de forma recursiva '--recursive ' ou sejá funçao recursiva que faz uma ou mais chamadas a ela mesma ,várias chamadas de cópias de vários arquivos e em seguida o paramêtro de permissão ao publico '--acl public read' sendo que no s3 já foi habilitado Acls.

  • AWS PIPELINE

    • próximo passo criar a pipeline e iniciar a esteira de automação de desenvolvimento.
    • em pipeline , Create Pipeline , configurações padrões , em source , colocar AWS CODECOMMIT , nome do repositório selecionar o sample-repo e a ramificação main . chance detection = aws codepipeline , artefato de saida = padrão , build provider = codebuild , create project , criar nome , environment - managed image - operating system - amazon linux 2 , runtime = standard , image = standard 3.0 . concluir tudo nas opções padroes , continue to codepipeline, compilação única , next , skip deploy stage pois já foi criado no buildspec.yml os stagios de deploy , create pipeline.
    • adicionar IAM ROLE para permitir o codebuild possa acessar o s3. em funções ou roles , selecionar o codebuild service role que tem o nome que criamos no codebuild. exemplo : ' codebuild-ReactWebBuild-service-role ' no lado direito clicar em adicionar permissões e anexar politicas, attach policies ' AmazonS3FullAccess '
    • agora retornar para codepipeline e clicar na pipeline criada,' ReactAppPipeline ' clicar em Lançar Alteração / Release change .
    • apartir de agora no s3 já é possivel identicar os arquivos da build sendo atualizados a cada git push que for feito e lá encontramos o arquivo index.html que tem a url que pode ser acessada publicamente conforme link abaixo.

    Projeto Online : https://fbs-dev-app.s3.amazonaws.com/index.html