O que são ações do GitHub?
GitHub Actions é um serviço gratuito do GitHub que nos permite automatizar tarefas de código.
Eu escreveu anteriormente sobre como podemos usá-los para automatizar tarefas como executar testes em nosso código e enviar notificações ao Slack.
Eles fornecem uma maneira flexível de executar código automaticamente com base em nossos fluxos de trabalho existentes. Isso oferece muitas possibilidades, como até mesmo implantar nosso site!
O que é AWS S3?
S3 (Simple Storage Service) é um serviço de armazenamento de objeto da AWS. Ele permite que você armazene arquivos na nuvem, tornando-os facilmente disponíveis em todo o mundo.
Ele também permite que você use esses arquivos como um site. Como podemos fazer upload de um arquivo HTML como um objeto, também podemos configurar o S3 para acessar esse arquivo como uma solicitação HTTP. Isso significa que podemos hospedar um site inteiro direto no S3.
O que é implantação contínua?
A implantação contínua, frequentemente chamada de CD de acrônimo, é a prática de manter o código em um estado liberável e implantá-lo automaticamente ou em ciclos curtos.
Particularmente em nosso caso de uso, vamos configurar nosso projeto de forma que, sempre que uma nova atualização for enviada ou mesclada ao branch principal do Git, nosso site será implantado.
O que vamos construir?
Primeiro vamos inicializar um simples Next.js aplicativo usando o modelo inicial Next.js padrão e configurá-lo para compilar para arquivos estáticos.
Se você não quiser criar um projeto Next.js, pode acompanhar até mesmo um arquivo HTML simples e não executar nenhum dos comandos de construção. Mas Next.js é uma maneira moderna de construir aplicativos da web dinâmicos, então vamos começar por aí.
Com os arquivos de nosso site prontos para uso, criaremos e configuraremos um bucket S3 na AWS onde hospedaremos nosso site.
Por fim, criaremos um novo fluxo de trabalho GitHub Action que atualizará automaticamente os arquivos do site no S3 sempre que ocorrer uma nova alteração em nosso branch principal (main)
Etapa 0: configurar um novo projeto Next.js no GitHub
Vamos começar com o modelo padrão com Next.js.
Depois de navegar até o diretório em que deseja criar seu projeto, execute:
yarn create next-app my-static-website# ornpx create-next-app my-static-websiteNota: Sinta-se à vontade para substituir my-static-website com o nome de sua escolha. Usaremos isso para o resto deste tutorial.
Se você navegar até esse diretório e executar o comando de desenvolvimento, deverá conseguir iniciar o servidor de desenvolvimento com êxito.
cd my-static-websiteyarn dev# ornpm run dev
A seguir, vamos configurar nosso projeto para compilar estaticamente.
Dentro de package.json arquivo, atualize o build script para:
"build": "next build && next export",O que isso fará é dizer ao Next para pegar o site e exportá-lo para arquivos estáticos, que usaremos para hospedar o site.
Podemos testar isso executando o comando:
yarn build# ornpm run buildE uma vez terminado, podemos olhar dentro do out diretório e veja todos os arquivos do nosso novo site.
Por fim, queremos hospedar isso no GitHub.
Dentro de sua conta GitHub, crie um novo repositório. Isso fornecerá instruções sobre como você pode adicionar um projeto existente para esse repo.
E assim que você enviar nosso projeto para o GitHub, devemos estar prontos para configurar nosso novo projeto de site!
Acompanhe os commits:
Etapa 1: criar e implantar manualmente um projeto Next.js em um novo Bucket S3
Para começar com nosso novo S3 Bucket, primeiro faça login em sua conta da AWS e navegue até o serviço S3.
Queremos criar um novo bucket, usando o nome de nossa escolha, que será usado para o endpoint S3 onde nosso site está hospedado. Também queremos configurar nosso bucket S3 para poder hospedar um site.
Nota: este tutorial não irá orientá-lo sobre como hospedar um site no S3, mas você pode verificar meu outro tutorial que irá guiará você pela hospedagem de um site no S3 passo a passo.
Assim que tivermos nosso bucket S3 configurado como um site, podemos voltar para a nossa pasta de projeto Next.js, executar nosso comando de construção e, em seguida, carregar todos os nossos arquivos do out diretório em nosso novo bucket S3.
E depois que esses arquivos forem carregados e tivermos configurado nosso bucket S3 para hospedagem de sites, agora devemos ser capazes de ver nosso projeto ao vivo na web!
Etapa 2: criar um novo fluxo de trabalho de ação do GitHub para construir automaticamente um projeto Next.js.
Para começar, vamos precisar criar um novo fluxo de trabalho.
Se você estiver familiarizado com o GitHub Actions, poderá criar um manualmente, mas veremos rapidamente como fazer isso na IU.
Navegue até a guia Actions de seu repositório GitHub e clique em "configurar um fluxo de trabalho você mesmo".
O GitHub fornece um modelo inicial que podemos usar em nosso fluxo de trabalho, embora desejemos fazer algumas alterações.
Vamos fazer o seguinte:
- Opcional: renomeie o arquivo para deploy.yml
- Opcional: renomeie o fluxo de trabalho para CD (pois é um pouco diferente do CI)
- Opcional: remova todos os comentários para facilitar a leitura
- Remova o
pull_requestdefinição noonpropriedade - Deletar tudo
stepsexceto poruses: actions/checkout@v2
Então, neste ponto, devemos ficar com:
name: CDon: push: branches: [ main ]jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2Este código por si só irá disparar um processo que ativa uma nova instância do Ubuntu e simplesmente verifica o código do GitHub sempre que houver uma nova mudança enviada para o main ramo.
Em seguida, uma vez que nosso código seja verificado, queremos construí-lo. Isso nos permitirá pegar essa saída e sincronizá-la com o S3.
Esta etapa será um pouco diferente dependendo se você está usando yarn ou npm para seu projeto.
Se você estiver usando fio, sob o steps definição, adicione o seguinte:
- uses: actions/setup-node@v1 with: node-version: 12- run: npm install -g yarn- run: yarn install --frozen-lockfile- run: yarn buildSe você estiver usando npm, adicione o seguinte:
- uses: actions/setup-node@v1 with: node-version: 12- run: npm ci- run: npm run buildEntre esses dois conjuntos de etapas, o que estamos fazendo é:
- Configurando o nó: isso é para que possamos usar npm e nó para instalar e executar nossos scripts
- Instalar Yarn (apenas Yarn): se estivermos usando yarn, nós o instalamos como uma dependência global para que possamos usá-lo
- Instalar Dependências: instalamos nossas dependências e usamos um comando específico que garante que usamos o arquivo de bloqueio disponível para evitar qualquer atualização de pacote inesperada
- Build: finalmente, executamos nosso comando build que irá compilar nosso projeto Next.js no
outdiretório!
E agora podemos enviar esse arquivo direto para o nosso main branch que dará início a uma nova execução de nosso fluxo de trabalho, que podemos ver em nossa guia Actions.
Para ver se funciona, podemos navegar até essa execução, selecionar nosso fluxo de trabalho e ver se todas as nossas etapas foram executadas, incluindo a construção de nosso projeto!
Etapa 3: configurar uma ação do GitHub para implantar um site estático no S3
Agora que estamos construindo nosso projeto automaticamente, queremos atualizar automaticamente nosso site no S3.
Para fazer isso, vamos usar o GitHub Action aws-actions / configure-aws-credentials e o AWS CLI.
A ação GitHub que estamos usando pegará nossas credenciais e configuração da AWS e as disponibilizará para uso durante todo o ciclo de vida do fluxo de trabalho.
A partir de agora, a instância do Ubuntu que o GitHub Actions fornece nos permite usar o AWS CLI conforme ele vem incluído. Portanto, poderemos usar os comandos CLI diretamente em nosso fluxo de trabalho.
Alternativamente, podemos usar o Ação de sincronização S3. Mas, usando o AWS CLI, ganhamos mais flexibilidade para personalizar nossa configuração, podemos usá-lo para comandos CLI adicionais e também é geralmente bom se familiarizar com o AWS CLI.
Portanto, para começar, vamos adicionar o seguinte snippet como etapas adicionais em nosso fluxo de trabalho:
- uses: aws-actions/configure-aws-credentials@v1 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: us-east-1O que o acima fará é usar a ação de configuração de credenciais da AWS para configurar nossa chave de acesso, chave secreta e região da AWS com base em nossas configurações.
A região da AWS pode ser personalizada para qualquer região que você normalmente usa com sua conta da AWS. Estou no nordeste dos Estados Unidos, então vou manter us-east-1.
A chave de acesso e a chave secreta são credenciais que você precisa gerar com sua conta da AWS. A forma como nosso código é configurado é que vamos armazenar esses valores dentro dos segredos do GitHub, o que evitará que essas chaves vazem. Quando a ação é executada, o Github muda esses valores para estrelas (***) para que as pessoas não possam acessar essas chaves.
Portanto, para configurar esses segredos, primeiro queremos gerar chaves de acesso na AWS.
Navegue até o console AWS. No menu do usuário, selecione Minhas Credenciais de Segurançae selecione Criar chave de acesso.
Isso fornecerá a você dois valores: o ID da chave de acesso e a Chave de acesso secreta. Salve esses valores, pois você não poderá acessar a ID da chave secreta novamente.
Nota: lembre-se de NÃO incluir a chave de acesso e a chave secreta dentro do seu código. Isso pode fazer com que alguém comprometa suas credenciais da AWS.
Em seguida, dentro do repositório GitHub, navegue até Configurações, Segredos e selecione Novo segredo.
Aqui, queremos adicionar nossas chaves AWS usando os seguintes segredos:
- AWS_ACCESS_KEY_ID: seu AWS Access key ID
- AWS_SECRET_ACCESS_KEY: sua chave secreta AWS
E uma vez salvo, você deve ter seus dois novos segredos.
Agora que temos nossas credenciais configuradas, devemos estar prontos para executar o comando para sincronizar nosso projeto com o S3.
Dentro da ação do GitHub, adicione a seguinte etapa:
- run: aws s3 sync ./out s3://[bucket-name]Nota: certifique-se de substituir [bucket-name] com o nome do seu S3 Bucket.
Este comando irá disparar uma sincronização com nosso intervalo S3 especificado, usando o conteúdo do out , que é onde nosso projeto é construído.
E agora, se confirmarmos nossas alterações, podemos ver que nossa ação é automaticamente acionada uma vez comprometida com o main branch, onde construímos nosso projeto e sincronizamos com o S3!
Nota: Certifique-se de que, antes de configurar esta ação, você configurou o bucket S3 para hospedar um site (incluindo permissões de desbloqueio no bucket S3) - caso contrário, esta ação pode falhar.
Neste ponto, nosso projeto provavelmente parece o mesmo, já que não fizemos nenhuma alteração no código.
Mas se você fizer uma alteração no código, como alterar o título da página inicial dentro de pages/index.js e comprometa essa mudança:
<h1 className={styles.title}> Colby's <a href="https://nextjs.org">Next.js!</a> Site</h1>Podemos ver que nossa mudança aciona o início do fluxo de trabalho:
E assim que nosso fluxo de trabalho terminar, podemos ver que nosso conteúdo agora é atualizado automaticamente em nosso site:
Acompanhe os commits:
O que mais podemos fazer?
Configurando o CloudFront
O objetivo desta postagem não era passar por todo o processo de configuração de um site para AWS, mas se você estiver servindo um site no S3, você pode querer incluir também o CloudFront na frente dele.
Você pode verificar meu outro guia aqui, que o orienta na configuração do CloudFront, bem como um guia passo a passo através da criação do site no S3.
Invaliding cache CloudFront
Se o seu site S3 está por trás do CloudFront, é provável que você queira ter certeza de que o CloudFront não está armazenando em cache as novas alterações.
Com o AWS CLI, também podemos acionar uma invalidação de cache com o CloudFront para garantir que ele esteja captando as alterações mais recentes.
Confira a documentação aqui aprender mais.
Implementações de solicitação de pull
Se você estiver trabalhando constantemente em mudanças no site em uma solicitação pull, às vezes pode ser mais fácil ver as mudanças ativas.
Você pode configurar um novo fluxo de trabalho que é executado apenas em solicitações pull, onde o fluxo de trabalho pode criar dinamicamente um novo bucket com base no branch ou ambiente e adicionar um comentário à solicitação pull com esse URL.
Você pode encontrar uma ação do GitHub que existe para gerenciar os comentários na solicitação de pull para você ou pode verificar o Documentos de ações do GitHub.
