Como instalar ReactJS com proxy Nginx no CentOS 8

React é uma biblioteca JavaScript gratuita e de código aberto desenvolvida pelo Facebook. É usada para criar componentes de frontend e UI da web. É frequentemente usada para desenvolver Aplicações Web ou Aplicativos Móveis. Permite que os desenvolvedores criem componentes reutilizáveis que são independentes uns dos outros. Pode ser usada com outras bibliotecas, incluindo Axios, JQuery AJAX ou o window.fetch embutido no navegador.

Neste post, mostraremos como instalar o React JS no CentOS 8

Pré-requisitos

• Um servidor executando CentOS 8.
• Um nome de domínio válido apontado para o IP do seu servidor.
• Uma senha de root configurada no servidor.

Começando

Antes de começar, você precisará atualizar os pacotes do seu sistema para a versão mais recente. Você pode atualizá-los executando o seguinte comando:

dnf update -y

Uma vez que todos os pacotes estejam atualizados, instale outras dependências necessárias com o seguinte comando:

dnf install gcc-c++ make curl -y

Uma vez que você tenha terminado de instalar as dependências necessárias, pode prosseguir para a próxima etapa.

Instalar NPM e Node.js

Em seguida, você precisará instalar o Node.js e o NPM em seu sistema. O NPM, também chamado de gerenciador de pacotes, é uma ferramenta de linha de comando usada para interagir com pacotes JavaScript. Por padrão, a versão mais recente do NPM e do Node.js não está incluída no repositório padrão do CentOS. Portanto, você precisará adicionar o repositório de origem do Node ao seu sistema. Você pode adicioná-lo com o seguinte comando:

curl -sL https://rpm.nodesource.com/setup_14.x | bash -

Uma vez que o repositório foi adicionado, instale o Node.js e o NPM com o seguinte comando:

dnf install nodejs -y

Uma vez que a instalação esteja concluída, verifique a versão do Node.js executando o seguinte comando:

node -v

Você deve obter a seguinte saída:

v14.16.0

Você também pode verificar a versão do NPM executando o seguinte comando:

npm -v

Você deve obter a seguinte saída:

6.14.11

Neste ponto, o NPM e o Node.js estão instalados em seu sistema. Você pode agora prosseguir para instalar o Reactjs.

Instalar Reactjs

Antes de começar, você precisará instalar o create-react-app em seu sistema. É uma utilidade de linha de comando usada para criar uma Aplicação React.

Você pode instalá-lo usando o NPM, como mostrado abaixo:

npm install -g create-react-app

Uma vez instalado, verifique a versão instalada do create-react-app usando o seguinte comando:

create-react-app --version

Você deve ver a seguinte saída:

4.0.3

Em seguida, crie seu primeiro aplicativo Reactjs com o seguinte comando:

create-react-app myapp

Você deve ver a seguinte saída:

Success! Created myapp at /root/myapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run 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 myapp
  npm start

Em seguida, mude o diretório para myapp e inicie a aplicação com o seguinte comando:

cd myapp  
npm start

Uma vez que a aplicação tenha sido iniciada com sucesso, você deve obter a seguinte saída:

Compiled successfully!

You can now view myapp in the browser.

  http://localhost:3000

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

Agora, pressione CTRL+C para parar a aplicação. Você pode agora prosseguir para a próxima etapa.

Criar um arquivo de serviço Systemd para Reactjs

Em seguida, é uma boa ideia criar um arquivo de serviço systemd para gerenciar o serviço Reactjs. Você pode criá-lo com o seguinte comando:

nano /lib/systemd/system/react.service

Adicione as seguintes linhas:

[Unit]
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/root/myapp
ExecStart=/usr/bin/npm start
Restart=on-failure

[Install]
WantedBy=multi-user.target

Salve e feche o arquivo, então recarregue o daemon systemd com o seguinte comando:

systemctl daemon-reload

Em seguida, inicie o serviço Reactjs e habilite-o para iniciar na reinicialização do sistema com o seguinte comando:

systemctl start react  
systemctl enable react

Em seguida, verifique o status do aplicativo Reactjs com o seguinte comando:

systemctl status react

Você deve obter a seguinte saída:

? react.service
   Loaded: loaded (/usr/lib/systemd/system/react.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:52:32 EDT; 6s ago
 Main PID: 2191 (node)
    Tasks: 29 (limit: 12524)
   Memory: 220.3M
   CGroup: /system.slice/react.service
           ??2191 npm
           ??2202 node /root/myapp/node_modules/.bin/react-scripts start
           ??2209 /usr/bin/node /root/myapp/node_modules/react-scripts/scripts/start.js

Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: webpack output is served from
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Content not from webpack is served from /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404s will fallback to /
Mar 23 02:52:34 centos8 npm[2191]: Starting the development server...
Mar 23 02:52:37 centos8 npm[2191]: Compiled successfully!
Mar 23 02:52:37 centos8 npm[2191]: You can now view myapp in the browser.
Mar 23 02:52:37 centos8 npm[2191]:   http://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Note that the development build is not optimized.
Mar 23 02:52:37 centos8 npm[2191]: To create a production build, use npm run build.

Neste ponto, o Reactjs está iniciado e ouvindo na porta 3000. Você pode verificar com o seguinte comando:

ss -antpl | grep 3000

Você deve obter a seguinte saída:

LISTEN    0         128                0.0.0.0:3000             0.0.0.0:*        users:((