Desenvolva com React

Faça o deploy de um app React em um domínio da Azion a partir de um template da Azion, do seu repositório do GitHub ou com a Azion CLI.

Última atualização

Ver como Markdown Configurar agente

Você pode fazer o deploy de um app React na Azion a partir de um template no Azion Console, de um repositório do GitHub que é seu ou com a Azion CLI. As três rotas deixam o app em execução na Azion, atrás de um domínio da Azion.

A Azion serve um app React como uma aplicação estática. O build grava o app compilado em ./.edge/assets, o deploy envia essa pasta para um bucket de storage e uma application o serve. Para os outros frameworks dos quais a Azion faz o build, consulte Compatibilidade com web frameworks.

Escolha a rota que você vai seguir. Os pré-requisitos e o procedimento de deploy abaixo mudam com a sua escolha.

Pré-requisitos

  • Acesso ao Azion Console. Para entrar, consulte Como acessar o Azion Console.
  • Uma conta do GitHub. O formulário do template a conecta quando pede uma.
  • Acesso ao Azion Console. Para entrar, consulte Como acessar o Azion Console.
  • Uma conta do GitHub.
  • Um repositório do GitHub que contém um projeto React.
  • A Azion CLI, instalada e com login feito. Para configurá-la, consulte Primeiros passos com a Azion CLI.
  • Node.js 18 ou posterior, e npm.
  • Um terminal e um editor de código.

Templates do React

Um template React é um projeto inicial do qual a Azion faz o build e o deploy para você. A rota do Console faz o deploy de um destes templates:

TemplateUso
React BoilerplateProjeto inicial
React with ButterCMS Starter ProjectInicial

O React Boilerplate tem um guia próprio, com link na tabela. Para mais informações sobre o outro template, consulte Marketplace da Azion. Na rota da CLI, o seletor de templates do azion init lista todos os templates do preset React.

Fazer o deploy do app

Todas as rotas fazem o build do projeto React e criam os recursos da Azion que o servem. Siga o painel da sua rota:

Para criar o projeto, execute azion init com um nome de projeto. Selecione React no seletor de presets e um template no seletor de templates:

azion init --name my-site --auto -y

A opção -y instala as dependências. A opção --auto pula as perguntas sobre um servidor de desenvolvimento local e sobre um deploy. Para as perguntas que o comando faz sem essas opções, consulte Azion CLI init. Com o template React Boilerplate, o comando imprime:

Texto
01? Choose a preset: [Use arrows to move, type to filter]
02> AI Studio
03 Angular
04 Astro
05 Docusaurus
06 Eleventy
07 Emscripten
08 Gatsby
09 Hexo
10 Hono
11 Hugo
12 Javascript
13 Jekyll
14 Next
15 Nuxt
16 OpenNextJS
17 Preact
18 Qwik
19 React
20 Rustwasm
21 Stencil
22 Svelte
23 Typescript
24 Vitepress
25 Vue
26 Vuepress
27? Choose a preset: React
28? Choose a template: [Use arrows to move, type to filter]
29> React with ButterCMS Starter Project
30 React Boilerplate
31 Vite + React Boilerplate
32? Choose a template: React Boilerplate
33
34Fetching selected template...
35
36Template successfully fetched
37Template successfully configured
38Installing application dependencies
39…
40added 1307 packages, and audited 1308 packages in 1m
41273 packages are looking for funding
42 run `npm fund` for details
4370 vulnerabilities (3 low, 4 moderate, 63 high)
44
45To address issues that do not require attention, run:
46 npm audit fix
47
48To address all issues (including breaking changes), run:
49 npm audit fix --force
50
51Run `npm audit` for details.
52…
53[Azion] [Build] › ℹ info Using preset: react
54[Azion] [Build] › ✔ success Build completed successfully with only azion.config
55[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-site/.edge/manifest.json
56If you want to start a local development server later, run 'azion dev'
57Make sure to change to the new working directory before running building or deploying your project
58If you want to deploy your application later, run 'azion deploy'
59Make sure to change to the new working directory before running building or deploying your project
60Your application my-site was initialized successfully

O comando cria o projeto em uma pasta my-site. O azion.config.cjs dele define o preset react e envia ./.edge/assets para um bucket de storage que os workloads só podem ler. O mesmo arquivo adiciona uma regra chamada Redirect to index.html, que reescreve as rotas para /index.html para que o React cuide do roteamento no navegador. Para todas as configurações desse arquivo, consulte azion.config.js.

Para fazer o build do app, entre na pasta do projeto e execute azion build:

Shell
01cd my-site
02azion build

O Azion Bundler executa o script react-scripts build do template com o preset react, e o app compilado vai para .edge/assets:

Texto
01Building your Application. This process may take a few minutes
02Running build step command:
03
04$ npx --yes @aziontech/bundler@1.1.4 build --preset react
05…
06[Azion] [Build] › ℹ info Using preset: react
07[Azion] [Pre-Build] › ℹ info Starting pre-build...
08…
09[React] › ℹ info
10> reactjs-boilerplate@0.1.1 build
11> CI=false react-scripts build
12
13[React] › ℹ info (node:33966) [DEP0176] DeprecationWarning: fs.F_OK is deprecated, use fs.constants.F_OK instead
14…
15
16[React] › ℹ info Creating an optimized production build...
17
18[React] › ℹ info Compiled successfully.
19
20[React] › ℹ info File sizes after gzip:
21
22[React] › ℹ info 70.01 kB assets/static/js/main.1e230516.js
23 1.77 kB assets/static/js/453.6fadd187.chunk.js
24 513 B assets/static/css/main.f855e6bc.css
25
26[React] › ℹ info
27The project was built assuming it is hosted at /.
28You can control this with the homepage field in your package.json.
29
30The .edge/assets folder is ready to be deployed.
31…
32
33[Azion] [Pre-Build] › ℹ info Pre-build completed successfully
34[Azion] [Build] › ℹ info Using built-in handler from "react" preset.
35[Azion] [Build] › ℹ info Starting build...
36[Azion] [Build] › ✔ success Build completed successfully
37[Azion] [Post-Build] › ℹ info Starting post-build...
38[Azion] [Post-Build] › ✔ success Post-build completed successfully
39[Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX
40[Azion] [IaC] › ✔ success Manifest generated successfully at <project-dir>/my-site/.edge/manifest.json
41Your Application was built successfully

Para fazer o deploy do app, execute azion deploy na pasta do projeto:

azion deploy

O comando envia o projeto e abre a página do Console que acompanha o deploy. Ele também imprime a URL dessa página caso nenhum navegador abra. Quando o deploy termina, ele imprime a URL do domínio do app. Para a saída completa e todas as flags, consulte Azion CLI deploy.

Para executar o app na sua máquina antes do deploy, consulte Azion CLI dev. Para fazer o deploy de um projeto React que você já tem, execute azion link na pasta dele e selecione o preset React. Para mais informações, consulte Azion CLI link.

Para fazer o deploy de um template React pelo Azion Console:

Abra os templates

Acesse Azion Console > Create > Templates.

Encontre os templates React

Em Search by name, framework, or keyword, digite React.

Selecione o template para o deploy
Conecte sua conta do GitHub

Se o formulário mostrar GitHub Connection, selecione Connect with GitHub e instale o Azion GitHub App.

Selecione um Git Scope

Em Git Scope, selecione o escopo do template.

Preencha as configurações que o template pede
Selecione Deploy

A página de deploy abre, e o Deploy Log dela acompanha o build. Quando o deploy termina com sucesso, a página mostra Successfully created!, a URL do domínio e um botão Manage que abre a application.

Para fazer o deploy de um projeto React a partir do seu repositório do GitHub:

Abra o Import from GitHub

Acesse Azion Console > Create > Import from GitHub.

Selecione o card de importação

Na aba Import from GitHub, selecione o card. A página Import from GitHub abre.

Conecte sua conta do GitHub

Se nenhuma conta do GitHub estiver conectada, selecione Connect with GitHub em GitHub Connection.

Selecione o repositório

Selecione um Git Scope e depois selecione o Repository que contém o projeto React.

Dê um nome à application

Em General, digite um Application Name. O nome do repositório preenche o campo, e o bucket de storage e a function recebem o nome que você mantiver.

Selecione o preset React

Defina Preset como React.

Defina o diretório raiz

Em Root Directory, mantenha / quando o projeto React estiver na raiz do repositório.

Digite o comando de instalação

Em Install Command, digite npm install.

Selecione Deploy

A página de deploy abre com o título Deploy: e o nome da application, e o Deploy Log dela acompanha o build. Quando o deploy termina com sucesso, a página mostra Successfully created! e a URL do domínio.

Para definir Variables ou outro campo do formulário de importação, consulte Importe um projeto do GitHub.

Verificar o site

Todas as rotas retornam a URL do domínio da Azion do app, no formato https://xxxxxxxxxx.map.azionedge.net. O Azion Console mostra essa URL na página de deploy, e o azion deploy a imprime quando termina. Abra a URL em um navegador para ver o app React.

O primeiro deploy pode levar vários minutos para responder em todas as localidades; os deploys seguintes levam cerca de dois minutos. Até que uma localidade receba o app, o domínio responde com uma página 404 que diz There's nothing here yet. Diante dessa resposta, aguarde e solicite a URL novamente.

Próximos passos

Compatibilidade com frameworksVeja de quais outros frameworks e presets a Azion faz o build.Azion CLI deployLeia a saída do deploy e as flags que mudam um deploy.Importe um projeto do GitHubDefina todos os campos da importação do GitHub, incluindo as variáveis.azion.config.jsAltere o bucket, o cache e as regras que o preset React gera.