Falando da parte frontal de um corte e queima, é certamente apertada com o tema de engenharia front-end. Com reagir / vue / angular, desenvolvimento ES6 +, Webpack, babel, datilografado e frente nó final tem sido gradualmente substituindo o último script desenvolvido CDN liderar o caminho, dando início a um projeto dessa grande onda. Graças ao desenvolvimento de engenharia e de código aberto bom comunidade ecológica, disponibilidade e eficiência das aplicações front-end foi muito melhorada.
Costumava ser a parte frontal de corte e queima, e que a implantação de aplicações front-end no passado é corte e queima. O que beneficiou do desenvolvimento da implementação de aplicações front-end, com a engenharia de front-end de um subproduto?
Esta é apenas uma parte e, mais importante razão é o aumento de DevOps.
A fim de compreender mais claramente a história do desenvolvimento da parte frontal da implantação, compreender a implantação de manutenção da paz fortuna front-end (ou, mais amplamente, desenvolvedor de negócios) divisão de responsabilidades, cada vez que a extremidade dianteira da implantação de mudanças, pode considerar duas perguntas
Cache, aplicações front-end com o cabeçalho de resposta http por quem? Graças ao desenvolvimento do projeto, pode obter o arquivo com o valor de hash do pacote pode fazer cache permanente
entre domínios, / api configuração de proxy Com quem? No front-end ambiente de desenvolvimento pode abrir um pequeno serviço, Webpack-dev-servidor permitir a configuração de domínio cruzado, o ambiente de produção e que
Estes dois problemas são problemas de front-end de alta frequência da entrevista, mas se o direito de falar mentiras nas mãos de front-end
tempo veio Reagir apenas desenvolvido este ano, desta vez foi usado reagir a desenvolver aplicações utilizando Webpack ao pacote. Mas a implantação de front-end é ainda cortar e queimar
Este artigo exige que você tenha um certo Estivador, DevOps e base de conhecimento de engenharia de front-end. Se não, esta série de artigos, e seção de Docker pessoal vai orientar o funcionamento e manutenção do servidor que ajuda.
Slash e queimar
uma máquina trampolim
um servidor de produção
a um script de implantação
front-end sintonizar sua Webpack, operação e manutenção feliz para enviar e-mail com a implantação de um script de implantação, sem pensar primeiro conjunto de modelo de back-end, o primeiro um front-end pode ser implementado de forma independente. Pense em sua própria para expandir ainda mais a placa de base, o front-end não pode ajudar, mas riu
operação e manutenção brilhando cabelo sobre o front-end da implantação do e-mail, uma e outra vez tomou o código, alterar a configuração, try_files escritas, com o proxy_pass.
Neste momento, a extremidade dianteira dos arquivos estáticos são hospedados por nginx, nginx perfil substancialmente longa como esta
servidor {
a ouvir 80;
server_name shanyue.tech;
LOCALIZAÇÃO / {
# Caminho não raiz evitar 404
try_files $ $ URI URI / index.html;
}
Para resolver cross-domain
localização / api {
proxy_pass http://api.shanyue.tech;
}
arquivo de configuração do cache permanente com um valor de hash
localização ~ * (?: css | js) $ {.
try_files $ uri = 404;
expira 1a;
add_header Cache-Control “público”;
}
~ ^ + ... + LOCALIZAÇÃO $ {.
Try_files $ uri = 404;
}
}
copiar o código, mas às vezes ... muitas vezes não correr até
a operação e manutenção reclamando da versão de nó scripts de implantação front-end do padrão não é bom, ambiente de teste front-end clamavam nenhum problema
neste momento custos de operação e manutenção exigiu um grande esforço de implantação, ou até mesmo implantar um ambiente de teste, mas também o front-end tem um monte de esforço sobre como implantar em operação e manutenção. Desta vez, devido ao medo de afetar o ambiente on-line, on-line tarde da noite, muitas vezes escolher, operação e manutenção de front-end e exausto
, mas sempre tão
Lu disse, sempre foi assim, seria contra ele.
Desta vez, independentemente da configuração ou configuração do cache de cross-domain, operação e manutenção são para gerenciar a operação e manutenção não entendem o front-end. Mas a configuração é fornecido na extremidade dianteira, enquanto o front-end não está familiarizado com nginx
uso construção janela de encaixe espelhando
a janela de encaixe introdução, em grande parte resolvido o script de implantação não pode executar este grande BUG. dockerfile Isso scripts de implantação, roteiro de implantação que é dockerfile. Isto é, em grande medida facilitou o atrito com a operação e manutenção de front-end, afinal, mais e mais confiável front-end, pelo menos o script de implantação não há nenhum problema (risos
desta vez, o front-end não está mais disponível recursos estáticos, mas a prestação de serviços, um serviço http
front-end escreveu dockerfile mais ou menos assim longo
do nó: alpino
Representante do ambiente de produção
produção ENV PROJECT_ENV
Muitos pacote será baseado nesta variável de ambiente, fazer um comportamento diferente
Além disso, o pacote também será feita em Webpack otimizado para esta variável de ambiente, mas criar-reagir app quando embalagem vai escrever este mortos variável de ambiente
ENV NODE_ENV produção
WORKDIR / code
ADD. / code
RUN npm instalar && construção run npm && npm instalar -g http-servidor
EXPOR 80
CMD http-servidor ./public -p 80
copiar o código sozinho tem dockerfile também não está a funcionar, o outro front-end começou a manter uma janela de encaixe-compose.yaml, operação e manutenção para executar comandos Docker-compor-se -d iniciar aplicações front-end. A extremidade dianteira dos primeiros a dockerfile gravação e estivador-compose.yaml, jogo em papel cada vez mais importante no processo de implantação. Pense em sua própria para expandir ainda mais a placa de base, o front-end não pode ajudar, mas riu
Version: "3"
Serviços:
shici:
Desenvolver :.
EXPOR:
- 80
copiar a operação nginx código e manutenção de um arquivo de configuração substancialmente alongada como este
servidor {
a ouvir 80;
server_name Shanyue .tech;
localização / {
proxy_pass http://static.shanyue.tech;
}
LOCALIZAÇÃO / API {
proxy_pass http://api.shanyue.tech;
}
}
copiar a operação de código e de manutenção, além do nginx configuração, mas também para executar um comando: até estivador-compor -d
esse tempo para refletir sobre duas perguntas acima de tudo artigo
Cache, devido à conversão de arquivos estáticos para o serviço, o controle de cache front-end entregue ao início (mas no espelho http-servidor não é adequado para fazer isso)
cross-domain, cross-domain configuração nginx ainda em operação e manutenção
A parte da frente pode fazer o que ele deve fazer no, isso é uma coisa muito feliz
, é claro, o front-end para melhorar dockerfile também é um lento processo de evolução, e que desta vez espelhamento qual é o problema?
Construção do espelho muito grande
para construir o espelho muito longo
Construção de otimização multi-estágio espelhamento
pelo meio realmente experimentaram muitos altos e baixos, em que o processo de como, se referem a meu outro artigo: Como usar a aplicação front-end janela de encaixe deploy.
Que é optimizado em dois aspectos principais do acima mencionado
Construído pelo volume espelho se torna 10M + 1G +
construída pelo tempo que o espelho se torna 5min + 1min (dependendo da complexidade do projeto, na maioria das vezes em tempo de compilação e tempo de upload recurso estático)
A partir do nó: alpino como construtor
Produção ENV PROJECT_ENV
produção ENV NODE_ENV
WORKDIR / code
ADD package.json / code
RUN npm instalar --production
ADICIONAR . /código
npm executar uploadCdn é fazer o upload de um recurso estático para um arquivo script em oss, oss futuro vai acelerar o uso de CDN
RUN npm prazo de construção && npm executar uploadCdn
Selecione a imagem base um volume menor de
Nginx o FROM: Alpine
copiar código --from = Builder / public / index.html código / public / o favicon.ico / usr / share / Nginx / HTML /
código COPY --from = Builder / public / static / usr / share / Nginx / html / static
copiar o código que como fazê-lo
Primeiro adicione package.json / código, e então depois npm instalar --production Adicionar todos os arquivos. Pleno uso de cache espelhado, reduzindo o tempo para construir
multi-estágio de construção, bastante reduzido o volume do espelho
Ele também pode ter algumas pequenas otimizações, como
Cache npm npm imagem base privada ou armazém, reduzindo o tempo npm instalar, reduzindo o tempo para construir
npm instalar --production instalado apenas pacotes necessários
Otimizado front-end assistir seu dockerfile, operação e manutenção também foi ruidosos há poucos dias o pensamento, dizendo que metade do espaço em disco são espelhados para a frente da conta, pensando em suas economias no espelho várias ordens de magnitude do volume de front-end, a empresa parece guardar um monte de servidor sobrecarga, pensando em sua própria fundação para expandir ainda mais o disco, e não posso deixar de sorrir e rir
este tempo para refletir sobre duas perguntas acima de tudo artigo
Cache, controle de cache pela extremidade da frente, disposto sobre o tampão oss, oss vai ser utilizado para acelerar o CDN. Desta vez por um scripts de cache de front-end de gravação para controlar
cross-domain, cross-domain configuração nginx ainda em operação e manutenção
CI / CD e gitlab
desta vez frente transbordando sentimento de realização, operação e manutenção do mesmo? Operação e manutenção da linha de terra ainda é uma e outra vez, repetindo as três ações repetidas vezes para implantar
Puxe o código de
janela de encaixe-compor-se -d
restart nginx
Operação e manutenção não pode pensar assim mais, então ele introduziu o CI: o gitlab repositório de código existente apoiar ci gitlab
CI, Integração Contínua, Integração Contínua
CD, Entrega Contínua, a entrega contínua
O que é importante não é o CI / CD é importante agora não seguir a linha de negócios de operação e manutenção é ido, não requer a implantação de ficar olhando para a frente. Estas são as coisas CI / CD, e é usado para a implantação automatizada. O acima mencionado três coisas ao CI / CD
.gitlab-ci.yml é gitlab os perfis CI, ele provavelmente se parece com esta longa
Deploy:
Stage: Implantar
apenas:
- Mestre
Script:
- Docker Compose-up --build -d
Tags:
- shell
copiar o CI código / CD não só é mais projeto de negócio implantar liberado, antes da entrega também melhorou substancialmente a qualidade do código de negócios, que pode ser usado para lint, teste, verificações de segurança pacote, e até mesmo características multi-multi-ambiente implantação, vou escrever esta parte da coisa em meu artigo futuro
eu prestação de um projeto de servidor shfshanyue / shici tinha sido previamente a janela de encaixe estivador-compor gitlab-ci maneira / / implantado em meu servidor, são olhar pode interessado em seu arquivo de configuração
shfshanyue / shici: Dockerfile
shfshanyue / shici: Doeker-compose.yml
shfshanyue / shici: gitlab-ci.yml
Se você tem um servidor pessoal, também sugiro que você faça as aplicações front-end e interfaces de back-end que suportam um serviço que eles estão interessados, e apoiando CI / CD implantá-lo em seu próprio servidor
e se você quiser combinar github fazer CI / CD , então você pode tentar github + github ação
Alternativamente, você pode tentar drone.ci, como implantar pode se referir ao meu artigo anterior: integração contínua na introdução do programa github e implantação de drones
implantação uso Kubernetes
com negócio em crescimento, espelhamento mais e mais, docker-compor sido menos capazes de lidar, Kubernetes fora sazonal. Em seguida, o servidor de Taiwan tornou-se um multi-estágio, vários servidores serão distribuídos questão
o surgimento de novas tecnologias, ao endereçar os problemas anteriores introduziria complexidade.
benefícios de implantação K8S são claras: exames de saúde, atualizações sem interrupção, expansão elástica, reversão rápida, limitações de recursos, e melhorar o monitoramento, etc.
Que novos problemas que encontramos é que?
Construção do servidor espelho, o servidor fornece serviços de contêiner, fazer servidor de integração contínua é o único!
A necessidade de um repositório de imagem proprietário, que é a operação e manutenção da coisa, abrigar em breve construir uma operação boa e manutenção, mas para a extremidade dianteira da implantação, a complexidade e aumentar a
dar uma olhada no processo anterior:
dockerfile configuração front-end e estivador-compor
a atração servidores do ambiente de produção CI corredor o código (pode ser visto como a operação e manutenção anterior), docker-compor-se -d iniciar o serviço. Reinicie nginx, fazer proxy reverso, serviços externos
Ex processo tem um problema: Criar o servidor espelho, o servidor fornece serviços de contêiner, fazer servidor de integração contínua é o único! Por isso a necessidade de um repositório de imagem proprietário, um acesso cluster pode K8S servidor de integração contínua
combinação K8S melhoria do processo após o procedimento é o seguinte
Front-end configuração dockerfile, construir um espelho, o espelho para empurrar armazém
operação e manutenção de arquivos de configuração do recurso de configuração do aplicativo front-end K8S, re-pull espelhamento kubectl aplicar -f, recursos Implantar
Perguntado a operação de front-end e manutenção, você não precisa ser expandido sob a sua placa de fundação, para escrever sobre a extremidade dianteira do arquivo de configuração de recursos K8S, e listou vários artigos
Use K8S implantar sua primeira aplicação: Pod, Implantação e Serviço
uso K8S configuração para o seu domínio de aplicação: o Ingress
uso K8S com https para o seu domínio
Após a extremidade traseira do front end olhou para mais de uma dúzia K8S perfil, sacudiu a cabeça e disse esquecer esquecer
este tempo, gitlab-ci.yaml quase longa como esta, perfil direitos por uma operação de pessoa e gestão da manutenção
Deploy:
Stage: Implantar
apenas:
- Mestre
Script:
- Docker Desenvolver harbor.shanyue.tech/fe/shanyue -t
- push harbor.shanyue.tech/fe/shanyue Docker
- kubectl Aplicar -f HTTPS: //k8s-config.default.svc.cluster.local /shanyue.yaml
Tags:
- shell
copiar o código neste momento a ponderar duas perguntas acima de tudo artigo
Cache, cache é controlado pela frente
cross-domain, cross-domain ainda operação e manutenção de controle, controle de ingresso no arquivo de configuração backend K8S recurso
Use implantação leme
, em seguida, a extremidade dianteira da operação e manutenção tem menos contato, exceto para a necessidade ocasional para um novo projeto a partir da operação e favor de manutenção do lado de fora
, mas não durou muito tempo, de repente, um dia, encontrou-se até mesmo um front-end variáveis de ambiente passou nenhuma lei! Então, muitas vezes modificar a operação de busca arquivo de configuração e manutenção, operação e manutenção também estão fartos
assim que tem ao leme, se explicá-lo em uma frase, então é um modelos de perfil de recursos com função K8S. Como o front-end, você só precisa preencher os parâmetros. conteúdos mais detalhada pode se referir ao meu artigo anterior, utilizando o leme K8S recursos Implantar
se usarmos BitNami / nginx como front-end como este tempo para escrever o arquivo de configuração pode Gráfico leme
Image:
Registro: harbor.shanyue.tech
Repository: Fe / Shanyue
Tag : 8a9ac0
ingresso:
habilitado: verdadeiros
exércitos:
- nome: shanyue.tech
caminho: /
TLS:
-
anfitriões:
- shanyue.tech
secretName: Shanyue-TLS
livenessProbe:
HttpGet:
caminho: /
porta: http
initialDelaySeconds: 30
timeoutSeconds: 5
FailureThreshold: 6
readinessProbe:
HttpGet:
caminho: /
porta: http
initialDelaySeconds: 5
timeoutSeconds: 3
periodSeconds 5
- shanyue.tech
Copie o código neste momento a ponderar duas perguntas acima de tudo artigo
Cache, o cache é controlado por uma extremidade dianteira
de vários domínios, e inter-controlado pela extremidade traseira, a extremidade traseira disposta na values.yaml ficheiro de configuração no Gráfico
Em seguida, o front-end para o dever da operação e manutenção do mesmo?
As necessidades de front-end para ser feito são:
Escrever dockerfile parte da frente do edifício, este é apenas um trabalho de uma só vez, mas com referência
para especificar parâmetros para uso na implantação de leme
Essa operação e manutenção de fazê-lo
Helm gráfico fornece uma interface para todos os itens utilizados, mesmo sem proporcionar, operação e manutenção preguiçoso se é relativa à utilização de BitNami / nginx ele. É um trabalho de uma só vez
fornece uma ferramenta baseada no leme, a proibição da autoridade de serviço excessiva, mesmo sem fornecer, operação e manutenção preguiçoso se ele é usado diretamente leme
O FEC pode se concentrar em seus negócios, operação e manutenção pode se concentrar em seu próprio nativo nuvem, nunca houve uma divisão tão clara das responsabilidades
unificada front-end plataforma de implementação
mais tarde que a natureza da operação e manutenção de aplicativo front-end é um monte de arquivos estáticos, mais simples, fácil de unidade tecnologia, para evitar a extremidade dianteira de cada um a qualidade da imagem irregular. Então, prepare uma operação unificada e manutenção imagem base nó, faça uma plataforma de implantação unificada front-end, e que esta plataforma pode fazê-lo
CI / CD: Quando você empurra ramo código específico para o armazém automaticamente implantar
http cabeçalhos: Você pode personalizar os recursos http cabeçalho, que pode ser feito cache de otimização
http redirecionamento / reescrita: Se um nginx, assim você pode configurar / api, cruz determinação domínio do problema
hostname: você pode definir o domínio
CDN: colocar seus recursos estáticos para empurrar CDN
HTTPS: preparar um certificado para você
pré-processar: SPA vinculativo, não pré-renderizados
Não mais necessidade de construir o espelho da frente, fazer upload de CDN, ele só precisa escrever um perfil sobre ele, mais ou menos como esta longa
Constituição:
Comando: npm RUN Desenvolver
dist: / dist
anfitriões:
- nome: shanyue.tech
caminho: /
cabeçalhos:
- Localização: / *
valores:- Cache-Control: max-age = 7200
- Localização: activos / *
valores:- Cache-Control: max-age = 31536000
redirecionamentos:
- a partir de: / API
para: https://api.shanyue.tech
Status: 200
Copiar Neste ponto, a frente só precisa escrever um arquivo de configuração, você pode configurar o cache, configurar o proxy, deve fazer tudo pertence a frente para fazer, e transporte Victoria também já não precisa se preocupar com o que a extremidade dianteira da implantação do
front-end escrito apenas olhou para o perfil dele, viu-lo da maneira ...
mas a maioria dos fabricantes só tem essa plataforma completa implantação front-end, se você estiver interessado nele, você pode sob tentativa netlify, você pode se referir ao meu artigo: uso netlify implantar seu front-end aplicativo
servidor e renderização implantar back-end
recurso estático na maioria dos aplicativos é essencialmente o front-end, eo resto é uma pequena parte da renderização do lado do servidor, composição do lado do servidor da natureza em um serviço de infra-estrutura, a sua implementação pode ser vista como o backend implantar
a implantação backend a situação é mais complexa, tal como
serviços de configuração, back-end necessitem de acesso a dados sensíveis, mas não pode colocar dados sensíveis sobre o repositório de código. Você pode manter o ambiente variáveis, cônsul ou K8S configMap nos
serviços de uplink e downlink, você precisa confiar em um banco de dados, serviço a montante
controle de acesso, restringir IP lista, preto e branco
Ratelimit
etc.
Vou compartilhar como implantar uma K8S de back-end em um artigo futuro
