Come raccogliere tutte le risorse statiche (js, css) utilizzate da Discourse

Supporto
1

Sto cercando di configurare una CDN per il mio forum. Dato che la Cina ha vietato Fastly e molti server CDN, non posso utilizzarli per velocizzare il mio forum. Dopo alcune ricerche, mi sono rivolto a Jsdelivr, che può servire file statici da npm o da repository GitHub.

So che posso utilizzare DISCOURSE_CDN_URL in app.yml per impostare l’URL. Ma prima di farlo, devo raccogliere tutti i file statici (js, CSS) dal mio forum e caricarli su GitHub in modo che Jsdelivr possa accedervi. Ho scoperto che i file statici si trovano effettivamente all’interno del container Docker:

/var/www/discourse/app/assets

Quindi sto pensando di copiare tutti i file da questo percorso ogni volta dopo aver ricompilato l’app e poi caricarli su GitHub; immagino che questa idea dovrebbe funzionare, ma la richiesta effettiva contiene un nome hash lungo che non so come ottenere. Ad esempio,

ember_jquery.js diventerà
ember_jquery-8ef4e572f0bf9485e6ef9a35f088729735f82434cf495fbcd5acedefbcddb363.js

La mia domanda è:

  1. Come generare il nome del file con hash?
  2. Esiste un altro modo per raccogliere gli asset statici?
2

È un hash SHA1 del contenuto del file. Viene generato qui:

Le versioni compilate che vengono utilizzate vengono inserite in /var/www/discourse/public/assets/.

Se aggiungi una sezione al tuo file app.yml, puoi eseguire un’azione dopo che il contenitore è stato ricostruito. Ad esempio, per caricare su S3 utilizziamo qualcosa di simile a:

hooks:
  after_assets_precompile:
    - exec:
        cd: $home
        cmd:
          - sudo -E -u discourse bundle exec rake s3:upload_assets

Nel tuo caso, sostituisci il task rake con i comandi che esegui per inviare gli asset compilati a GitHub quando il contenitore viene costruito.

3

Grazie @schleifer. La tua risposta è molto utile. Tuttavia, ho ancora alcune domande di approfondimento:

  1. Dove posso trovare la documentazione per gli hook come after_assets_precompile? Ho cercato sia nella documentazione Docker che nel repository GitHub di Discourse, ma non ho trovato alcuna informazione al riguardo. Devo impostare io stesso gli hook denominati after_assets_precompile (come si fa?) o sono già configurati da Discourse, come after_code?

  2. Se ho capito bene, il mio pseudocodice dovrebbe essere:

     hooks:
   after_assets_precompile:
     - exec:
         cd: $home
         cmd:
           - entrare nel container Docker
           - passare a `/var/www/discourse/public/assets/`
           - eseguire git add, commit e push sul repository Github

Grazie.

4

È una buona domanda, ma non ho una risposta soddisfacente per te.

Il sistema di configurazione utilizzato all’interno del container è:

Il README lì descrive come funzionano gli hook in generale. Gli hook specifici disponibili dipendono da come è configurata la tua istanza: il file principale app.yml include uno o più template. Nella maggior parte dei casi, uno di questi è web.template.yml:

È lì che viene definito l’hook assets_precompile (alla [riga 159] mentre scrivo). Secondo la documentazione di Pups, puoi eseguire altri comandi prima o dopo il completamento di questo utilizzando rispettivamente before_assets_precompile e after_assets_precompile.

I comandi vengono eseguiti all’interno del container Docker, quindi non devi fare nulla a tale proposito.

La direttiva cd: può puntare direttamente a /var/www/discourse/public/assets/ e ogni riga in cmd viene eseguita da quella directory. (Attenzione: ogni riga in un array cmd viene eseguita in una shell separata, come in un Makefile).

Non sono sicuro che il contenuto di /var/www/discourse/public/assets/ venga mantenuto tra le build, quindi potrebbe essere necessario creare il repository git locale ed eseguire un force push ogni volta. La soluzione “più corretta” potrebbe essere definire un volume Docker in app.yml per la directory degli asset su un volume Docker definito in app.yml come gli altri e mantenerlo persistente al di fuori del container.

5

Grazie mille. Ho anche notato che alcune risorse statiche (come i CSS) vengono salvate in /var/www/discourse/tmp/stylesheet-cache. Tuttavia, ci sono altri due problemi:

  1. Gli utenti caricano risorse come gli avatar, che vengono serviti tramite CDN dopo aver configurato DISCOURSE_CDN_URL. Tuttavia, inviare le risorse caricate su GitHub ogni volta che un utente ne carica una non sembra una soluzione ideale.
  2. Quando Discourse richiede un avatar utente come 2_2.png, esegue le seguenti operazioni: 1) suddivide il nome del file, 2) effettua alcuni controlli, 3) calcola il nome reale del file utilizzando un hash. Se devo servire gli avatar utente, devo implementare io stesso la stessa logica, poiché non esiste un file chiamato 2_2.png.

La mia soluzione finale è semplice. 1) Aggiungo Nginx davanti al mio forum, come descritto in questo post. 2) Raccolgo tutte le risorse statiche dal percorso sopra indicato e le invio su GitHub. 3) Nel file di configurazione di Nginx, aggiungo alcune regole come:

location ~/(stylesheets|assets) {
    return 301 https://cdn.jsdelivr.net/gh/my_github/my_repo/$request_uri;
}

Grazie ancora @schleifer