Desbravando o Mundo do Nginx: Criando seu Primeiro Servidor como Frontend
Tags: webdev, javascript, beginners, programming
Published: 2024-02-03 03:00:00



Se você está ansioso para lançar seu primeiro site React para o mundo, esta na hora de você conhecer o Nginx.

## Sobre mim 

Um breve resumo sobre mim. 

Meu nome é Hudson, Desenvolvedor FullStack e busco compartilhar conhecimentos sobre minha área e as que tenho interesse em atuar e estudo como backend, devops, linux e automatizações. 


## O que é o Nginx



Nginx é muito mais do que apenas um servidor web - é uma ferramenta poderosa que pode ser usada para melhorar drasticamente o desempenho e a segurança do seu site. E hoje, vou guiar você através da configuração do seu primeiro servidor Nginx para hospedar seu site React na porta 8000. Não se preocupe se você é novo nisso - vamos abordar cada passo com detalhes claros e concisos.

_Não irei adentrar a parte de instalação neste momento_, 
_acredito que já existem vários conteúdos sobre mas pretendo_ _compartilhar o meu próprio_

## Configurando o Nginx

Primeiro, vamos começar editando o arquivo de configuração do Nginx usando o editor de texto vim. No seu terminal, digite:

```bash

sudo vim /etc/nginx/nginx.conf
```
Dentro do arquivo, você verá algo parecido com isto:


```nginx
http {
    server {
        listen 80;
        server_name example.com;

        location / {
            root /var/www/html;
            index index.html;
        }
    }
}
```
Agora, vamos modificar isso para atender às nossas necessidades:

```nginx

http {
    server {
        listen 8000;
        server_name localhost;

        location / {
            root /caminho/para/sua/pasta/dist;
            index index.html;
        }
    }
}
```
- listen 8000: Define a porta na qual o servidor Nginx irá ouvir. Neste caso, estamos usando a porta 8000.
- server_name localhost: Define o nome do servidor. Aqui, estamos usando localhost para fins de teste, mas você pode alterá-lo para o seu nome de domínio real quando estiver pronto para lançar seu site.
- location / {...}: Define as configurações para o local solicitado. Aqui, estamos configurando o diretório raiz e o arquivo index a serem usados.
Agora, salve e feche o arquivo (no vim, pressione Esc, depois :wq e Enter).

## Verificando a Configuração do Nginx

Antes de reiniciar o serviço Nginx, é sempre uma boa ideia verificar se a configuração está correta. Felizmente, o Nginx torna isso fácil com o comando nginx -T. Digite o seguinte no seu terminal:

```bash
nginx -T
Isso irá testar sua configuração e fornecer feedback sobre possíveis erros ou problemas. Se tudo estiver bem, você está pronto para reiniciar o serviço Nginx.
```
## Reiniciando o Serviço Nginx

Para aplicar as alterações que fizemos em nossa configuração, precisamos reiniciar o serviço Nginx. No seu terminal, digite:

```bash

sudo service nginx restart
```
E pronto! Seu servidor Nginx está agora configurado para hospedar seu site React na porta 8000. Agora é só abrir seu navegador e acessar http://localhost:8000 para ver seu site em ação.

Lembre-se, este é apenas o começo de sua jornada com o Nginx. À medida que você se aprofunda mais, descobrirá uma infinidade de recursos poderosos que podem levar seu site para o próximo nível. Então, continue explorando e experimentando - o mundo do desenvolvimento web está cheio de possibilidades emocionantes. Boa sorte!

Se você curtiu, por favor avalie para me motivar a criar mais conteúdos assim: 


[GitHub](https://github.com/Hudson3384)
[LinkedIn](https://www.linkedin.com/in/hudson-arruda-ribeiro/)
[LeetCode](https://leetcode.com/Hudson3384/)