Como construir um site em um Raspberry Pi, com Node.js, Express e MongoDB Parte 1: 6 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:38

Bem-vindo à PARTE 1 do meu tutorial do aplicativo da web node.js. A Parte 1 abordará o software necessário usado para o desenvolvimento de aplicativo node.js, como usar o encaminhamento de porta, como construir um aplicativo usando Express e como executar seu aplicativo. A segunda parte deste tutorial examinará todo o código e a estrutura do meu aplicativo da web completo. Se você está pronto para isso visite-o aqui.

Portanto, ao construir minha página de lançamento pessoal, achei muito difícil me livrar das ervas daninhas. Há mais coisas na internet do que eu jamais entenderei sobre a construção de uma página da web.

Este é um passo a passo sobre como usar Node.js, Express e Mongodb. para criar uma página da web.

O código para tudo isso está aqui.

Minha página da web é chamada de Internet. Visite se quiser uma visão mais interativa de um site pessoal.

Comecei esta página para ter uma presença pessoal na internet com os projetos que fiz, com links para meus projetos instructables para mais detalhes.

Este site está hospedado em minha casa em um pi zero W.

Etapa 1: Coisas que você precisa

1 vez. Não posso enfatizar que desenvolver um site e compreender verdadeiramente o funcionamento interno é um processo longo e demorado. Sou formado em engenharia elétrica com foco em microeletrônica e gosto de programação, e isso ainda me levou meses para conseguir.

Este tutorial será um bom bloco de construção, mas leia mais documentação online para entender cada peça.

2. Raspberry pi - qualquer modelo serve. Além disso, qualquer computador rodando Linux servirá. Na verdade, qualquer computador serve, só vou entrar em mais detalhes sobre como executá-lo em um pi.

3. Conexão com a Internet - se você planeja hospedar isso para o mundo. Um roteador ou switch de rede é necessário para configurar o encaminhamento de porta.

4. Software - Qualquer plataforma de codificação funcionará, Sublime, Webstorm, Notepadd ++, Visual Studios ou qualquer outra coisa. Usei principalmente Webstorm ou Sublime.

Etapa 2: Encaminhamento de porta em seu Raspberry Pi

Então, vou presumir que você já tem seu pi de framboesa configurado. Se não, confira este tutorial fácil aqui.

Meu pi está rodando Jessie Lite e é todo terminal. A vantagem disso é que não tenho muitos processos em execução em segundo plano que podem tornar meu servidor mais lento com alto tráfego. Deixe-me dizer agora que este tutorial é para sites de baixo tráfego. Qualquer site com alto tráfego será lento em um pi e pode fazer seu servidor travar.

Encaminhamento de porta

Com seu pi configurado, você terá que habilitar o encaminhamento de porta em seu roteador ou switch. Para fazer isso, encontre as configurações de encaminhamento de porta em seu roteador. Cada roteador é diferente, estou mostrando minha GUI Linksys Velop aqui.

Meu site está configurado para a porta 3000, isso pode ser alterado no código-fonte no arquivo app.js ou www.

Eu também tenho a porta 22 configurada para encaminhamento para que eu possa SSH em meu pi, isso pode ser configurado nas configurações de pi. SSH é uma maneira de usar o terminal em seu pi enquanto não estiver na mesma rede e também enquanto não estiver usando a saída de exibição do pi. Isso me permite atualizar meu site a partir de um computador diferente e enviar as alterações para o meu pi.

Siga as fotos para configurar o encaminhamento de porta.

Serviço DNS

Você precisará de um serviço que vincule seu endereço IP a um nome de endereço da web. Você poderá digitar o endereço IP global do seu roteador seguido pelo número da porta para acessar o seu site. Isso, no entanto, é difícil, especialmente se o seu IP global mudar. O que um serviço DNS faz é rastrear e atualizar essas mudanças para que seu nome na web e ip fiquem vinculados. Eu escolho usar um serviço gratuito através do no-ip. Você pode pagar o que quiser. Esta é apenas uma forma gratuita que eu conheço.

www.noip.com/

Etapa 3: Instalando o software necessário no Pi

Se você baixou meu código GitHub, não precisará fazer nada, exceto executar um comando npm start simples para colocar o site em execução. No entanto, como este é um tutorial detalhado, explicarei como instalar todos os softwares e pacotes necessários.

Enquanto estiver em seu computador pi ou linux (haverá diferentes comandos para usar o Windows), execute os seguintes comandos.

Eu dividi essas etapas em etapas individuais para torná-las mais fáceis de seguir.

1. Instale node.js e npm

Node.js é basicamente o script java que cria o servidor. NPM é o gerenciador de pacotes de nós e lida com todo o middleware necessário com node.js.

Execute os seguintes comandos em uma máquina Linux ou Mac para instalar.

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash sudo apt-get install -y nodejs

Para fazer o download no windows, basta usar o exe encontrado aqui.

Este link é para a ajuda do Linux, se não em um pi de framboesa.

2. Instale o MongoDB

O MongoDB é apenas isso, um banco de dados. Eu uso isso para um login e parte do contador de tráfego da minha página da web.

Execute os seguintes comandos em uma máquina Linux ou Mac para instalar.

sudo apt-key adv --keyserver hkp: //keyserver.ubuntu.com: 80 --recv 0C49F3730359A14518585931BC711F9BA15703C6

echo "deb https://repo.mongodb.org/apt/debian jessie / mongodb-org / 3.4 main" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list

sudo apt-get update

sudo apt-get install -y mongodb-org

Para fazer o download no windows, basta usar o exe encontrado aqui.

Este link é para a ajuda do Linux, se não em um pi de framboesa.

3. Instale o Grunt

O Grunt é como o npm, já que você pode usá-lo em conjunto com outros plug-ins. Não o uso no meu aplicativo, mas é muito útil para automatizar tarefas. Esta etapa pode ser completamente ignorada para que seu aplicativo funcione.

Para Windows, Mac ou Linux, use o seguinte comando.

npm install -g grunt-cli

4. Instale o Express

Express é uma maneira fácil de usar o framework node js. Vamos instalar um gerador expresso. Isso cria a estrutura fácil de usar de um aplicativo da web.

Para Windows, Mac ou Linux, use o seguinte comando.

npm install express-generator -g

Etapa 4: Criar um aplicativo Node.js expresso

Navegue até o local da pasta em que você planeja ter seu aplicativo. Uma vez aqui, todas as instalações futuras estarão dentro desta pasta.

Execute os seguintes comandos em uma máquina Linux ou Mac para alterar o diretório.

sudo cd / home / pi / myapp

Para Windows:

cd C: / Users / pi / Desktop / myapp

Use o gerador expresso para criar a estrutura do node js necessária.

nome expresso do meu aplicativo

Isso criará um projeto node.js expresso vazio. Você pode editar seus recursos durante esta etapa, encontrando diferentes comandos, conforme visto abaixo, usando o comando -h. Ou você pode editar manualmente o modelo gerado, como eu fiz. Discutirei isso com mais detalhes na parte 2. Você pode adicionar outras variáveis a este código para alterar as configurações em seu aplicativo, como o uso de html, barras de apoio, jade e outros. Para isso, execute o comando:

expresso -h

Continue configurando seu aplicativo da web node.js executando os seguintes comandos:

cd nameofmyapp

npm install

Isso instala todos os pacotes necessários que seu aplicativo da web node.js precisará para executar e mais que estão disponíveis para uso.

Neste exemplo, o caminho do arquivo para o aplicativo seria:

/ home / pi / myapp / nameofmyapp

Isso ocorre porque o gerador expresso cria um arquivo com base na string que você coloca depois dele. Se você já está no diretório desejado, basta usar express.

Etapa 5: execute seu aplicativo da web

Para executar seu aplicativo da web node.js, execute o comando:

npm start

Para torná-lo mais eficiente durante a codificação, para que nosso aplicativo seja atualizado automaticamente após fazermos as alterações, instalaremos o nodemon.

npm install -g nodemon

Aqui é onde a maioria dos tutoriais diria para você se divertir construindo e deixaria você descobrir o trabalho duro da perna. Nas próximas etapas, vou orientá-lo sobre como criei meu aplicativo.

Etapa 6: crédito

Não é realmente um passo, mas quero listar minhas fontes e inspiração para este tutorial.

Este Github ReadMe foi escrito por um bom amigo enquanto trabalhava em nosso projeto de design sênior e serviu de muita inspiração para criar meu site.

github.com/SDP-DT04/Web-Application/blob/m…

Este tutorial foi uma ferramenta útil no processo de criação de um aplicativo da web.

kroltech.com/2013/12/29/boilerplate-web-app…

Para obter mais informações sobre um site node.js, visite minha Parte 2.