Recentemente, renovei minha versão de código aberto do 2048 Game e decidi migrá-lo para Next.js e React 18. O jogo existente foi publicado no GitHub Pages sem nenhum domínio personalizado. Eu estava pensando em implantar no Vercel, mas isso perderia o tráfego orgânico do Google, acumulado nos últimos 3 anos. Isso significa que precisei experimentar a implantação em GitHub Pages e hoje vou compartilhar o que aprendi. Se quiser ver o resultado final antes de ler o artigo inteiro, você pode . confira aqui Introdução rápida Usarei dois recursos do GitHub – GitHub Actions e GitHub Pages. Se você ainda não ouviu falar deles, deixe-me explicar rapidamente: são como pequenos fluxos de trabalho que podem realizar tarefas em seus projetos. É como ter um ajudante que faz automaticamente as coisas que você manda. Você pode usar Ações para executar testes, para verificações de qualidade ou para criar seu aplicativo. No meu caso, usei esses fluxos de trabalho para automatizar o pipeline de implantação. As ações do GitHub O que são ? Pense neles como uma opção de hospedagem na web para desenvolvedores e projetos de código aberto. Você pode usar GitHub Pages para compartilhar seus portfólios, hospedar sites de seus projetos de código aberto ou apenas publicar seus projetos favoritos como o meu. páginas do GitHub Agora vamos começar. Passo 1 – Ative as páginas do GitHub para o seu repositório Para publicar nossa aplicação Next.js, precisei ativar GitHub Pages para o repositório do projeto. Você pode encontrar na guia Configurações (1 na imagem abaixo), selecionar no menu do lado esquerdo (2) e encontrar o menu suspenso que nos permite especificar a de implantação (3). Páginas fonte Agora você precisará alterar a de implantação para . fonte GitHub Actions A partir de agora, seu projeto terá uma página dedicada. Você só precisa publicar conteúdo lá. Etapa 2 – Configurar o processo de construção Next.js Antes de implantar o aplicativo Next.js, é importante alterar a saída do build. Por padrão, Next.js usa Node.js para executar o aplicativo e isso é incompatível com GitHub Pages. GitHub Pages foi projetado para hospedar arquivos estáticos, o que significa que podemos publicar apenas HTML, CSS, JavaScript (e outros arquivos estáticos) lá. Portanto, precisaremos habilitar a geração de páginas estáticas em Next.js. Para fazer isso, você alterará o modo de saída para dentro de : export next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig; Agora, depois de executar , Next.js irá gerar uma pasta contendo ativos estáticos para seu aplicativo. Nas próximas etapas, pegaremos esse diretório e o carregaremos nas páginas do GitHub. next build out Etapa 3 – Corrigir imagens ausentes As páginas são publicadas em um subcaminho de um domínio e levam o nome do projeto como subcaminho. Confuso? Vamos dar uma olhada no URL do meu jogo 2048 como exemplo: https://mateuszsokola.github.io/2048-in-react/ O Github criou um subdomínio dedicado para meu usuário chamado . Mas o projeto é publicado no subcaminho, que no meu caso é . Infelizmente, isso levará a problemas com imagens e estilos ausentes. mateuszsokola (meu nome de usuário) /2048-in-react Por padrão, Next.js mapeia todos os ativos estáticos do domínio. Isso significa que o arquivo será resolvido para em vez de . favicon.ico mateuszsokola.github.io/favicon.ico mateuszsokola.github.io/2048-in-react/favicon.icon Para corrigir isso, podemos configurar um prefixo de caminho adicionando dentro do arquivo : basePath next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig; No meu caso, é já que meu projeto se chama . /2048-in-react 2048-in-react Lembre-se de incluir ( / ) no início do diretório do projeto. Passo 4 – Criar ações no Github Next.js está produzindo artefatos de implantação que podem ser publicados nas páginas do GitHub. Agora é hora de configurar o Github Actions para publicá-los. Decidi a implantação em duas ações distintas para promover a reutilização: A ação configurará o Node.js e instalará todas as dependências. Ter uma ação autônoma para a configuração do Node.js me permitirá reutilizá-lo para outros pipelines. Por exemplo, tenho pipelines que executam e . Provavelmente você também deseja ter mais de uma ação. setup-node linter de código testes A ação criará artefatos Next.js e os publicará nas páginas do GitHub sempre que mesclarmos o código no branch . publish main Deixe-me começar explicando a ação . Aqui está o código: setup-node # File: .github/workflows/setup-node/action.yml name: setup-node description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧" runs: using: "composite" steps: - name: Setup Node.js ⚙️ uses: actions/setup-node@v4 with: node-version: 20 - name: Cache dependencies ⚡ id: cache_dependencies uses: actions/cache@v3 with: path: node_modules key: node-modules-${{ hashFiles('package-lock.json') }} - name: Install dependencies 🔧 shell: bash if: steps.cache_dependencies.outputs.cache-hit != 'true' run: npm ci : crie este arquivo no diretório do seu projeto. Certifique-se de chamá-lo . Importante .github/workflows/setup-node action.yml O que esse trecho faz? Ele cria uma ação . A ação permite agrupar várias etapas do fluxo de trabalho em uma única ação. Se não estiver claro, você entenderá quando passarmos para a segunda ação. composite composite Ele cria um novo ambiente de construção usando Node.js 20 e instala dependências do projeto. Estas são as partes mais importantes da ação . Agora, vamos passar para a ação : setup-node publish # File: .github/workflows/publish.yml name: publish-to-github-pages on: push: branches: - main permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: runs-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: actions/checkout@v4 - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧 uses: ./.github/workflows/setup-node - name: Setup Pages ⚙️ uses: actions/configure-pages@v4 with: static_site_generator: next - name: Build with Next.js 🏗️ run: npx next build - name: Upload artifact 📡 uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Publish to GitHub Pages 🚀 id: deployment uses: actions/deploy-pages@v4 Crie este arquivo no diretório do seu projeto. Você pode nomear o arquivo como quiser – chamei o meu . .github/workflows publish.yml O que faz? Esta ação é acionada cada vez que o novo código é enviado ou mesclado na ramificação . main Ele usa a ação para configurar o ambiente. A ação que criei na ação anterior. Agora você sabe como incluir suas ações em outras ações. setup-node composite composite A ação tem duas etapas: na primeira etapa está sendo construída a aplicação Next.js. Na segunda etapa, os artefatos da primeira etapa são carregados nas páginas do GitHub. Esses são os aspectos mais importantes do pipeline de implantação. Ignorei as permissões e a configuração de simultaneidade, pois elas permanecem inalteradas para todas as implantações do GitHub Pages. Agora, a ação está pronta para uso. Comprometa-se e empurre Depois de confirmar e enviar suas alterações para o branch , o GitHub iniciará automaticamente a implantação nas páginas do GitHub. main Para inspecionar o processo, navegue até a guia (1 na imagem abaixo) e selecione a ação no menu do lado esquerdo (2) Você verá todas as suas implantações na tela (elas são chamadas ). Ações publicar em páginas do github . de fluxos de trabalho Agora selecione o primeiro desses fluxos de trabalho e você verá uma implantação em dois estágios. Na fase , você pode encontrar um link para seu site nas páginas do GitHub. de implantação Conclusão As páginas do Github não são suficientes para hospedar sites com milhões de visualizações. Mas é a escolha perfeita para hospedar seu portfólio ou site para seu projeto de código aberto. Existem muitas opções gratuitas para hospedar nossos sites como o Vercel, mas queria mostrar uma alternativa. GitHub Pages foi desenvolvido para desenvolvedores e acho que todo desenvolvedor deve estar familiarizado com ele. Se este artigo ajudou você, compartilhe-o em suas redes sociais. E onde você implanta seu aplicativo? É sempre Vercel? Aprenda React 18 e Next.js Você não se sente forte com React ou Next.js? Participe do meu curso online na Udemy! Vou ajudá-lo a começar a usar o React criando um jogo 2048 totalmente funcional. Acredito que criar jogos torna o aprendizado mais divertido e você terá algo legal para mostrar aos seus amigos. 👇👇👇👇 🧑🎓 Participe Curso React 18 e Next.js na Udemy – 80% OFF somente esta semana.
