Merge pull request #468 from ParabolInc/s3-production

Adding S3 to host static assets

.env.example

@@ -14,6 +14,14 @@ AUTH0_CLIENT_SECRET="BksPeQQrRkXhDrugzQDg5Nw-IInub9RkQ-pSWohUM9s6Oii4xoGVCrK2_Oc
 AUTH0_DOMAIN="parabol.auth0.com"
 AUTH0_MANAGEMENT_TOKEN="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJrRGZOTURJUXRxQ21lbVFGVHVoTjh6WVN4TlNFN3JjaSIsInNjb3BlcyI6eyJ1c2VycyI6eyJhY3Rpb25zIjpbInVwZGF0ZSJdfSwidXNlcnNfYXBwX21ldGFkYXRhIjp7ImFjdGlvbnMiOlsicmVhZCIsInVwZGF0ZSIsImRlbGV0ZSIsImNyZWF0ZSJdfX0sImlhdCI6MTQ3MTkxODAzNCwianRpIjoiMzdlOWFmYjRlMjEzOWYzMzNkMDkyNjY0NDBhMzk5MDEifQ.a6NANNe5IOzvFEomZm9OeeNpRfPjoMCUzA12PaK3zVg"
 
+# AWS S3
+AWS_ACCESS_KEY_ID="XXXXXXXXXXXXXXXXXXXX"
+AWS_REGION="us-west-2"
+AWS_S3_BUCKET="action-XXXXXXXX"
+AWS_SECRET_ACCESS_KEY="XXXXXXXXXXXXXXXXXXXXXXXX"
+
+CDN_URL="//s3-host.parabol.co"
+
 GRAPHQL_HOST=localhost:3000
 GRAPHQL_PROTOCOL=http
 

package.json

@@ -133,7 +133,8 @@
     "sinon": "^1.17.6",
     "socketcluster": "^5.0.11",
     "socketcluster-client": "^5.0.10",
-    "tinycolor2": "^1.4.1"
+    "tinycolor2": "^1.4.1",
+    "webpack-s3-plugin": "^0.9.0"
   },
   "ava": {
     "babel": "inherit",

src/client/webpackEntry.js

@@ -0,0 +1,10 @@
+/*
+ * Setup webpack runtime public path loading, used for configuring
+ * asset loading from our CDN:
+ */
+
+/* eslint-disable camelcase, no-undef */
+const getWebpackPublicPath = require('universal/utils/getWebpackPublicPath');
+__webpack_public_path__ = getWebpackPublicPath();
+module.exports = require('client/client.js');
+/* eslint-enable */

src/server/Html.js

@@ -5,7 +5,9 @@ import {RouterContext} from 'react-router';
 import {renderToString} from 'react-dom/server';
 import makeSegmentSnippet from '@segment/snippet';
 import {auth0} from 'universal/utils/clientOptions';
+import getWebpackPublicPath from 'universal/utils/getWebpackPublicPath';
 
+const webpackPublicPath = getWebpackPublicPath();
 const segKey = process.env.SEGMENT_WRITE_KEY;
 const segmentSnippet = segKey && makeSegmentSnippet.min({
   host: 'cdn.segment.com',
@@ -29,6 +31,7 @@ export default function Html({store, entries, StyleSheetServer, renderProps}) {
   const clientOptions = `
     window.__ACTION__ = {
       auth0: ${JSON.stringify(auth0)},
+      cdn: ${JSON.stringify(webpackPublicPath)},
       sentry: ${JSON.stringify(process.env.SENTRY_DSN_PUBLIC)}
     };
 `;
@@ -48,8 +51,8 @@ export default function Html({store, entries, StyleSheetServer, renderProps}) {
         <script dangerouslySetInnerHTML={{__html: clientOptions}}/>
         <div id="root" dangerouslySetInnerHTML={{__html: html}}></div>
         <script dangerouslySetInnerHTML={{__html: manifest.text}}/>
-        <script src={vendor.js}/>
-        <script src={app.js}/>
+        <script src={`${webpackPublicPath}${vendor.js}`}/>
+        <script src={`${webpackPublicPath}${app.js}`}/>
       </body>
     </html>
   );

src/server/webpackEntry.js

@@ -0,0 +1,10 @@
+/*
+ * Setup webpack runtime public path loading, used for configuring
+ * asset loading from our CDN:
+ */
+
+/* eslint-disable camelcase, no-undef */
+const getWebpackPublicPath = require('universal/utils/getWebpackPublicPath');
+__webpack_public_path__ = getWebpackPublicPath();
+module.exports = require('universal/routes/index.js');
+/* eslint-enable */

src/universal/utils/getWebpackPublicPath.js

@@ -0,0 +1,17 @@
+
+/* eslint-disable no-underscore-dangle */
+const DEFAULT_PUBLIC_PATH = '/static/';
+
+export default function getWebpackPublicPath() {
+  let publicPath = DEFAULT_PUBLIC_PATH;
+
+  if (typeof window !== 'undefined' && window.__ACTION__ && window.__ACTION__.cdn) {
+    // client-side:
+    publicPath = window.__ACTION__.cdn;
+  } else if (typeof process !== 'undefined' && process.env.CDN_URL) {
+    publicPath = process.env.CDN_URL;
+  }
+
+  return `${publicPath}${publicPath.endsWith('/') ? '' : '/'}`;
+}
+/* eslint-enable */

webpack/webpack.config.prod.js

@@ -2,6 +2,7 @@ import path from 'path';
 import webpack from 'webpack';
 import AssetsPlugin from 'manifest-assets-webpack-plugin';
 import WebpackShellPlugin from 'webpack-shell-plugin';
+import S3Plugin from 'webpack-s3-plugin';
 import {getDotenv} from '../src/universal/utils/dotenv';
 
 // Import .env and expand variables:
@@ -31,22 +32,34 @@ const deployPlugins = [];
 if (process.env.DEPLOY) {
   deployPlugins.push(new webpack.optimize.UglifyJsPlugin({compressor: {warnings: false}, comments: /(?:)/}));
   deployPlugins.push(new webpack.LoaderOptionsPlugin({comments: false}));
+  if (!process.env.CI) {
+    // do not deploy to S3 if running in continuous integration environment:
+    deployPlugins.push(new S3Plugin({
+      s3Options: {
+        accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+        secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+        region: process.env.AWS_REGION
+      },
+      s3UploadOptions: {
+        Bucket: process.env.AWS_S3_BUCKET
+      },
+    }));
+  }
 }
 
 export default {
   context: path.join(root, 'src'),
   entry: {
     app: [
       'babel-polyfill',
-      'client/client.js'
+      'client/webpackEntry.js'
     ],
     vendor
   },
   output: {
     filename: '[name]_[chunkhash].js',
     chunkFilename: '[name]_[chunkhash].js',
     path: path.join(root, 'build'),
-    publicPath: '/static/'
   },
   resolve: {
     extensions: ['.js'],
@@ -62,7 +75,11 @@ export default {
     }),
     new webpack.optimize.AggressiveMergingPlugin(),
     new webpack.optimize.MinChunkSizePlugin({minChunkSize: 50000}),
-    new AssetsPlugin({path: path.join(root, 'build'), filename: 'assets.json', includeManifest: true}),
+    new AssetsPlugin({
+      path: path.join(root, 'build'),
+      filename: 'assets.json',
+      includeManifest: true
+    }),
     new webpack.NoErrorsPlugin(),
     new webpack.DefinePlugin({
       __CLIENT__: true,

webpack/webpack.config.server.js

@@ -13,14 +13,13 @@ const prefetchPlugins = prefetches.map(specifier => new webpack.PrefetchPlugin(s
 
 export default {
   context: path.join(root, 'src'),
-  entry: {prerender: '../src/universal/routes/index.js'},
+  entry: {prerender: '../src/server/webpackEntry.js'},
   target: 'node',
   output: {
     path: path.join(root, 'build'),
     chunkFilename: '[name]_[chunkhash].js',
     filename: '[name].js',
     libraryTarget: 'commonjs2',
-    publicPath: '/static/'
   },
   // ignore anything that throws warnings & doesn't affect the view
   externals: [