Olá, Habr!
Neste artigo, vou mostrar como publicar facilmente um site estático usando as tecnologias da Yandex, ou seja, Object Storage.
No final, você terá um site hospedado na rede, acessível por um link externo.
Este artigo será útil se você
- É um desenvolvedor iniciante que está apenas aprendendo a programar;
- É um desenvolvedor que criou um portfólio e deseja hospedá-lo publicamente para mostrar a amigos e empregadores.
Sobre mim
Recentemente, desenvolvi um serviço SaaS, algo similar a um marketplace, onde as pessoas encontram treinadores esportivos para treinamentos pessoais. Usei a pilha da Amazon Web Services (AWS). Mas quanto mais me aprofundava no projeto, mais nuances descobria sobre os diferentes processos de organização de uma startup.
Enfrentei os seguintes problemas:
- A AWS estava consumindo muito dinheiro. Depois de trabalhar 3 anos em empresas de grande porte, estou acostumado com coisas como Docker, Kubernetes, CI/CD, blue green deployment, e, como um programador iniciante em startups, queria implementar o mesmo. No final, percebi que a AWS custava entre 300-400 dólares por mês. O mais caro era o Kubernetes, cerca de 100 dólares, com uma configuração mínima de um cluster e um nó.
P.S. No início, não é necessário fazer assim. - Em seguida, ao refletir sobre os aspectos legais, soube sobre a lei 152-FZ, que dizia mais ou menos o seguinte: "Os dados pessoais dos cidadãos da RF devem ser armazenados no território da RF", caso contrário, multas, o que eu não queria. Decidi lidar com essas questões antes que "a alta" me surpreendesse : ).
Inspirado na migração da infraestrutura da Amazon Web Services para o Yandex.Cloud, decidi estudar melhor a pilha da Yandex.
Para mim, as características principais do Yandex.Cloud eram as seguintes:
- Mais barato de 2 a 3 vezes (de acordo com o artigo acima e listas de preços públicas)
- , o que o grande Amazon ainda não consegue fazer.
Estudei outros concorrentes desse serviço, mas naquele momento, a Yandex estava à frente.
Depois de falar sobre mim, vamos ao que interessa.
Passo 0. Preparar o site
Primeiro, precisamos de um site que queremos hospedar na internet. Como sou desenvolvedor Angular, farei um modelo simples de um aplicativo SPA, que depois publicarei na internet.
P.S. Para quem entende de Angular ou conhece sua documentação , vá para .
Vamos instalar o Angular-CLI para criar sites SPA em Angular:
npm install -g @angular/cliVamos criar um aplicativo Angular com o seguinte comando:
ng new angular-habr-object-storageEm seguida, vamos para a pasta do aplicativo e o iniciamos para verificar se está funcionando:
cd angular-habr-object-storage
ng serve --open
O aplicativo foi criado, mas ainda não está pronto para hospedagem. Vamos compilar o aplicativo em um pequeno build (Produção) para remover tudo o que é desnecessário e deixar apenas os arquivos essenciais.
No Angular, isso pode ser feito com o seguinte comando:
ng build --prodComo resultado desse comando, uma pasta apareceu na raiz do aplicativo dist com o nosso site.
Está funcionando. Agora vamos para a hospedagem.
Passo 1.
Vamos para o site e clicamos no botão "Conectar".
Nota:
- Para usar o serviço do Yandex, pode ser necessário ter um e-mail Yandex (mas não é certo)
- Para algumas funções, você terá que depositar dinheiro na conta na área pessoal (mínimo de 500 rublos).
Após o registro e login bem-sucedidos, estamos na área pessoal.
Em seguida, no menu à esquerda, precisamos encontrar o serviço "Object Storage", que vamos usar para hospedar o site.
Em resumo sobre os termos:
- Object Storage é um armazenamento de arquivos compatível com a tecnologia similar da Amazon AWS S3, que também possui sua própria API para gerenciar o armazenamento a partir do código e, assim como o AWS S3, pode ser usado para hospedar um site estático.
- No Object Storage, criamos "buckets" (bucket / Lixeira), que são armazenamentos separados para nossos arquivos.
Vamos criar um deles. Para isso, na console do serviço, clicamos no botão "Criar bucket".
No formulário de criação do bucket, existem os seguintes campos, vamos passar por eles:
- Nome do bucket. Para simplificar, vamos nomeá-lo da mesma forma que o projeto Angular —
angular-habr-object-storage - Tamanho máximo. Definimos o quanto o nosso site pesa, já que o site não é armazenado gratuitamente e por cada gigabyte alocado, pagaremos uma pequena quantia ao Yandex.
- Acesso para leitura de objetos. Definimos como "Público", já que o usuário deve poder acessar cada arquivo do nosso site estático para que o layout seja renderizado corretamente, os scripts sejam executados, etc.
- Acesso à lista de objetos e Acesso para leitura das configurações. Deixamos como "Restrito". Isso é necessário para usar o bucket como um armazenamento interno de arquivos para aplicativos.
- Classe de armazenamento. Mantemos "Padrão". Isso significa que nosso site será frequentemente visitado e, portanto, os arquivos que compõem o site serão baixados regularmente. Além disso, esse item influencia no desempenho e na cobrança (inserir link).
Clicamos em "Criar bucket" e o bucket foi criado.
Agora precisamos carregar nosso site no bucket. A maneira mais simples é abrir a pasta do lado dist do nosso site e arrastar manualmente para a página. Isso é mais prático do que clicar no botão "Carregar objetos", pois assim as pastas não são transferidas e precisarão ser criadas manualmente na sequência correta.
Então, o site foi carregado no armazenamento, e podemos permitir que os usuários acessem o armazenamento como se fosse um site.
Para isso, à esquerda no menu, clicamos na aba "Website".
Na página de configuração do bucket como site, escolhemos a aba "Hosting". Aqui, especificamos a página principal do site, que normalmente é index.html. Se você tiver um aplicativo SPA, é provável que todos os erros sejam tratados também na página principal, então também especificaremos index.html na página de erros.
Imediatamente vemos qual link estará disponível para nosso site. Clicamos em salvar.
Após cerca de 5 minutos, ao acessar o link, vemos que agora nosso site está disponível para todos.
Obrigado a todos que leram até o fim! Este é o meu primeiro artigo, planejo descrever outros serviços do Yandex e sua integração com tecnologias frontend e backend.
Escreva nos comentários quão interessante seria para você saber sobre outros serviços do Yandex ou sobre o uso do Angular no desenvolvimento moderno.
Fonte: habr.com
