Configurar um aplicativo Web Nuxt.js no Ubuntu 18.04 LTS

• Nuxt.js: a estrutura universal
• Instalando o Node.js
• Aplicação do andaime
• Início inicial
• Prédio para produção
• PM2: gerencie seu aplicativo com facilidade

Nuxt.js: a estrutura universal

O Nuxt.js é uma estrutura JavaScript projetada para criar rapidamente aplicativos universais do Vue.js. É notoriamente notável por sua capacidade de criar aplicativos Vue.js. que podem ser renderizados no servidor e no cliente. Neste tutorial, configuraremos um aplicativo Nuxt.js renderizado pelo servidor e o implantaremos no Ubuntu 18.04 LTS.

Instalando o Node.js

Primeiro, você precisará ter certeza de que está executando o Ubuntu 18.04 LTS. Em seguida, você precisará instalar o Node.js, se ainda não estiver instalado. Neste tutorial, usaremos o Node Version Manager, ou NVM, para facilitar esse processo.

Instale o NVM usando os seguintes comandos.

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile
nvm install 11.1.0
nvm use 11.1.0

Aplicação do andaime

Depois de instalar o Node.js, agora podemos prosseguir com a configuração dos pacotes que precisaremos usando o NPM. Usaremos uma pequena ferramenta útil chamada create-nuxt-app, uma ferramenta criada pela comunidade que pode facilmente criar aplicativos Nuxt.js.

No seu diretório pessoal, execute o seguinte comando para iniciar a geração do aplicativo.

npx create-nuxt-app <nameofproject>

O console solicitará várias opções importantes. Para fins deste tutorial, nomearemos nosso projeto " app". Usaremos o Express como nossa estrutura de servidor personalizada e executaremos o aplicativo no modo universal, o que garante que renderizaremos nosso site no servidor. Quando você especificar todas as permissões necessárias, o processo de instalação será iniciado e todos os arquivos de configuração serão criados.

Início inicial

Depois que tudo tiver sido baixado, altere os diretórios para a pasta que você acabou de criar.

cd app

Agora podemos iniciar o servidor de desenvolvimento Nuxt.js.

npm run dev

Este comando criará o site usando o webpack, que é um empacotador de módulo, e servirá o site em uma porta localhost, que geralmente será port 3000. Também lhe dará acesso a módulos de recarga a quente, o que removerá a necessidade de reiniciar o aplicativo toda vez que você alterar um arquivo. Como estamos executando o aplicativo no modo universal, o aplicativo será compilado no cliente e no servidor. Agora seu aplicativo estará sendo executado na porta 3000.

Prédio para produção

O modo de desenvolvimento é bastante útil para quando você está desenvolvendo ativamente seu aplicativo. No entanto, quando você estiver pronto para tornar seu aplicativo público, complementos como ferramentas de atualização a quente e de desenvolvedor se tornam menos importantes. É por isso que queremos construir nosso aplicativo uma vez, para um ambiente de produção. Felizmente, o Nuxt.js inclui uma ferramenta que podemos usar para criar rapidamente módulos de produção de aplicativos. Execute o seguinte para iniciar o processo de construção da produção.

npm run build

Essencialmente, o que estamos fazendo aqui é que estamos compilando todos os nossos módulos de webpack, com otimizações para produção.

Quando a construção estiver concluída, você poderá executar o site para produção.

npm start

Agora, se você navegar http://yourip:3000, verá a tela inicial do Nuxt.js., que confirma que você está executando no modo de produção.

PM2: gerencie seu aplicativo com facilidade

Agora entendemos o básico da execução de nosso aplicativo para produção. Em termos de ambiente de produção, preferimos uma boa maneira de manter o aplicativo em execução para sempre, reiniciar automaticamente o aplicativo quando necessário e monitorar os recursos do aplicativo. É aí que entra o Process Manager 2 (PM2). O PM2 é um gerenciador de processos do Node.js. para aplicativos de produção, que inclui muitas ferramentas importantes de produção, como balanceamento de carga, logs avançados, scripts de inicialização e muito mais. Primeiro, instale o PM2.

npm install pm2 -g

Isso instala o PM2 globalmente, para que possamos usá-lo em qualquer lugar do nosso servidor. Quando o download do PM2 terminar, podemos iniciar nosso aplicativo.

pm2 start <appfolder>/server/index.js

Observe que estamos iniciando o arquivo do servidor localizado dentro da raiz do aplicativo.

Se você deseja visualizar os recursos que seu aplicativo está consumindo, pode fazê-lo com o pm2 monitcomando Isso exibirá uma interface semelhante à das ncurses, na qual você poderá coletar dados com precisão sobre a RAM, a CPU e o uso do disco do seu aplicativo.

Até agora, seu aplicativo estará sendo executado exatamente como era quando o rodamos com o npm anteriormente, mas agora temos muito mais controle quando se trata de otimizações de produção.

Agora você tem uma compilação de aplicativo Nuxt.js implantada para produção com Node.js. e Ubuntu 18.04. Se você quiser saber mais sobre o Nuxt, e todos os seus recursos, sinta-se à vontade para visitar a documentação oficial .