Desbravando o Mundo do Nginx: Criando seu Primeiro Servidor como Frontend

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:

sudo vim /etc/nginx/nginx.conf

Dentro do arquivo, você verá algo parecido com isto:

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:

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:

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:

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
LinkedIn
LeetCode