Ir para o conteúdo

Hospedando uma aplicação web gratuitamente usando o Railway

De Wikiversidade

Hospedar uma aplicação na nuvem significa disponibilizar seu código para que ele seja executado em servidores remotos, 24 horas por dia, acessíveis via internet. Isso permite que aplicações web sejam acessadas por qualquer dispositivo, sem depender do computador local do desenvolvedor.

Atualmente, uma maneira de realizar isso é através de plataformas PaaS (Platform as a Service). A plataforma como serviço é um modelo de computação em nuvem que fornece um ambiente para desenvolver, implantar e gerenciar aplicações sem que os desenvolvedores precisem gerenciar a infraestrutura subjacente, podendo focar no código em si. Para tanto, o provedor da PaaS hospeda os servidores, redes, armazenamento, banco, dados e outras estruturas em seu próprio data center.

O Railway é uma dessas plataformas PaaS. Cuidando automaticamente de deploy, build, servidor, logs, variáveis de ambiente, certificados HTTPS e exposição pública da API ou sistema web, a platafoma simplifica a hospedagem de aplicações web na nuvem, com os desenvolvedores podendo fazer deploy diretamente a partir do GitHub.

Para exemplificar, vamos criar uma aplicação simples fullstack que exibe uma mensagem que vem do servidor, utilizando:

  • Backend em Node.js + Express;
  • Frontend: HTML + JavaScript.

Criando a aplicação

[editar | editar código]

A aplicação de exemplo terá a seguinte estrutura dividida indiretamente em backend e em frontend:

simple-app/
├── index.js
├── package.json
├── .env
├── index.html
├── script.js
├── .gitignore

Estrutura do backend

[editar | editar código]

O backend, desenvolvido em Node.js + Express, apresenta 3 arquivos: package.json, .env e index.js.

package.json

[editar | editar código]

Esse arquivo diz ao Node.js quais bibliotecas o projeto usa e como rodar a aplicação.

{
  "name": "simple-app-backend",
  "version": "1.0.0",
  "type": "module",                      // Permite usar import/export ao invés de require
  "main": "index.js",                    // Arquivo principal da aplicação
  "scripts": {
    "start": "node index.js"             // Comando para iniciar o servidor
  },
  "dependencies": {
    "dotenv": "^16.0.3",                 // Carrega variáveis do arquivo .env
    "express": "^4.18.2"                 // Framework web para Node.js
  }
}

Esse arquivo armazena variáveis sensíveis, como senhas, ou que variam por ambiente (local ou público). A ideia é não deixar esse arquivo público, pois pode conter segredos. Por isso, é listado no .gitignore.

PORT=3000

A porta 3000 é a porta padrão para servidores de desenvolvimento local.

Esse arquivo é o servidor Express. Ele serve o HTML e responde com dados via API.

import express from 'express';
import dotenv from 'dotenv';
import path from 'path';
import { fileURLToPath } from 'url';

// Configura variáveis de ambiente
dotenv.config();

// Suporte a __dirname em módulos ES
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();
const PORT = process.env.PORT || 3000;

// Servir os arquivos do frontend
app.use(express.static(__dirname));

// Rota da API que retorna uma mensagem
app.get('/api/mensagem', (req, res) => {
  res.json({ mensagem: 'Olá! A aplicação está funcionando :)' });
});

// Inicia o servidor
app.listen(PORT, () => {
  console.log(`Servidor rodando em http://localhost:${PORT}`);
});

Estrutura do frontend

[editar | editar código]

O frontend, desenvolvido em HTML + Javascript, apresenta 2 arquivos: index.html e script.js.

index.html

[editar | editar código]

Esse arquivo contém o HTML mostrado ao usuário e carrega o arquivo Javascript.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>App Simples</title>
</head>
<body>
  <h1>Mensagem do Servidor:</h1>
  <p id="mensagem">Carregando...</p>

  <script src="script.js"></script>
</body>
</html>

script.js

[editar | editar código]

Esse arquivo faz uma requisição à rota /api/mensagem e exibe a resposta na página.

fetch('/api/mensagem')
  .then(res => res.json())                            // Converte a resposta em JSON
  .then(data => {
    document.getElementById('mensagem').textContent = data.mensagem;
  })
  .catch(err => {
    document.getElementById('mensagem').textContent = 'Erro ao carregar mensagem.';
    console.error(err);
  });

Esse é o ponto de comunicação entre o frontend e o backend. O arquivo consulta o servidor assim que a página é aberta e exibe a mensagem.

.gitignore

[editar | editar código]

Por fim, esse arquivo evita que informações sensíveis ou não-desejadas sejam enviadas ao GitHub.

node_modules/
.env

Conectando com o GitHub

[editar | editar código]

Caso o projeto ainda não esteja no GitHub, é necessário colocá-lo na plataforma. Por exemplo, é possível realizar isso a partir do terminal, com os comandos:

git init
git add .
git commit -m "App simples"
git remote add origin https://github.com/seu-usuario/simple-app.git
git push -u origin main

Hospedagem no Railway

[editar | editar código]

Com o projeto no GitHub, agora é possível hospedar o programa no Railway. De fato, há diversas maneiras de colocar um programa no sistema, mas integrando com o GitHub é uma das mais intuitivas.

Para tanto, devemos seguir os passos:

  1. Acessar o site do sistema: https://railway.com/;
  2. Criar um novo projeto via Deploy do GitHub;
  3. Escolher o repositório, por exemplo: simple-app;
  4. Ir em Configurações > Variáveis e adicionar PORT = 3000;
  5. Railway detecta o backend, faz o build e disponibiliza a aplicação na web;
  6. Acessar as configurações do projeto em Settings;
  7. Em Networking, gerar o domínio público;

Acessando a aplicação

[editar | editar código]

Caso o acesso seja localmente, é necessário abrir o terminal e ir até o diretório com o projeto utilizando cd. Em seguida, instalamos as dependências com npm install. Por fim, iniciamos o servidor com npm start. A aplicação estará disponível em http://localhost:3000.

Caso o acesso seja via internet, basta pesquisar o domínio gerado pelo projeto anteriormente.

A importância de hospedar aplicações na nuvem

[editar | editar código]

No desenvolvimento de software moderno, hospedar uma aplicação na nuvem tornou-se uma parte essencial do processo de criação de sistemas reais, testáveis e acessíveis.

Inicialmente, ao colocarmos uma aplicação online, é possibilitado que outras pessoas (colegas, clientes ou usuários) acessem e testem a aplicação de qualquer lugar, a qualquer hora, sem depender do computador do desenvolvedor estar ligado.

Além disso, trabalhar com deploys permite a colaboração simultânea entre diferentes áreas do projeto. Um backend hospedado pode ser consumido imediatamente por desenvolvedores front-end, por exemplo. Isso acelera o desenvolvimento e reduz os bloqueios entre equipes.

Ademais, hospedar traz o benefício de testar a aplicação em um ambiente real, com variáveis de ambiente, rede e comportamento de servidor mais próximos do que seria encontrado em produção. Muitos erros que passam despercebidos localmente aparecem apenas nesse contexto, e corrigí-los nessa fase é crucial para entregar um sistema mais estável e confiável.

Portanto, colocar sua aplicação na nuvem transforma seu projeto de código local em um sistema acessível, testável e profissional. Assim, configura-se como um diferencial que demonstra preparo, visão prática e capacidade de entregar soluções completas.

Referências bibliográficas

[editar | editar código]
  1. Documentação do Railway
  2. Site oficial do Railway
  3. Site oficial do NodeJS em português
  4. Site oficial do ExpressJS
  5. Dotenv do NPM
  6. Site oficial do GitHub
  7. Explicação da IBM sobre PaaS