2016-07-05 11 views
5

Der Versuch, eine serverseitige (universal, isomorph) gerenderte React-App einzurichten, die über CircleCI mit Heroku für die Node/Express-App und Cloudfront als CDN bereitgestellt wird.Universal-Rendering mit einem CDN und Heroku

Ich habe einige Probleme, wie dies funktioniert. Der Fluss scheint ziemlich geradlinig zu sein, abgesehen von ein paar Teilen. Sobald wir unsere Build-Assets auf einem CDN wie CloudFront bereitstellen, wie verbinden wir sie mit unserer index.html-Datei, die auf Heroku basiert? (Diese Indexdatei wird erstellt und von der Heroku Node App als Basis für serverseitiges Rendering bereitgestellt). Aber ich möchte, dass es Links zu den CDN-Assets enthält, nicht zu den Heroku-Assets. (CircleCi startet das Webpack und auch Heroku, sobald es installiert ist)

Hat jemand schon einmal davon erfahren?

+0

hier einen Text ich für den universellen reagieren Apps verwenden, um CDN. Es entfaltet sich zu Heroku und kann Wolkenfront benutzen. Anstatt eine index.html-Datei zu verwenden, wird sie nach heroku deployt und der Server bedient die Komponente 'Html.jsx'. https://github.com/MadeInHaus/react-flux-gulp-starter –

+0

Wenn das Problem ist, wie man die Dateien anspricht, halten Sie die Versionen synchron und behandeln Sie die Bereitstellung, vielleicht meine [delivr] (https: // github. com/sholladay/delivr) Modul und verwandte build- * Module werden Ihnen helfen. Es setzt Ihren Code in vorhersehbarer, produktionsfertiger Weise auf S3 und dann würden Sie CloudFront als einfachen Caching-Proxy einrichten. –

+0

Hast du das herausgefunden? benutzen sie webpack? –

Antwort

0

Sie können etwas wie https://github.com/kossnocorp/assets-webpack-plugin verwenden, um eine .json-Datei zu erstellen, die das Verzeichnis/die Namen Ihrer erstellten und gehashten Webpack-Dateien enthält. Sie können dann diese .json-Datei verwenden, um zu bestimmen, wie Ihre Tags in Ihrem serverseitigen HTML-Code aussehen werden.

  1. Ihr Client Bundle mit webpack aufzubauen und eine .json Datei mit den Namen Ihrer gehasht Dateien
  2. bauen Sie Ihre Server-Seite Bündel zu erzeugen. liest sie die oben .json Datei und spritzt die richtigen Dateinamen in die Skript-Werte in ur html
  3. zu Heroku/Upload bereitstellen