Pesquisa de site

Como implantar um aplicativo React com Nginx no Ubuntu

Introdução

Você pode implantar rapidamente aplicativos React em um servidor usando a ferramenta de construção padrão Create React App. O script build compila o aplicativo em um único diretório contendo todo o código JavaScript, imagens, estilos e arquivos HTML. Com os ativos em um único local, você pode implantar em um servidor web com configuração mínima.

Neste tutorial, você implantará um aplicativo React em sua máquina local em um servidor Ubuntu executando Nginx. Você construirá um aplicativo usando Create React App, usará um arquivo de configuração Nginx para determinar onde implantar os arquivos e copiará com segurança o diretório de construção e seu conteúdo para o servidor. Ao final deste tutorial, você será capaz de construir e implantar um aplicativo React.

Pré-requisitos

Se você estiver usando o Ubuntu versão 16.04 ou inferior, recomendamos que você atualize para uma versão mais recente, pois o Ubuntu não oferece mais suporte para essas versões. Esta coleção de guias irá ajudá-lo a atualizar sua versão do Ubuntu.

Para seguir este tutorial, você precisará de:

  • Um servidor rodando Ubuntu, junto com um usuário não root com privilégios sudo e um firewall ativo. Para obter orientação sobre como configurá-los, escolha sua distribuição nesta lista e siga nosso Guia de configuração inicial do servidor. Para obter acesso SSH em um Droplet DigitalOcean, leia Como se conectar a Droplets com SSH.

  • Na sua máquina local, você precisará de um ambiente de desenvolvimento executando Node.js. Para instalar no macOS ou Ubuntu, siga o tutorial Como instalar o Node.js no Ubuntu 22.04/20.04/18.04.

  • Nginx instalado seguindo este guia para Ubuntu 22.04/20.04/18.04. Certifique-se de ter um bloco de servidor para o seu domínio. Este tutorial usará /etc/nginx/sites-available/seu_domínio como exemplo.

  • É recomendado que você também proteja seu servidor com um certificado HTTPS. Você pode fazer isso com o tutorial Como proteger o Nginx com Let’s Encrypt no Ubuntu 22.04/20.04/18.04.

  • Um nome de domínio registrado ou IP de servidor.

  • Se você usar um nome de domínio, precisará configurar esses dois registros DNS para o seu servidor. Se você estiver usando DigitalOcean, consulte nossa documentação DNS para obter detalhes sobre como adicioná-los.

    • Um registro A com seu_domínio apontando para o endereço IP público do seu servidor.
    • Um registro A com www.seu_domínio apontando para o endereço IP público do seu servidor.

  • Você também precisará de um conhecimento básico de JavaScript, HTML e CSS, que pode ser encontrado em nossa série Como construir um site com HTML, como construir um site com CSS e em Como codificar em JavaScript.

Como implantar o aplicativo React com Nginx

  1. Crie um projeto React
  2. Localize o arquivo de implantação no servidor Ubuntu
  3. Carregar arquivos de compilação

Passo 1 — Criando um Projeto React

Nesta etapa, você criará um aplicativo usando Create React App e construirá uma versão implantável do aplicativo padrão.

Para começar, crie um novo aplicativo usando Create React App em seu ambiente local. Em um terminal, execute o comando para construir um aplicativo. Neste tutorial, o projeto será chamado react-deploy:

npx create-react-app react-deploy

O comando npx executará um pacote Node sem baixá-lo para sua máquina. O script create-react-app instalará todas as dependências necessárias para seu aplicativo React e construirá um projeto base no diretório react-deploy. Para obter mais informações sobre o aplicativo Create React, confira o tutorial Como configurar um projeto React com o aplicativo Create React.

O código será executado por alguns minutos enquanto baixa e instala as dependências. Quando estiver concluído, você receberá uma mensagem de sucesso. Sua versão pode ser um pouco diferente se você usar yarn em vez de npm:

Success! Created react-deploy at your_file_path/react-deploy
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-deploy
  npm start

Happy hacking!

Seguindo a sugestão na saída, primeiro vá para a pasta do projeto:

cd react-deploy

Agora que você tem um projeto base, execute-o localmente para testar como ele aparecerá no servidor. Execute o projeto usando o script npm start:

npm start

Quando o comando for executado, você receberá uma saída com as informações do servidor local:

Compiled successfully!

You can now view react-deploy in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

Abra um navegador e navegue até http://localhost:3000. Você poderá acessar o aplicativo React padrão:

Pare o projeto digitando CTRL+C ou ⌘+C em um terminal.

Agora que você tem um projeto executado com êxito em um navegador, é necessário criar uma compilação de produção. Execute o script de compilação create-react-app com o seguinte:

npm run build

Este comando irá compilar o JavaScript e os ativos no diretório build. Quando o comando terminar, você receberá alguma saída com dados sobre sua construção. Observe que os nomes dos arquivos incluem um hash, então sua saída será um pouco diferente:

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.21 KB  build/static/js/2.82f639e7.chunk.js
  1.4 KB    build/static/js/3.9fbaa076.chunk.js
  1.17 KB   build/static/js/runtime-main.1caef30b.js
  593 B     build/static/js/main.e8c17c7d.chunk.js
  546 B     build/static/css/main.ab7136cd.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

O diretório build agora incluirá versões compiladas e reduzidas de todos os arquivos necessários para o seu projeto. Neste ponto, você não precisa se preocupar com nada fora do diretório build. Tudo que você precisa fazer é implantar o diretório em um servidor.

Nesta etapa, você criou um novo aplicativo React. Você verificou que o aplicativo é executado localmente e construiu uma versão de produção usando o script Create React App build. Na próxima etapa, você fará login em seu servidor para saber onde copiar o diretório build.

Passo 2 — Determinando a localização do arquivo de implantação no seu servidor Ubuntu

Nesta etapa, você começará a implantar seu aplicativo React em um servidor. Mas antes de fazer upload dos arquivos, você precisará determinar o local correto do arquivo em seu servidor de implantação. Este tutorial usa Nginx como servidor web, mas a abordagem é a mesma com Apache (Ubuntu 22.04/Ubuntu 20.04/Ubuntu 18.04). A principal diferença é que os arquivos de configuração estarão em um diretório diferente.

Para encontrar o diretório que o servidor web usará como raiz do seu projeto, faça login no seu servidor usando ssh:

ssh username@server_ip

Uma vez no servidor, procure a configuração do seu servidor web em /etc/nginx/sites-enabled. Há também um diretório chamado sites-allowed; este diretório inclui configurações que não estão necessariamente ativadas. Depois de encontrar o arquivo de configuração, exiba a saída em seu terminal com o seguinte comando:

cat /etc/nginx/sites-enabled/your_domain

Se o seu site não tiver certificado HTTPS, você receberá um resultado semelhante a este:

server {
        listen 80;
        listen [::]:80;

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }
}

Se você seguiu o pré-requisito Let’s Encrypt para proteger seu servidor Ubuntu, receberá esta saída:

server {

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
    if ($host = www.your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name your_domain www.your_domain;
    return 404; # managed by Certbot
}

Em ambos os casos, o campo mais importante para implantar seu aplicativo React é root. Isso aponta solicitações HTTP para o diretório /var/www/seu_domínio/html. Isso significa que você copiará seus arquivos para esse local. Na próxima linha, você pode ver que o Nginx irá procurar um arquivo index.html. Se você procurar no diretório build local, verá um arquivo index.html que servirá como ponto de entrada principal.

Faça logoff do servidor Ubuntu e volte para o seu ambiente de desenvolvimento local.

Agora que você sabe o local do arquivo que o Nginx servirá, você pode fazer upload do seu build.

Passo 3 — Fazendo upload de arquivos de compilação com** **scp

Neste ponto, seus arquivos build estão prontos para serem usados. Tudo que você precisa fazer é copiá-los para o servidor. Uma maneira rápida de fazer isso é usar scp para copiar seus arquivos para o local correto. O comando scp é uma maneira segura de copiar arquivos para um servidor remoto a partir de um terminal. O comando usa sua chave ssh se estiver configurada. Caso contrário, será solicitado um nome de usuário e senha.

O formato do comando será scp files_to_copy username@server_ip:path_on_server. O primeiro argumento serão os arquivos que você deseja copiar. Neste caso, você está copiando todos os arquivos no diretório build. O segundo argumento é uma combinação de suas credenciais e do caminho de destino. O caminho de destino será o mesmo que o root na configuração do Nginx:/var/www/seu_domínio/html.

Copie todos os arquivos build usando o curinga * para /var/www/seu_domínio/html:

scp -r ./build/* username@server_ip:/var/www/your_domain/html

Ao executar o comando, você receberá uma saída mostrando que seus arquivos foram carregados. Seus resultados serão um pouco diferentes:

asset-manifest.json                                                                                          100% 1092    22.0KB/s   00:00
favicon.ico                                                                                                  100% 3870    80.5KB/s   00:00
index.html                                                                                                   100% 3032    61.1KB/s   00:00
logo192.png                                                                                                  100% 5347    59.9KB/s   00:00
logo512.png                                                                                                  100% 9664    69.5KB/s   00:00
manifest.json                                                                                                100%  492    10.4KB/s   00:00
robots.txt                                                                                                   100%   67     1.0KB/s   00:00
main.ab7136cd.chunk.css                                                                                      100%  943    20.8KB/s   00:00
main.ab7136cd.chunk.css.map                                                                                  100% 1490    31.2KB/s   00:00
runtime-main.1caef30b.js.map                                                                                 100%   12KB  90.3KB/s   00:00
3.9fbaa076.chunk.js                                                                                          100% 3561    67.2KB/s   00:00
2.82f639e7.chunk.js.map                                                                                      100%  313KB 156.1KB/s   00:02
runtime-main.1caef30b.js                                                                                     100% 2372    45.8KB/s   00:00
main.e8c17c7d.chunk.js.map                                                                                   100% 2436    50.9KB/s   00:00
3.9fbaa076.chunk.js.map                                                                                      100% 7690   146.7KB/s   00:00
2.82f639e7.chunk.js                                                                                          100%  128KB 226.5KB/s   00:00
2.82f639e7.chunk.js.LICENSE.txt                                                                              100% 1043    21.6KB/s   00:00
main.e8c17c7d.chunk.js                                                                                       100% 1045    21.7KB/s   00:00
logo.103b5fa1.svg                                                                                            100% 2671    56.8KB/s   00:00

Quando o comando for concluído, você terá concluído. Como um projeto React é construído com arquivos estáticos que só precisam de um navegador, você não precisa configurar nenhuma outra linguagem do lado do servidor. Abra um navegador e navegue até o seu nome de domínio. Ao fazer isso, você encontrará seu projeto React:

Nesta etapa, você implementou um aplicativo React em um servidor. Você aprendeu como identificar o diretório web raiz em seu servidor e copiou os arquivos com scp. Quando o upload dos arquivos for concluído, você poderá visualizar seu projeto em um navegador da web.

Conclusão

A implantação de aplicativos React é um processo rápido quando você usa Create React App. Você executa o comando build para criar um diretório com todos os arquivos necessários para uma implantação. Depois de executar a compilação, você copia os arquivos para o local correto no servidor, enviando seu aplicativo ao vivo para a web.

Se você quiser ler mais tutoriais do React, confira nossa página React Topic ou retorne à página da série How To Code in React.js.

O autor selecionou Creative Commons para receber uma doação como parte do programa Write for DOnations.

Artigos relacionados: