Nginx é um servidor HTTP leve que utiliza uma estrutura de processamento assíncrona e não bloqueadora baseada em eventos, proporcionando excelente desempenho de E/S. Frequentemente empregado como proxy reverso e balanceador de carga no servidor.

Vantagens principais:

• Suporte a alta concorrência: utiliza multiplexação de E/S com epoll. Testes oficiais demonstram capacidade para 50.000 conexões simultâneas, podendo suportar de 20.000 a 40.000 em ambientes de produção.
• Baixo consumo de memória 1. Arquivo de configuração simples Além disso, oferece recursos como proxy reverso, implantação gradativa e balanceamento de carga.

Passos para Implantar um Projeto Vue com Nginx

Instalação do Nginx

Instalação no Windows

Baixe a versão adequada do Nginx no site oficial. Para iniciar o servidor:

cd F:
nginx-1.19.4
start nginx

Instalação no Linux

Geralmente, o Linux é preferido para servidores Nginx. Existem dois métodos de instalação:

1. Usando pacotes pré-compilados conforme documentação em https://nginx.org/en/linux_packages.html#stable
2. Compilando a partir do fonte conforme descrito em https://nginx.org/en/docs/install.html

A implantação do projeto Vue no Linux é semelhante ao Windows. Envolve enviar o diretório "dist" do projeto para o servidor e configurar o parâmetro "root" no Nginx para apontar para esse diretório. Reinicie o serviço com:

# CentOS 7
systemctl restart nginx.service
# CentOS 6
service nginx restart
# Ou recarregar suavemente
service nginx reload

Empacotando o Projeto Vue

Execute o seguinte comando para gerar os arquivos de produção:

npm run build

Configurando o Nginx

Modifique o arquivo de configuração (geralmente em conf/nginx.conf), ajustando a seção "server" conforme abaixo:

server {
    listen       80; # Porta padrão, pode ser alterada se necessário
    server_name  localhost;
    root        /caminho/para/seu/projeto/vue/dist; # Diretório dos arquivos buildados do Vue

    location / {
        try_files $uri $uri/ @router; # Essencial para rotas Vue no Nginx
        index  index.html index.htm;
    }
    
    # Bloco para lidar com rotas do Vue.js
    location @router {
        rewrite ^.*$ /index.html last;
    }
    
    # Outras configurações omitidas
}

Após a configuração, recarregue o arquivo de configuração:

nginx -s reload

Para testar, acesse http://localhost no navegador e verifique se a aplicação está funcionando corretamente.