🥇 Como usei o controle de versão de arquivo e o CloudFront em meu projeto paralelo mais recente: reme.io

O CloudFront é um ótimo serviço. Eu amo isso. Muitos sites e aplicativos o usam para servir conteúdo estático.

O único desafio que encontrei ao usar o CloudFront foi fazer com que ele sempre exibisse a versão mais recente dos meus arquivos.

Existem várias soluções para manter o CloudFront atualizado com as alterações feitas em seus arquivos.

I. Crie um pedido de invalidação

Basicamente, você informa ao CloudFront que alguns de seus arquivos estão desatualizados e devem ser atualizados. Este método está funcionando bem, mas quando você tem que fazer isso com frequência, torna-se um pé no saco. Definitivamente, não é o caminho a percorrer enquanto seu projeto está sob intenso desenvolvimento e você leva para a produção de novas versões de seus ativos diariamente.

II. Use nomes de objetos com versão

Isso significa que você inclui um identificador de versão em seus nomes de objeto.
Por exemplo:

É simples. Mas você definitivamente deseja automatizar esse processo para tornar sua vida mais fácil.

Aqui está como eu resolver este problema para o nosso mais recente projeto paralelo: reme.io .

No front-end eu uso o Grunt para concat + minificar meu javascript, compilar + limpar meu LESS e otimizar minhas imagens.

Todos os arquivos de saída irão para a pasta public_html / dist / # some_version_hash .

Em meu Gruntfile.js , defini uma opção distTarget com base em distVersion :

module.exports = function(grunt) {  
  grunt.option("distVersion", "1.0.0");
  grunt.option("distVersionHash", require("crypto").createHash("md5").update(grunt.option("distVersion")).digest("hex"));
 grunt.option("distTarget", "dist/" +    grunt.option("distVersionHash"));
 ...

E eu uso assim:

...
concat: {  
  dist: {
    src: [
      // List of JS files to concat
    ],
    dest: "<%= grunt.option('distTarget') + '/js/app.js' %>"
  }
},
uglify: { 
  dist: {
    files: {
     "<%= grunt.option('distTarget') + '/js/app.min.js' %>”: ['<%= concat.dist.dest %>']
    }
  }
}
...

Depois de executar o grunt build , terei meu arquivo javascript minificado em:
public_html / dist / 47cd76e43f74bbc2e1baaf194d07e1fa / js / app.min.js.

No back-end, faço algo muito semelhante. Na minha visão principal:

<?php
  $distVersion = '1.0.0';
  $distTarget = 'dist/' . hash("md5", $distVersion);
  $cloudFrontURL = 'http://d1mnizi6d3fc4n.cloudfront.net/';

  $cssURL = App::environment('production')
    ? $cloudFrontURL . $distTarget . '/css/app.min.css'
    : URL::asset('$distTarget . '/css/app.css');

  $jsURL = App::environment('production')
    ? $cloudFrontURL . $distTarget . '/js/app.min.js'
    : URL::asset('$distTarget . '/js/app.js');
?>
<!doctype html>
<html ng-app="app">
  <head>
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="{{$cssURL}}"/>
    <script src="{{$jsURL}}"></script>
    ...
  </head>
  <body>
  ...
  </body>
</html>

É isso aí. Agora, antes de enviar uma nova versão de meus arquivos estáticos para produção, simplesmente incremento o distVersion em meu Gruntfile.js e em minha visualização principal de PHP e estou pronto para prosseguir.

Se você tiver alguma dúvida ou ideia para melhorar este fluxo de trabalho, entre em contato ☺

Related Posts