{"id":85646,"date":"2020-06-18T01:42:15","date_gmt":"2020-06-17T23:42:15","guid":{"rendered":"https:\/\/prohoster.info\/blog\/administrirovanie\/ci-cd-v-github-actions-dlya-proekta-na-flask-angular"},"modified":"2020-06-18T01:42:15","modified_gmt":"2020-06-17T23:42:15","slug":"ci-cd-v-github-actions-dlya-proekta-na-flask-angular","status":"publish","type":"post","link":"https:\/\/prohoster.info\/pt\/blog\/administrirovanie\/ci-cd-v-github-actions-dlya-proekta-na-flask-angular","title":{"rendered":"CI\/CD no Github Actions para um projeto em Flask+Angular","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/26d0945a41bbf3c98fa92f15be5b8c6c.png\" style=\"display:block;margin: 0 auto;\" \/><br \/>\nNeste artigo, compartilharei minha experi\u00eancia na configura\u00e7\u00e3o de CI\/CD usando o painel de controle Plesk e o Github Actions. Hoje, vamos aprender a fazer o deploy de um projeto simples chamado \"Helloworld\". Ele \u00e9 desenvolvido no framework Flask em Python, com workers no Celery e frontend em Angular 8.<\/p>\n<p><b>Links para os reposit\u00f3rios:<\/b> <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/olegborzov\/helloworld_back\">backend<\/a><\/noindex>, <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/olegborzov\/helloworld-front\">frontend<\/a><\/noindex>.<\/p>\n<p>Na primeira parte do artigo, veremos nosso projeto e suas partes. Na segunda, entenderemos como configurar o Plesk e instalar as extens\u00f5es e componentes necess\u00e1rios (BD, RabbitMQ, Redis, Docker, etc.).<\/p>\n<p>Na terceira parte, finalmente entenderemos como configurar o pipeline para o deploy do nosso projeto no servidor em ambiente dev e prod. Depois, vamos lan\u00e7ar o site no servidor.<\/p>\n<p>E sim, esqueci de me apresentar. Me chamo Oleg Borzov, sou desenvolvedor fullstack na equipe de CRM para gerentes de cr\u00e9dito hipotec\u00e1rio no Domclick. <br \/>\n<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<h1>Vis\u00e3o Geral do Projeto<\/h1>\n<p>\nPara come\u00e7ar, vamos examinar dois reposit\u00f3rios do projeto \u2014 o backend e o frontend \u2014 e dar uma olhada no c\u00f3digo.<\/p>\n<h2>Parte do backend: Flask+Celery<\/h2>\n<p>\nPara a parte backend, escolhi uma combina\u00e7\u00e3o bastante popular entre desenvolvedores Python: o framework Flask (para API) e o Celery (para gerenciamento de filas). Utiliza-se o SQLAlchemy como ORM. Para migra\u00e7\u00f5es, aplicamos o Alembic. Para valida\u00e7\u00e3o de JSON nas rotas, usamos o Marshmallow.<\/p>\n<p>Em <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/olegborzov\/helloworld_back\">reposit\u00f3rio<\/a><\/noindex> existe um arquivo Readme.md com uma descri\u00e7\u00e3o detalhada da estrutura e instru\u00e7\u00f5es para iniciar o projeto.<\/p>\n<p><noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/olegborzov\/helloworld_back\/tree\/master\/app_web\">API do frontend<\/a><\/noindex> \u00e9 bastante simples, composta por 6 rotas:<\/p>\n<ul>\n<li><code>\/ping<\/code> \u2014 para verificar a disponibilidade;<\/li>\n<li>rotas para registro, autoriza\u00e7\u00e3o, desautoriza\u00e7\u00e3o e obten\u00e7\u00e3o do usu\u00e1rio autorizado;<\/li>\n<li>uma rota para enviar email, que coloca a tarefa na fila do Celery.<\/li>\n<\/ul>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/olegborzov\/helloworld_back\/tree\/master\/app_celery\">Parte do Celery<\/a><\/noindex> \u00e9 ainda mais simples, h\u00e1 apenas uma tarefa <code>send_mail_task<\/code>.<\/p>\n<p>Na pasta <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/olegborzov\/helloworld_back\/tree\/master\/conf\/\">\/conf<\/a><\/noindex> existem duas pastas secund\u00e1rias: <\/p>\n<ul>\n<li><code>docker<\/code> com dois arquivos Docker (<code>base.dockerfile<\/code> para construir uma imagem base que muda raramente e <code>Dockerfile<\/code> para as constru\u00e7\u00f5es principais);<\/li>\n<li><code>.env_files<\/code> \u2014 com arquivos contendo vari\u00e1veis de ambiente para diferentes ambientes. <\/li>\n<\/ul>\n<p>\nNa raiz do projeto, existem quatro arquivos docker-compose:<\/p>\n<ul>\n<li><code>docker-compose.local.db.yml<\/code> para levantar o BD local para desenvolvimento;<\/li>\n<li><code>docker-compose.local.workers.yml<\/code> para levantar localmente o worker, BD, Redis e RabbitMQ;<\/li>\n<li><code>docker-compose.test.yml<\/code> para executar testes durante o deploy;<\/li>\n<li><code>docker-compose.yml<\/code> para o deploy.<\/li>\n<\/ul>\n<p>\nE a \u00faltima pasta interessante para n\u00f3s \u2014 <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/olegborzov\/helloworld_back\/tree\/master\/.ci-cd\">.ci-cd<\/a><\/noindex>. Dentro dela est\u00e3o scripts shell para o deploy:<\/p>\n<ul>\n<li><code>deploy.sh<\/code> \u2014 execu\u00e7\u00e3o de migra\u00e7\u00f5es e deploy. \u00c9 executado no servidor ap\u00f3s a compila\u00e7\u00e3o e execu\u00e7\u00e3o de testes no Github Actions;<\/li>\n<li><code>rollback.sh<\/code> \u2014 reverter cont\u00eaineres para a vers\u00e3o anterior da constru\u00e7\u00e3o;<\/li>\n<li><code>curl_tg.sh<\/code> \u2014 envio de notifica\u00e7\u00f5es sobre o deploy no Telegram.<\/li>\n<\/ul>\n<p><\/p>\n<h2>Frontend em Angular<\/h2>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/olegborzov\/helloworld-front\">Reposit\u00f3rio com o front-end<\/a><\/noindex> significativamente mais simples que o back-end. O front-end consiste em tr\u00eas p\u00e1ginas:<\/p>\n<ul>\n<li>P\u00e1gina inicial com um formul\u00e1rio para envio de email e um bot\u00e3o de sa\u00edda.<\/li>\n<li>P\u00e1gina de login.<\/li>\n<li>P\u00e1gina de registro.<\/li>\n<\/ul>\n<p>\nA p\u00e1gina inicial tem um design minimalista:<\/p>\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/4db36add2c4277397724b0d71b96ff06.png\" style=\"display:block;margin: 0 auto;\" \/><br \/>\nNa raiz h\u00e1 dois arquivos <code>Dockerfile<\/code> e <code>docker-compose.yml<\/code>, al\u00e9m da pasta familiar <code>.ci-cd<\/code> com um n\u00famero um pouco menor de scripts em compara\u00e7\u00e3o com o reposit\u00f3rio do back-end (os scripts para execu\u00e7\u00e3o de testes foram removidos).<\/p>\n<h1>Criando o projeto no Plesk<\/h1>\n<p>\nVamos come\u00e7ar configurando o Plesk e criando uma assinatura para o nosso site.<\/p>\n<h2>Instala\u00e7\u00e3o de extens\u00f5es<\/h2>\n<p>\nNo Plesk, precisamos de quatro extens\u00f5es: <\/p>\n<ul>\n<li><code>Docker<\/code> para gerenciar e visualizar o estado dos cont\u00eaineres na interface administrativa do Plesk;<\/li>\n<li><code>Git<\/code> para configurar o passo de implanta\u00e7\u00e3o no servidor;<\/li>\n<li><code>Let's Encrypt<\/code> para gera\u00e7\u00e3o (e renova\u00e7\u00e3o autom\u00e1tica) de certificados TLS gratuitos;<\/li>\n<li><code>Firewall<\/code> para configurar a filtragem de tr\u00e1fego de entrada.<\/li>\n<\/ul>\n<p>\nPodemos instal\u00e1-las atrav\u00e9s da interface administrativa do Plesk na se\u00e7\u00e3o de Extens\u00f5es:<\/p>\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/350cf7d7ca3ae1a965a0d3f8a73594ef.png\" style=\"display:block;margin: 0 auto;\" \/><br \/>\nN\u00e3o vamos abordar a configura\u00e7\u00e3o detalhada das extens\u00f5es; as configura\u00e7\u00f5es padr\u00e3o s\u00e3o suficientes para nossos objetivos de demonstra\u00e7\u00e3o.<\/p>\n<h2>Cria\u00e7\u00e3o de assinatura e site<\/h2>\n<p>\nA seguir, precisamos criar uma assinatura para o nosso site helloworld.ru e adicionar um subdom\u00ednio dev.helloworld.ru.<\/p>\n<ol>\n<li>Criamos uma assinatura para o dom\u00ednio helloworld.ru e indicamos um login e senha para o usu\u00e1rio do sistema:\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/3932dc7492aa523b6cbd540ad7a7fe6b.png\" style=\"display:block;margin: 0 auto;\" \/><br \/>\nNa parte inferior da p\u00e1gina, marcamos a caixa <i>Proteja o dom\u00ednio com Let's Encrypt<\/i>, se quisermos configurar HTTPS para o site:<\/p>\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/f4d23a34764fdeb411fe2ca9cc95cb45.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<li>Em seguida, nesta assinatura, criamos o subdom\u00ednio dev.helloworld.ru (para o qual tamb\u00e9m podemos emitir um certificado TLS gratuito):\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/d57e6ba71454cb537917400de4275e92.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<\/ol>\n<p><\/p>\n<h1>Instala\u00e7\u00e3o dos componentes do servidor<\/h1>\n<p>\nTemos um servidor com <i>OS Debian Stretch 9.12<\/i> e com o painel de controle instalado <i>Plesk Obsidian 18.0.27<\/i>.<\/p>\n<p>Precisamos instalar e configurar para o nosso projeto:<\/p>\n<ul>\n<li>PostgreSQL (neste caso, teremos um servidor com dois bancos de dados para os ambientes dev e prod).<\/li>\n<li>RabbitMQ (o mesmo, uma inst\u00e2ncia com diferentes vhosts para os ambientes).<\/li>\n<li>Duas inst\u00e2ncias do Redis (para os ambientes dev e prod).<\/li>\n<li>Docker Registry (para armazenamento local de imagens Docker constru\u00eddas).<\/li>\n<li>Interface de usu\u00e1rio para o registro Docker.<\/li>\n<\/ul>\n<p><\/p>\n<h2>PostgreSQL<\/h2>\n<p>\nO Plesk j\u00e1 vem com o banco de dados PostgreSQL inclu\u00eddo, embora n\u00e3o na vers\u00e3o mais recente (no momento da escrita deste artigo, o Plesk Obsidian <noindex><a rel=\"nofollow\" href=\"https:\/\/docs.plesk.com\/release-notes\/obsidian\/software-requirements\/\">suportava<\/a><\/noindex> vers\u00f5es do Postgres de 8.4 a 10.8). Queremos ter a vers\u00e3o mais recente para nosso aplicativo (12.3 no momento da escrita deste artigo), ent\u00e3o iremos instal\u00e1-la manualmente.<\/p>\n<p>Instru\u00e7\u00f5es detalhadas sobre como instalar o Postgres no Debian podem ser facilmente encontradas na internet (<noindex><a rel=\"nofollow\" href=\"https:\/\/tecadmin.net\/install-postgresql-on-debian-9-stretch\/\">exemplo<\/a><\/noindex>), portanto, n\u00e3o vou descrev\u00ea-las em detalhes, apenas vou fornecer os comandos:<\/p>\n<pre><code class=\"bash\">wget -q https:\/\/www.postgresql.org\/media\/keys\/ACCC4CF8.asc -O - | sudo apt-key add -\nsudo sh -c 'echo \"deb http:\/\/apt.postgresql.org\/pub\/repos\/apt\/ stretch-pgdg main\" &gt;&gt; \/etc\/apt\/sources.list.d\/pgdg.list'\n\nsudo apt-get update\nsudo apt-get install postgresql postgresql-contrib\n<\/code><\/pre>\n<p>\nConsiderando que o PostgreSQL possui configura\u00e7\u00f5es padr\u00e3o bastante medianas, \u00e9 imprescind\u00edvel ajustar a configura\u00e7\u00e3o. Para isso, podemos contar com <noindex><a rel=\"nofollow\" href=\"http:\/\/pgconfigurator.cybertec.at\/\">calculador<\/a><\/noindex>: \u00e9 necess\u00e1rio inserir os par\u00e2metros do seu servidor e substituir as configura\u00e7\u00f5es no arquivo <code>\/etc\/postgresql\/12\/main\/postgresql.conf<\/code>pelas sugeridas. \u00c9 importante observar que tais calculadoras n\u00e3o s\u00e3o uma solu\u00e7\u00e3o m\u00e1gica, e o banco de dados deve ser ajustado de forma mais precisa, considerando seu hardware, aplica\u00e7\u00f5es e complexidade das consultas. Mas, para come\u00e7ar, isso \u00e9 suficiente.<\/p>\n<p>Al\u00e9m das configura\u00e7\u00f5es sugeridas pela calculadora, tamb\u00e9m alteramos no <code>postgresql.conf<\/code>a porta 5432, que est\u00e1 configurada por padr\u00e3o, para outra (no nosso exemplo \u2014 <strong>53983<\/strong>).<\/p>\n<p>Ap\u00f3s alterar o arquivo de configura\u00e7\u00e3o, reiniciamos o postgresql-server com o comando:<\/p>\n<pre><code class=\"bash\">service postgresql restart\n<\/code><\/pre>\n<p>\nInstalamos e configuramos o PostgreSQL. Agora vamos criar o banco de dados, usu\u00e1rios para os ambientes dev e prod, e conceder aos usu\u00e1rios permiss\u00f5es para gerenciar o banco de dados:<\/p>\n<pre><code class=\"bash\">$ su - postgres\npostgres:~$ create database hw_dev_db_name;\nCREATE DATABASE\npostgres:~$ create user hw_dev_db_user with password 'hw_dev_db_password';\nCREATE ROLE\npostgres:~$ grant ALL privileges ON database hw_dev_db_name to hw_dev_db_user;\nGRANT\npostgres:~$ create database hw_prod_db_name;\nCREATE DATABASE\npostgres:~$ create user hw_prod_db_user with password 'hw_prod_db_password';\nCREATE ROLE\npostgres:~$ grant ALL privileges ON database hw_prod_db_name to hw_prod_db_user;\nGRANT\n<\/code><\/pre>\n<p><\/p>\n<h2>RabbitMQ<\/h2>\n<p>\nVamos agora instalar o RabbitMQ \u2014 o broker de mensagens para Celery. A instala\u00e7\u00e3o no Debian \u00e9 bastante simples:<\/p>\n<pre><code class=\"bash\">wget https:\/\/packages.erlang-solutions.com\/erlang-solutions_1.0_all.deb\nsudo dpkg -i erlang-solutions_1.0_all.deb\n\nsudo apt-get update\nsudo apt-get install erlang erlang-nox\n\nsudo add-apt-repository 'deb http:\/\/www.rabbitmq.com\/debian\/ testing main'\nwget -O- https:\/\/www.rabbitmq.com\/rabbitmq-release-signing-key.asc | sudo apt-key add -\n\nsudo apt-get update\nsudo apt-get install rabbitmq-server\n<\/code><\/pre>\n<p>\nAp\u00f3s a instala\u00e7\u00e3o, precisamos criar <i>vhosts<\/i>, usu\u00e1rios e conceder as permiss\u00f5es necess\u00e1rias:<\/p>\n<pre><code class=\"bash\">sudo rabbitmqctl add_user hw_dev_amqp_user hw_dev_amqp_password \nsudo rabbitmqctl set_user_tags hw_dev_amqp_user administrator\nsudo rabbitmqctl add_vhost hw_dev_vhost\nsudo rabbitmqctl set_permissions -p hw_dev_vhost hw_dev_amqp_user \".*\" \".*\" \".*\"\n\nsudo rabbitmqctl add_user hw_prod_amqp_user hw_prod_amqp_password \nsudo rabbitmqctl set_user_tags hw_prod_amqp_user administrator\nsudo rabbitmqctl add_vhost hw_prod_vhost\nsudo rabbitmqctl set_permissions -p hw_prod_vhost hw_prod_amqp_user \".*\" \".*\" \".*\"\n<\/code><\/pre>\n<p><\/p>\n<h2>Redis<\/h2>\n<p>\nAgora vamos instalar e configurar o \u00faltimo componente para nossa aplica\u00e7\u00e3o \u2014 o Redis. Ele ser\u00e1 utilizado como backend para armazenar os resultados das tarefas do Celery.<\/p>\n<p>Iremos levantar dois cont\u00eaineres Docker com Redis para os ambientes dev e prod utilizando a extens\u00e3o <code>Docker<\/code> para Plesk.<\/p>\n<ol>\n<li>Acesse o Plesk, v\u00e1 para a se\u00e7\u00e3o Extens\u00f5es, busque pela extens\u00e3o Docker e instale-a (precisamos da vers\u00e3o gratuita):\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/5638f9b40274e4f7441434279c76a426.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<li>V\u00e1 para a extens\u00e3o instalada, busque pela imagem <code>redis bitnami<\/code> e instale a \u00faltima vers\u00e3o:\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/578bbbed6a66a60a4f7410f7d61ea542.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<li>Acesse o cont\u00eainer baixado e ajuste a configura\u00e7\u00e3o: especifique a porta, o tamanho m\u00e1ximo da RAM, a senha nas vari\u00e1veis de ambiente e monte o volume:\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/8bc804b794735412f5e510b3049c5667.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<li>Repita os passos 2-3 para o cont\u00eainer prod, alterando apenas os par\u00e2metros: porta, senha, tamanho da RAM e caminho da pasta volume no servidor:\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/3af50181c8b3e1ace23a8de11826cb51.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<\/ol>\n<p><\/p>\n<h2>Docker Registry<\/h2>\n<p>\nAl\u00e9m dos servi\u00e7os b\u00e1sicos, seria bom instalar um reposit\u00f3rio Docker pr\u00f3prio no servidor. Felizmente, o espa\u00e7o nos servidores \u00e9 bastante barato atualmente (definitivamente mais barato do que uma assinatura do DockerHub), e o processo de instala\u00e7\u00e3o de um reposit\u00f3rio privado \u00e9 muito simples. <\/p>\n<p>Queremos ter instalado:<\/p>\n<ul>\n<li>um reposit\u00f3rio Docker protegido por senha, acess\u00edvel por subdom\u00ednio <noindex><a rel=\"nofollow\" href=\"https:\/\/docker.helloworld.ru\">https:\/\/docker.helloworld.ru<\/a><\/noindex>;<\/li>\n<li>uma interface de usu\u00e1rio para visualizar as imagens no reposit\u00f3rio, acess\u00edvel no endere\u00e7o <noindex><a rel=\"nofollow\" href=\"https:\/\/docker-ui.helloworld.ru\">https:\/\/docker-ui.helloworld.ru<\/a><\/noindex>.<\/li>\n<\/ul>\n<p>\nPara isso:<\/p>\n<ol>\n<li>Criaremos no Plesk dois subdom\u00ednios em nossa assinatura: docker.helloworld.ru e docker-ui.helloworld.ru, e configuraremos certificados Let\u2019s Encrypt para eles.<\/li>\n<li>Na pasta do subdom\u00ednio docker.helloworld.ru, adicionaremos o arquivo <code>docker-compose.yml<\/code> com o seguinte conte\u00fado:\n<pre><code class=\"plaintext\">version: \"3\"\n\nservices:\n  docker-registry:\n    image: \"registry:2\"\n    restart: always\n    ports:\n      - \"53985:5000\"\n    environment:\n      REGISTRY_AUTH: htpasswd\n      REGISTRY_AUTH_HTPASSWD_REALM: basic-realm\n      REGISTRY_AUTH_HTPASSWD_PATH: \/auth\/.htpasswd\n      REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY: \/data\n    volumes:\n      - .\/.docker-registry.htpasswd:\/auth\/.htpasswd\n      - .\/data:\/data\n\n  docker-registry-ui:\n    image: konradkleine\/docker-registry-frontend:v2\n    restart: always\n    ports:\n      - \"53986:80\"\n    environment:\n      VIRTUAL_HOST: '*, https:\/\/*'\n      ENV_DOCKER_REGISTRY_HOST: 'docker-registry'\n      ENV_DOCKER_REGISTRY_PORT: 5000\n    links:\n      - 'docker-registry'\n<\/code><\/pre>\n<p>\n<\/li>\n<li>Via SSH, geraremos o arquivo .htpasswd para a autentica\u00e7\u00e3o b\u00e1sica no reposit\u00f3rio Docker:\n<pre><code class=\"plaintext\">htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password<\/code><\/pre>\n<\/li>\n<li>Vamos construir e subir os cont\u00eaineres:\n<pre><code class=\"plaintext\">docker-compose up -d<\/code><\/pre>\n<\/li>\n<li>E precisamos redirecionar o Nginx para os nossos cont\u00eaineres. Isso pode ser feito atrav\u00e9s do Plesk. <\/li>\n<\/ol>\n<p>\nAs pr\u00f3ximas a\u00e7\u00f5es devem ser realizadas para os subdom\u00ednios docker.helloworld.ru e docker-ui.helloworld.ru:<\/p>\n<p>Na se\u00e7\u00e3o <i>Dev Tools<\/i> Acesse nosso site e v\u00e1 para <i>Regras de Proxy do Docker<\/i>:<\/p>\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/d9c05901d95d61ce5db27a1a7cfddf49.png\" style=\"display:block;margin: 0 auto;\" \/><br \/>\nE adicione uma regra para fazer proxy do tr\u00e1fego de entrada para nosso cont\u00eainer:<\/p>\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/faa85cf6da648ef55b7c87c44040efb1.png\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<ol>\n<li>Verifique se conseguimos nos autenticar em nosso cont\u00eainer a partir da m\u00e1quina local:\n<pre><code class=\"plaintext\">$ docker login docker.helloworld.ru -u hw_docker_admin -p hw_docker_password\nWARNING! Using --password via the CLI is insecure. Use --password-stdin.\nLogin Succeeded<\/code><\/pre>\n<\/li>\n<li>Tamb\u00e9m verificaremos o funcionamento do subdom\u00ednio docker-ui.helloworld.ru:\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/fdd6e1396c27c02a88bcbd7efb12f247.png\" style=\"display:block;margin: 0 auto;\" \/><br \/>\nAo clicar em Navegar reposit\u00f3rios, o navegador exibir\u00e1 uma janela de autentica\u00e7\u00e3o onde voc\u00ea precisar\u00e1 inserir seu nome de usu\u00e1rio e senha para o reposit\u00f3rio. Ap\u00f3s isso, seremos redirecionados para a p\u00e1gina com a lista de reposit\u00f3rios (que estar\u00e1 vazia por enquanto):<\/p>\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/f2d75edb530e9d746095ae02d7793c1f.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<\/ol>\n<p><\/p>\n<h2>Abrindo portas no Plesk Firewall<\/h2>\n<p>\nAp\u00f3s a instala\u00e7\u00e3o e configura\u00e7\u00e3o dos componentes, precisamos abrir portas para que os componentes sejam acess\u00edveis a partir de containers Docker e da rede externa.<\/p>\n<p>Vamos ver como fazer isso usando como exemplo a extens\u00e3o Firewall que instalamos anteriormente para Plesk.<\/p>\n<ol>\n<li>Vamos para <i>Ferramentas &amp; Configura\u00e7\u00f5es &gt; Configura\u00e7\u00f5es &gt; Firewall<\/i>:<br \/>\n<img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/d54b4941944fe191574472a475cbaebe.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<li>Vamos para <i>Modificar Regras do Plesk Firewall &gt; Adicionar Regra Personalizada<\/i> e abrir as seguintes portas TCP para a subnet Docker (<strong>172.0.0.0\/8)<\/strong>:<br \/>\nRabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614<br \/>\nRedis: 32785, 32786<\/p>\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/3359845f9bd6dc303274da737d4b27a2.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<li>Tamb\u00e9m adicionaremos uma regra que abrir\u00e1 para o mundo externo as portas do PostgreSQL e do painel de gerenciamento do RabbitMQ:\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/f812cfc7127da469507538ea48b2c80d.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<li>Aplicamos as regras pressionando o bot\u00e3o Aplicar Altera\u00e7\u00f5es:\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/e85444ae717aaefa796664003fc86578.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<\/ol>\n<p><\/p>\n<h1>Configura\u00e7\u00e3o de CI\/CD no Github Actions<\/h1>\n<p>\nVamos para a parte mais interessante - configurar o pipeline de integra\u00e7\u00e3o cont\u00ednua e entrega do nosso projeto para o servidor.<\/p>\n<p>Este pipeline consistir\u00e1 em duas partes: <\/p>\n<ul>\n<li>compila\u00e7\u00e3o da imagem e execu\u00e7\u00e3o de testes (para o backend) - do lado do Github;<\/li>\n<li>execu\u00e7\u00e3o das migra\u00e7\u00f5es (para o backend) e implanta\u00e7\u00e3o dos containers - no servidor.<\/li>\n<\/ul>\n<p><\/p>\n<h2>Implanta\u00e7\u00e3o no Plesk<\/h2>\n<p>\nVamos primeiro entender o segundo ponto (j\u00e1 que depende do primeiro).<\/p>\n<p>O processo de implanta\u00e7\u00e3o ser\u00e1 configurado usando a extens\u00e3o Git para Plesk.<\/p>\n<p>Vamos considerar um exemplo com o ambiente de Produ\u00e7\u00e3o para o reposit\u00f3rio Backend.<\/p>\n<ol>\n<li>Acesse a assinatura do nosso site Helloworld e v\u00e1 para a se\u00e7\u00e3o Git:\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/b55b371560ea87a2954b6553a7cefc49.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<li>Cole no campo \"Reposit\u00f3rio Git remoto\" o link para nosso reposit\u00f3rio no Github e altere a pasta padr\u00e3o <code>httpdocs<\/code> para outra (por exemplo, <code>\/httpdocs\/hw_back<\/code>):\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/db9ba9adb6e2e1bed5da7ae8e88c76e1.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<li>Copie a chave p\u00fablica SSH da etapa anterior e <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/settings\/ssh\/new\">adicionamos<\/a><\/noindex> ela nas configura\u00e7\u00f5es do Github.<\/li>\n<li>Clique em OK na tela na etapa 2, ap\u00f3s a qual seremos redirecionados para a p\u00e1gina do reposit\u00f3rio no Plesk. Agora precisamos configurar a atualiza\u00e7\u00e3o do reposit\u00f3rio ao realizar commits na branch master. Para isso, vamos para <i>Configura\u00e7\u00f5es do Reposit\u00f3rio<\/i> e salvamos o valor <code>Webhook URL<\/code> (ele ser\u00e1 necess\u00e1rio mais tarde na configura\u00e7\u00e3o do Github Actions):\n<p><img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/14d48a357f821d734d40dc434ab3682a.png\" style=\"display:block;margin: 0 auto;\" \/><\/li>\n<li>No campo A\u00e7\u00f5es na tela da etapa anterior, inserimos o script para acionar a implanta\u00e7\u00e3o:\n<pre><code class=\"plaintext\">cd {REPOSITORY_ABSOLUTE_PATH}\n.ci-cd\/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} <\/code><\/pre>\n<p>\nonde: <\/p>\n<p><code>{REPOSITORY_ABSOLUTE_PATH}<\/code> \u2014 caminho para a pasta do reposit\u00f3rio backend em prod no servidor;<br \/>\n<code>{ENV}<\/code> \u2014 ambiente (dev\/prod), no nosso caso <code>prod<\/code>;<br \/>\n<code>{DOCKER_REGISTRY_HOST}<\/code> \u2014 host do nosso reposit\u00f3rio Docker<br \/>\n<code>{TG_BOT_TOKEN}<\/code> \u2014 token do bot do Telegram;<br \/>\n<code>{TG_CHAT_ID}<\/code> \u2014 ID do chat\/canal para enviar notifica\u00e7\u00f5es.<\/p>\n<p>Exemplo de script:<\/p>\n<pre><code class=\"plaintext\">cd \/var\/www\/vhosts\/helloworld.ru\/httpdocs\/hw_back\/\n.ci-cd\/deploy.sh dev docker.helloworld.ru docker_user docker_password 12345678:AAbcdEfghCH1vGbCasdfSAs0K5PALDsaw -1001234567890<\/code><\/pre>\n<\/li>\n<li>Adicionamos o usu\u00e1rio da nossa assinatura ao grupo Docker (para que ele possa gerenciar os cont\u00eaineres):\n<pre><code class=\"plaintext\">sudo usermod -aG docker helloworld_admin<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>\nO ambiente de desenvolvimento para o reposit\u00f3rio backend e frontend \u00e9 configurado da mesma forma.<\/p>\n<h2>Pipeline de deployment no Github Actions<\/h2>\n<p>\nVamos configurar a primeira parte do nosso pipeline CI\/CD no Github Actions.<\/p>\n<h3>Backend<\/h3>\n<p>\nO pipeline \u00e9 descrito no <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/olegborzov\/helloworld_back\/blob\/master\/.github\/workflows\/deploy.yml\">arquivo deploy.yml<\/a><\/noindex>. <\/p>\n<p>Mas antes de analis\u00e1-lo, vamos preencher as vari\u00e1veis secretas necess\u00e1rias no Github. Para isso, acesse <i>Configura\u00e7\u00f5es -&gt; Segredos<\/i>:<\/p>\n<ul>\n<li><code>DOCKER_REGISTRY<\/code> \u2014 o host do nosso reposit\u00f3rio Docker (docker.helloworld.ru);<\/li>\n<li><code>DOCKER_LOGIN<\/code> \u2014 login para o reposit\u00f3rio Docker;<\/li>\n<li><code>DOCKER_PASSWORD<\/code> \u2014 senha correspondente;<\/li>\n<li><code>DEPLOY_HOST<\/code> \u2014 o host onde a interface do Plesk est\u00e1 dispon\u00edvel (exemplo: <noindex><a rel=\"nofollow\" href=\"https:\/\/helloworld.ru\">helloworld.ru<\/a><\/noindex>:8443 ou <noindex><a rel=\"nofollow\" href=\"http:\/\/123.4.56.78\">123.4.56.78<\/a><\/noindex>:8443);<\/li>\n<li><code>DEPLOY_BACK_PROD_TOKEN<\/code> \u2014 token para deployment no reposit\u00f3rio de produ\u00e7\u00e3o no servidor (obtivemos isso em Deployment no Plesk item 4);<\/li>\n<li><code>DEPLOY_BACK_DEV_TOKEN<\/code> \u2014 token para deployment no reposit\u00f3rio de desenvolvimento no servidor.<\/li>\n<\/ul>\n<p>\nO processo de deployment \u00e9 simples e consiste em tr\u00eas etapas principais: <\/p>\n<ul>\n<li>cria\u00e7\u00e3o e publica\u00e7\u00e3o da imagem em nosso reposit\u00f3rio;<\/li>\n<li>execu\u00e7\u00e3o de testes no cont\u00eainer com base na imagem rec\u00e9m-criada;<\/li>\n<li>deployment no ambiente correto dependendo do ramo (dev\/master).<\/li>\n<\/ul>\n<p><\/p>\n<h3>Frontend<\/h3>\n<p>\n<noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/olegborzov\/helloworld-front\/blob\/master\/.github\/workflows\/deploy.yml\">O arquivo deploy.yml para o reposit\u00f3rio frontend<\/a><\/noindex> n\u00e3o difere muito do do backend. Ele n\u00e3o cont\u00e9m a etapa de execu\u00e7\u00e3o de testes e os nomes dos tokens para deployment mudam. Os segredos para o reposit\u00f3rio frontend, ali\u00e1s, precisam ser preenchidos separadamente.<\/p>\n<h1>Configura\u00e7\u00e3o do site<\/h1>\n<p><\/p>\n<h2>Proxy de tr\u00e1fego atrav\u00e9s do Nginx<\/h2>\n<p>\nBem, chegamos ao final. Agora s\u00f3 falta configurar o proxy do tr\u00e1fego de entrada e sa\u00edda em nosso cont\u00eainer atrav\u00e9s do Nginx. Esse processo j\u00e1 foi abordado na se\u00e7\u00e3o 5 da configura\u00e7\u00e3o do Docker Registry. O mesmo deve ser repetido para as partes backend e frontend nos ambientes dev e prod.<\/p>\n<p>Vou apresentar capturas de tela das configura\u00e7\u00f5es.<\/p>\n<h3>Backend<\/h3>\n<p>\n<img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/f3c38dc1c25b648db000c72ef2d30b2a.png\" style=\"display:block;margin: 0 auto;\" \/><\/p>\n<h3>Frontend<\/h3>\n<p>\n<img decoding=\"async\" alt=\"CI\/CD no Github Actions para um projeto em Flask+Angular\" src=\"\/wp-content\/uploads\/2020\/06\/35d4d8ef3489608db1e173b7f214ca03.png\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<strong>Uma observa\u00e7\u00e3o importante<\/strong>. No cont\u00eainer frontend, todos os URLs ser\u00e3o proxyados, exceto aqueles que come\u00e7am com <code>\/api\/<\/code> \u2014 eles ser\u00e3o proxyados para o cont\u00eainer backend (por isso <strong>no cont\u00eainer backend, todos os manipuladores devem come\u00e7ar com <\/strong><strong><code>\/api\/<\/code><\/strong>).<\/p>\n<h2>Resultados<\/h2>\n<p>\nAgora nosso site deve estar acess\u00edvel pelos endere\u00e7os helloworld.ru e dev.helloworld.ru (os ambientes prod e dev, respectivamente).<\/p>\n<p>Em resumo, aprendemos como preparar um aplicativo simples em Flask e Angular e configurar um pipeline no Github Actions para implant\u00e1-lo em um servidor gerenciado pelo Plesk.<\/p>\n<p>Reitero os links para os reposit\u00f3rios com o c\u00f3digo: <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/olegborzov\/helloworld_back\">backend<\/a><\/noindex>, <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/olegborzov\/helloworld-front\">frontend<\/a><\/noindex>.<br \/>\n<br \/>Fonte: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/company\/domclick\/blog\/506802\/\">habr.com<\/a> <\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 CI\/CD \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f Plesk \u0438 Github Actions. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0431\u0443\u0434\u0435\u043c \u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0434\u0435\u043f\u043b\u043e\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u0438\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043d\u0435\u0437\u0430\u043c\u044b\u0441\u043b\u043e\u0432\u0430\u0442\u044b\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u00abHelloworld\u00bb. \u041e\u043d \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Python-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 Flask, \u0441 \u0432\u043e\u0440\u043a\u0435\u0440\u0430\u043c\u0438 \u043d\u0430 Celery \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u043c \u043d\u0430 Angular 8. \u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438: \u0431\u044d\u043a\u0435\u043d\u0434, \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434. \u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":85647,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[688],"tags":[],"class_list":["post-85646","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-administrirovanie"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/pt\/blog\/administrirovanie\/ci-cd-v-github-actions-dlya-proekta-na-flask-angular\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"pt_PT\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47CI\/CD \u0432 Github Actions \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 Flask+Angular | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/pt\/blog\/administrirovanie\/ci-cd-v-github-actions-dlya-proekta-na-flask-angular\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2020-06-17T23:42:15+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-06-17T23:42:15+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47CI\/CD no Github Actions para um projeto em Flask+Angular | ProHoster","description":"Nesta artigo, compartilharei minha experi\u00eancia.","canonical_url":"https:\/\/prohoster.info\/pt\/blog\/administrirovanie\/ci-cd-v-github-actions-dlya-proekta-na-flask-angular","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"pt_PT","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47CI\/CD \u0432 Github Actions \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 Flask+Angular | ProHoster","og:description":"\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c.","og:url":"https:\/\/prohoster.info\/pt\/blog\/administrirovanie\/ci-cd-v-github-actions-dlya-proekta-na-flask-angular","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2020-06-17T23:42:15+00:00","article:modified_time":"2020-06-17T23:42:15+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"85646","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":null,"breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 13:12:50","updated":"2022-09-29 06:56:26","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/posts\/85646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/comments?post=85646"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/posts\/85646\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/media\/85647"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/media?parent=85646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/categories?post=85646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/pt\/wp-json\/wp\/v2\/tags?post=85646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}