# Deploy ReactJS no CPANEL *Antes de de começar, estou considerendo que você já saiba o que é uma chave SSH e como utilizar o versionamento de código com Git e GitHub. Também é necessário ter uma conta CPANEL já disponível para realizar a instalação e uma conta no GitHub com um repositório disponível.* ### Adicionando o controle de versão Primeiramente é necessário criar o controle de versionamento de código para adicionar o repositório ao cpanel, para realizar isso basta navegar na página inicial da hospedagem e acessar o controler de versionamento. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673714503390/fd2ad790-0240-44cf-87c0-e20edc91d2a8.png align="center") Após acessar, clique em criar! ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673714556040/c74822a7-028f-4954-9a7a-080adb3f0730.png align="center") Nesta aba é onde será configurado o repositório. Para então adicionar o repositório tem que adicionar uma chave *SSH* para o *CPANEL* conseguir se comunicar com o GitHub, em caso de um repositório privado, caso seja um projeto *open-source* poderá pular a etapa de configuração da chave SSH. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673715325520/ec436a3e-c45e-420a-b676-c8418f461f68.png align="center") ### Adicionando uma chave SSH Para adicionar uma chave *SSH*, clique em *SSH Access* dentro da página representada anteriormente. Agora nesta nova aba, clique em *Manage SSH Keys.* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673715537275/b459fa4e-7e01-4b5e-a9a3-0caa8e154813.png align="center") Depois de realizar essas operações então em *Generate a New key* para gerar uma nova chave *SSH*, essa chave será adicionada porteriormente dentro do GitHub. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673715690342/5186bf5b-ad1f-4e29-bab4-8278b96c7074.png align="center") Com a nova aba aberta, preencha as informações e prossiga clicando em *Generate Key*. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673715797538/ceb6d340-7be3-4a06-af18-a6a5494dae68.png align="center") Depois disso, a chave será criada então volte para a lista de chaves clicando em *Go back*. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673716113526/cdc1c4dc-7307-42b4-8d80-89a5e754aeb7.png align="center") Agora é necessário liberar a chave para uso. Na página inicial do gerênciamento de chave clique em *Manage*. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673719750263/15d59f06-544a-40b3-a4ae-3feedddb8e79.png align="center") E, então clique em *Authorize* para liberar a sua chave para uso. Feito isso clique em *Go Back*. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673719851619/88ae459a-2d22-47c7-8b96-95c966b245db.png align="center") Na página incial do gerenciamento de chaves há 2 chaves que foram geradas. Clique para visualizar a chave pública em *View/Download*. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673719905081/b38428fa-2e41-4e52-89d1-2428477cf0d4.png align="center") Agora tem a sua chave autorizada, copie ela! ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673716409843/1ddc22c7-3686-4f55-82b6-9dc1bd448036.png align="center") Neste passo, então, abra uma nova aba e acesse a sua conta no GitHub e acesse o seu perfil. No menu lateral clique na opção *SSH and GPG Keys.* Apos fazer isso clique em *New SSH Key.* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673716707763/eb44371f-0946-4d06-a9df-dcdcedb00dd5.png align="center") Adicione um título e cole a chave *SSH* pública que foi copiada nos passos anteriores. Feito isso, clique em *Add SSH key.* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673717859827/a4eac4cd-dcb5-4df9-ad03-75c5893f5f71.png align="center") Agora foi adicionado a chave SSH ao seu GitHub e o CPANEL poderá ter acesso ao seu repositório privado ou público. ### Finalizando a configuração do repositório *Se o seu repositório for privado, é importante que antes de começar está etapa você tenha configurado corretamente a chave SSH,* ***conforme demonstrado na etapa anterior***\*.\* Para começar vá até o repositório que deseja adicionar ao CPANEL copie o link de cópia dele. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673719009741/716f3344-7e98-42f9-933a-a9ff915bac96.png align="center") Cole o link do seu repositório no campo *Clone URL.* Logo após, clique em *create* para criar o versionamento de código do seu repositório. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673719206551/5c6dff56-5406-4753-9657-05285def5858.png align="center") Configuração do repositório finalizada com sucesso no CPANEL, agora clique em *Manage* para gerenciar o seu repositório adicionado. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673720946225/3b95201a-140d-46ae-bec3-c863d579b325.png align="center") Nesta página poderá realizar algumas configurações, como por exemplo definir qual *branch* será a padrão do projeto. Neste caso está a branch *main* como padrão. Mantenha o que está e clique em *Pull or Deploy.* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673721134272/a62515f5-fc47-4b58-982a-4dc4a37d48d6.png align="center") Nesta aba é a que será utilizada para realizar o *pull* e *deploy* da aplicação. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673721484187/b1430cbe-4133-484b-9b96-26112b1e86cd.png align="center") Entretanto antes de clicar para realizar o pull e deploy da sua aplicação é necessário realizar algumas configurações no seu repositório. Crie um arquivo chamado `.cpanel.yml` e adicione o seguinte conteúdo: ```yaml deployment: tasks: - export DEPLOYPATH=/home/hsesafetycom/public_html/ - rm -rf $DEPLOYPATH - /bin/cp -R build/. $DEPLOYPATH ``` Neste conteúdo estamos dizendo que vamos deletar e copiar todos os arquivos de dentro pasta `build` para a pasta `public_html`. Para que isso seja obedecido é necessário remover do `.gitignore` a pasta build. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673724165809/c470d336-0703-4389-86a4-eb555dd7c2cd.png align="center") Agora compile o seu projeto rodando `npm run build` e então efetue o `push` para a sua branch remota. Sua branch de deploy terá que conter a pasta build pois ela será movida para a public no momento do deploy. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673724715883/fa24262a-51fc-41a4-8352-000938383595.png align="center") Se o seu repositório estiver assim na branch de deploy você pode voltar para o Cpanel baixar as atualizações e clicar em deploy. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673724978027/96994ffa-1c3a-4a9f-8df1-6f8e82958a20.png align="center") Recarregue a página e clique *Deploy HEAD Commit* feito isso seu deploy já está pronto. Agora toda alteração dentro da sua `branch main` você terá que entrar no CPANEL, baixar as atualizações e realizar o deploy! Para confirmar se está certo você poderá acessar o `file manager` e clicar em `public_html` feito isso seus arquivos da pasta build vão estar lá! ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1673726213391/5081243f-c92d-4ddb-872b-b2588ebd59af.png align="center") OBS: Infelizmente não consegui deixar isso automatizado e essa foi a melhor forma para fugitr do FTP.