Oi, Habr!
Neste artigo, direi como hospedar de forma fácil e simples um site estático usando tecnologias Yandex, ou seja, Armazenamento de objetos.
No final, você terá um site hospedado na web que poderá ser acessado por meio de um link externo.
Este artigo será útil se você
- Um desenvolvedor iniciante que está aprendendo a programar;
- Um desenvolvedor que criou um portfólio e deseja colocá-lo em domínio público para mostrá-lo a amigos e empregadores.
Quem sou eu
Recentemente, estava desenvolvendo um serviço SaaS, uma espécie de marketplace onde as pessoas encontram treinadores esportivos para treinamento pessoal. Utilizou a pilha Amazon Web Services (doravante denominada AWS). Mas quanto mais me aprofundei no projeto, mais nuances aprendi sobre os diferentes processos de organização de uma startup.
Encontrei os seguintes problemas:
- A AWS estava consumindo muito dinheiro. Tendo trabalhado por 3 anos em empresas Enterprise, me acostumei com alegrias como Docker, Kubernetes, CI/CD, implantação azul verde e, como aspirante a programador de startups, queria implementar o mesmo. Como resultado, cheguei à conclusão de que a AWS consumia de 300 a 400 dólares por mês. O Kubernetes acabou sendo o mais caro, cerca de 100 dólares, com salário mínimo de um cluster e um nó.
PS Não há necessidade de fazer isso no início. - A seguir, pensando no lado jurídico, tomei conhecimento da lei 152-FZ, que dizia algo como o seguinte: "Os dados pessoais dos cidadãos da Federação Russa devem ser armazenados no território da Federação Russa", caso contrário, multas, o que eu não queria. Decidi abordar essas questões antes que elas viessem de cima :).
Inspirado sobre a migração da infraestrutura da Amazon Web Services para Yandex.Cloud, decidi estudar a pilha Yandex com mais detalhes.
Para mim, os principais recursos do Yandex.Cloud foram os seguintes:
- 2-3 vezes mais barato (de acordo com o artigo acima e listas de preços públicas)
- , que a grande Amazônia ainda não consegue alcançar.
Estudei outros concorrentes deste serviço, mas naquela época o Yandex estava ganhando.
Eu contei a você sobre mim, para que possamos começar a trabalhar.
Passo 0. Prepare o site
Primeiro, precisamos de um site que queremos colocar na Internet. Como sou desenvolvedor Angular, farei um modelo simples de aplicação SPA, que depois postarei na Internet.
PS Quem entende de Angular ou conhece sua documentação , Vá para .
Vamos instalar o Angular-CLI para criar sites SPA no Angular:
npm install -g @angular/cliVamos criar uma aplicação Angular usando o seguinte comando:
ng new angular-habr-object-storageEm seguida, vá até a pasta do aplicativo e execute-o para verificar sua funcionalidade:
cd angular-habr-object-storage
ng serve --open
O aplicativo foi criado, mas ainda não está pronto para hospedagem. Vamos montar a aplicação em um pequeno build (Produção) para remover todas as coisas desnecessárias e deixar apenas os arquivos necessários.
No Angular você pode fazer isso com o seguinte comando:
ng build --prodComo resultado deste comando, apareceu uma pasta na raiz do aplicativo dist com nosso site.
Funciona. Agora vamos passar para a hospedagem.
Passo 1.
Vá para o site e clique no botão “Conectar”.
Nota:
- Para usar o serviço Yandex, você pode precisar do correio Yandex (mas isso não é certo)
- Para algumas funções, você terá que depositar dinheiro em sua conta pessoal (mínimo 500 rublos).
Após registro e autorização bem-sucedidos, estamos em sua conta pessoal.
A seguir, à esquerda do menu, você precisa encontrar o serviço “Object Storage”, que utilizaremos para hospedar o site.
Resumidamente em termos:
- Object Storage é um armazenamento de arquivos compatível com a tecnologia semelhante AWS S3 da Amazon, que também possui sua própria API para gerenciar armazenamento a partir de código e, como AWS S3, pode ser usada para hospedar um site estático.
- No Object Storage criamos “buckets” (baldes), que são áreas de armazenamento separadas para nossos arquivos.
Vamos criar um deles. Para fazer isso, no console de serviço, clique no botão “Criar bucket”.
O formulário para criação de bucket possui os seguintes campos, vamos analisá-los:
- Nome do intervalo. Para simplificar, vamos chamar o projeto da mesma forma que Angular -
angular-habr-object-storage - Máx. tamanho. Apostamos quanto pesa o nosso site, já que o site não é armazenado de graça e para cada gigabyte alocado pagaremos ao Yandex um belo centavo.
- Acesso para ler objetos. Definimos como “Público”, pois o usuário deve receber cada arquivo do nosso site estático para que nele seja desenhado corretamente o layout, processados scripts, etc.
- Acesso à lista de objetos e Acesso às configurações de leitura. Deixe como "Limitado". Isso é necessário para usar o bucket como armazenamento interno de arquivos para aplicativos.
- Classe de armazenamento. Deixe como "Padrão". Isso significa que nosso site será visitado com frequência e, portanto, os arquivos que compõem o site serão baixados com frequência. Além disso, o item afeta o desempenho e o pagamento (inserir link).
Clique em “Criar um bucket” e o bucket será criado.
Agora precisamos fazer upload do nosso site para o bucket. A maneira mais fácil é abrir uma pasta próxima dist nosso site e arraste-o diretamente para a página usando alças. Isto é mais cómodo do que clicar no botão “Carregar objectos”, pois neste caso as pastas não são transferidas e terá que criá-las manualmente na sequência correcta.
Assim, o site é carregado no armazenamento, para que possamos oferecer aos usuários a oportunidade de acessar o armazenamento como um site.
Para isso, no lado esquerdo do menu, clique na aba “Site”.
Na página de configuração de um bucket como site, selecione a aba “Hospedagem”. Aqui indicamos a página principal do site, geralmente index.html. Se você possui um aplicativo SPA, provavelmente todos os erros também serão processados na página principal, portanto também indicaremos index.html na página de erro.
Vemos imediatamente por qual link nosso site estará acessível. Clique em salvar.
Após cerca de 5 minutos, clicando no link, vemos que nosso site já está disponível para todos.
Obrigado a todos que leram até o fim! Este é meu primeiro artigo; pretendo descrever com mais detalhes outros serviços Yandex e sua integração com tecnologias de front-end e back-end.
Escreva nos comentários o quanto você está interessado em aprender sobre outros serviços Yandex ou sobre o uso do Angular no desenvolvimento moderno.
Fonte: habr.com