update .env.example and README, start to build out Docker development and prodiction setup

2018-06-07 13:09:51 -07:00 · 2018-06-07 13:09:51 -07:00 · 0857a52326
parent 2f84fe12a6
commit 0857a52326
7 changed files with 222 additions and 93 deletions
--- a/.env.example
+++ b/.env.example
@ -10,6 +10,13 @@ GITHUB_ID=<your-github-client-id>
 GITHUB_SECRET=<your-github-client-secret>
 GOOGLE_ID=<your-google-client-id> (use google+ api)
 GOOGLE_SECRET=<your-google-client-secret> (use google+ api)
+MAILGUN_DOMAIN=<your-mailgun-domain>
 MAILGUN_KEY=<your-mailgun-api-key>
-EXAMPLE_USER_EMAIL=<your-email-id>
-EXAMPLE_USER_PASSWORD=<your-password>
+EMAIL_SENDER=<transactional-email-sender>
+EMAIL_VERIFY_SECRET_TOKEN=whatever_you_want_this_to_be_it_only_matters_for_production
+S3_BUCKET_URL_BASE=<alt-for-s3-url>
+EXAMPLE_USER_EMAIL=examples@p5js.org
+EXAMPLE_USER_PASSWORD=hellop5js
+GG_EXAMPLES_USERNAME=generative-design
+GG_EXAMPLES_PASS=generativedesign
+GG_EXAMPLES_EMAIL=benedikt.gross@generative-gestaltung.de
--- a/31
+++ b/31
@ -0,0 +1,31 @@
+FROM node:8.11.1 as base
+ENV APP_HOME=/usr/src/app \
+  TERM=xterm
+RUN mkdir -p $APP_HOME
+WORKDIR $APP_HOME
+EXPOSE 8000
+
+FROM base as development
+ENV NODE_ENV development
+COPY package.json package-lock.json ./
+RUN npm install
+RUN npm rebuild node-sass
+COPY .babelrc index.js nodemon.json webpack.config.babel.js webpack.config.dev.js webpack.config.prod.js webpack.config.server.js ./
+COPY client ./client
+COPY server ./server
+CMD ["npm", "start"]
+
+FROM development as build
+ENV NODE_ENV production
+RUN npm run build
+
+FROM base as production
+ENV NODE_ENV=production
+COPY package.json package-lock.json ./
+RUN npm install --production
+RUN npm rebuild node-sass
+RUN npm install pm2 -g
+COPY index.js ./
+COPY ecosystem.json ./
+COPY --from=build /usr/src/app/dist ./dist
+CMD ["pm2-runtime", "ecosystem.json"]
--- a/README.md
+++ b/README.md
@ -10,33 +10,13 @@ This project is currently in development! It will be announced when there is a (
 4. Install MongoDB and make sure it is running
   * For Mac OSX with [homebrew](http://brew.sh/): `brew install mongodb` then `brew services start mongodb`
   * For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/)
-5. Create a file called `.env` in the root of this directory that looks like
-
-  ```
-  API_URL=/api
-  MONGO_URL=mongodb://localhost:27017/p5js-web-editor
-  PORT=8000
-  SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
-  AWS_ACCESS_KEY=<your-aws-access-key>
-  AWS_SECRET_KEY=<your-aws-secret-key>
-  AWS_REGION=<your-aws-region>
-  S3_BUCKET=<your-s3-bucket>
-  GITHUB_ID=<your-github-client-id>
-  GITHUB_SECRET=<your-github-client-secret>
-  GOOGLE_ID=<your-google-client-id> (use google+ api)
-  GOOGLE_SECRET=<your-google-client-secret> (use google+ api)
-  MAILGUN_KEY=<your-mailgun-api-key>
-  EXAMPLE_USER_EMAIL=<email-id-for-p5-example-user>
-  EXAMPLE_USER_PASSWORD=<password-for-p5-example-user>
-  ```
-
-   If you don't care about being able to upload media files to S3 or Login with Github or Google, you can drop in the file exactly how it is. Or, if you don't want to do that, just ask me to send you mine. Refer to [this gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) for creating an S3 bucket for testing, or if you don't want to do that, I can add you to one of my S3 buckets.
-
-6. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5'
-7. `$ npm start`
-8. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
-9. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en).
-10. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`
+5. `$ cp .env.example .env`
+6. (Optional) Update `.env` with necessary keys to enable certain app behavoirs, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
+7. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5'
+8. `$ npm start`
+9. Navigate to [http://localhost:8000](http://localhost:8000) in your browser
+10. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
+11. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w`

 ### Testing SSL on your local machine
 Please refer to [this gist](https://gist.github.com/andrewn/953ffd5cb17ac2634dc969fc7bdaff3f). This allows you to access the editor using both HTTP and HTTPS. Don't worry about this unless you need to make changes or test HTTPS behavior.
@ -73,51 +53,32 @@ If you don't have the full server environment running, you can launch a one-off
 1. Clone this repository and `cd` into it
 2. `$ npm install`
 3. Install MongoDB and make sure it is running
-4. Create a file called `.env` in the root of this directory that looks like
-
-  ```
-  API_URL=/api
-  MONGO_URL=mongodb://localhost:27017/p5js-web-editor
-  PORT=8000
-  SESSION_SECRET=make_this_a_long-random_string_like_maybe_126_characters_long
-  AWS_ACCESS_KEY=<your-aws-access-key>
-  AWS_SECRET_KEY=<your-aws-secret-key>
-  AWS_REGION=<your-aws-region>
-  S3_BUCKET=<your-s3-bucket>
-  GITHUB_ID=<your-github-client-id>
-  GITHUB_SECRET=<your-github-client-secret>
-  GOOGLE_ID=<your-google-client-id> (use google+ api)
-  GOOGLE_SECRET=<your-google-client-secret> (use google+ api)
-  EMAIL_SENDER=<email-address-to-send-from>
-  MAILGUN_KEY=<mailgun-api-key>
-  MAILGUN_DOMAIN=<mailgun-domain>
-  EMAIL_VERIFY_SECRET_TOKEN=whatever_you_want_this_to_be_it_only_matters_for_production
-  EXAMPLE_USER_EMAIL=<email-id-for-p5-example-user>
-  EXAMPLE_USER_PASSWORD=<password-for-p5-example-user>
-  ```
-  For production, you will need to have real Github and Amazon credentials. Refer to [this gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) for creating an S3 bucket for testing.
-
-5. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5'
-6. `$ npm run build`
-7. `$ npm run start:prod`
+4. `$ cp .env.example .env`
+5. (NOT Optional) edit `.env` and fill in all necessart values.
+6. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5'
+7. `$ npm run build`
+8. `$ npm run start:prod`

 ### For Production Setup with PM2
 1. `$ npm install -g pm2`
 2. `$ pm2 start ecosystem.json`

-## Optional S3 bucket URL base configuration
+## S3 Bucket Configuration
+
+Please refer to the folllowing [gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) to set up an S3 bucket to be used with this project.
+

 If your S3 bucket is in the US East (N Virginia) region (us-east-1), you'll
 need to set a custom URL base for it, because it does not follow the standard
 naming pattern as the rest of the regions. Instead, add the following to your
 environment/.env file:

-```S3_BUCKET_URL_BASE=https://s3.amazonaws.com```
+`S3_BUCKET_URL_BASE=https://s3.amazonaws.com`

 If you've configured your S3 bucket and DNS records to use a custom domain
 name, you can also set it using this variable. I.e.:

-```S3_BUCKET_URL_BASE=https://files.mydomain.com```
+`S3_BUCKET_URL_BASE=https://files.mydomain.com`

 For more information on using a custom domain, see this documentation link:

--- a/docker-compose-development.yml
+++ b/docker-compose-development.yml
@ -1,12 +1,14 @@
-version: '3'
+version: '3.4'
 services:
  mongo:
    image: mongo:3.4.7
+    volumes:
+      - dbdata:/data/db
  server:
    build:
-      context: .
-      dockerfile: Dockerfile-development
-    command: npm start
+      context: ./
+      dockerfile: Dockerfile
+      target: development
    environment:
      - API_URL=/api
      - MONGO_URL=mongodb://mongo:27017/p5js-web-editor
@ -20,9 +22,11 @@ services:
      - GITHUB_SECRET=override_in_dotenv
      - MAILGUN_KEY=override_in_dotenv
    volumes:
-      - .:/opt/node/app
-      - /opt/node/app/node_modules
+      - .:/usr/src/app
+      - /usr/src/app/node_modules
    ports:
      - '8000:8000'
    depends_on:
      - mongo
+volumes:
+  dbdata:
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,7 +1,9 @@
-version: '3'
+version: '3.4'
 services:
  mongo:
    image: mongo:3.4.7
+    volumes:
+      - dbdata:/data/db
    expose:
      - "27017"
  nginx:
@ -9,8 +11,8 @@ services:
  server:
    build:
      context: .
-      dockerfile: Dockerfile-development
-    command: npm start
+      dockerfile: Dockerfile
+      target: production
    environment:
      - API_URL=/api
      - MONGO_URL=mongodb://mongo:27017/p5js-web-editor
@ -30,3 +32,5 @@ services:
      - '8000:8000'
    depends_on:
      - mongo
+volumes:
+  dbdata:
--- a/nginx/alpha.editor.p5js.org.conf
+++ b/nginx/alpha.editor.p5js.org.conf
@ -25,21 +25,21 @@

 }

-server {
-    listen 443;
-    ssl on;
-    ssl_certificate /etc/letsencrypt/live/alpha.editor.p5js.org/fullchain.pem;
-    ssl_certificate_key /etc/letsencrypt/live/alpha.editor.p5js.org/privkey.pem;
-    server_name alpha.editor.p5js.org;
-    location / {
-        proxy_pass http://127.0.0.1:8000;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection 'upgrade';
-        proxy_set_header Host $host;
-        proxy_cache_bypass $http_upgrade;
-    }
-}
+# server {
+#     listen 443;
+#     ssl on;
+#     ssl_certificate /etc/letsencrypt/live/alpha.editor.p5js.org/fullchain.pem;
+#     ssl_certificate_key /etc/letsencrypt/live/alpha.editor.p5js.org/privkey.pem;
+#     server_name alpha.editor.p5js.org;
+#     location / {
+#         proxy_pass http://127.0.0.1:8000;
+#         proxy_http_version 1.1;
+#         proxy_set_header Upgrade $http_upgrade;
+#         proxy_set_header Connection 'upgrade';
+#         proxy_set_header Host $host;
+#         proxy_cache_bypass $http_upgrade;
+#     }
+# }

 server {
    listen 80;
@ -49,13 +49,13 @@ server {
    }
 }

-server {
-    listen 443;
-    ssl on;
-    ssl_certificate /etc/letsencrypt/live/editor.p5js.org/fullchain.pem;
-    ssl_certificate_key /etc/letsencrypt/live/editor.p5js.org/privkey.pem;
-    server_name editor.p5js.org;
-    location ~ ^/(.*) {
-        return 302 https://alpha.editor.p5js.org/$1;
-    }
-}
+# server {
+#     listen 443;
+#     ssl on;
+#     ssl_certificate /etc/letsencrypt/live/editor.p5js.org/fullchain.pem;
+#     ssl_certificate_key /etc/letsencrypt/live/editor.p5js.org/privkey.pem;
+#     server_name editor.p5js.org;
+#     location ~ ^/(.*) {
+#         return 302 https://alpha.editor.p5js.org/$1;
+#     }
+# }
--- a/nginx/nginx.conf
+++ b/nginx/nginx.conf
@ -0,0 +1,122 @@
+# For more information on configuration, see:
+#   * Official English Documentation: http://nginx.org/en/docs/
+#   * Official Russian Documentation: http://nginx.org/ru/docs/
+
+user nginx;
+worker_processes auto;
+error_log /var/log/nginx/error.log;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile            on;
+    tcp_nopush          on;
+    tcp_nodelay         on;
+    keepalive_timeout   65;
+    types_hash_max_size 2048;
+
+    include             /etc/nginx/mime.types;
+    default_type        application/octet-stream;
+
+    # Load modular configuration files from the /etc/nginx/conf.d directory.
+    # See http://nginx.org/en/docs/ngx_core_module.html#include
+    # for more information.
+    include /etc/nginx/conf.d/*.conf;
+
+    include /etc/nginx/sites-enabled/*.conf;
+
+    index   index.html index.htm;
+
+    server {
+        listen       80 default_server;
+        listen       [::]:80 default_server;
+        server_name  localhost;
+        root         /usr/share/nginx/html;
+
+        # Load configuration files for the default server block.
+        include /etc/nginx/default.d/*.conf;
+
+        location / {
+        }
+
+        # redirect server error pages to the static page /40x.html
+        #
+        error_page 404 /404.html;
+            location = /40x.html {
+        }
+
+        # redirect server error pages to the static page /50x.html
+        #
+        error_page 500 502 503 504 /50x.html;
+            location = /50x.html {
+        }
+
+        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
+        #
+        #location ~ \.php$ {
+        #    proxy_pass   http://127.0.0.1;
+        #}
+
+        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
+        #
+        #location ~ \.php$ {
+        #    root           html;
+        #    fastcgi_pass   127.0.0.1:9000;
+        #    fastcgi_index  index.php;
+        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
+        #    include        fastcgi_params;
+        #}
+
+        # deny access to .htaccess files, if Apache's document root
+        # concurs with nginx's one
+        #
+        #location ~ /\.ht {
+        #    deny  all;
+        #}
+    }
+
+
+# Settings for a TLS enabled server.
+#
+#    server {
+#        listen       443 ssl;
+#        listen       [::]:443 ssl;
+#        server_name  localhost;
+#        root         /usr/share/nginx/html;
+#
+#        ssl_certificate "/etc/pki/nginx/server.crt";
+#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
+#        # It is *strongly* recommended to generate unique DH parameters
+#        # Generate them with: openssl dhparam -out /etc/pki/nginx/dhparams.pem 2048
+#        #ssl_dhparam "/etc/pki/nginx/dhparams.pem";
+#        ssl_session_cache shared:SSL:1m;
+#        ssl_session_timeout  10m;
+#        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
+#        ssl_ciphers HIGH:SEED:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!RSAPSK:!aDH:!aECDH:!EDH-DSS-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA:!SRP;
+#        ssl_prefer_server_ciphers on;
+#
+#        # Load configuration files for the default server block.
+#        include /etc/nginx/default.d/*.conf;
+#
+#        location / {
+#        }
+#
+#        error_page 404 /404.html;
+#            location = /40x.html {
+#        }
+#
+#        error_page 500 502 503 504 /50x.html;
+#            location = /50x.html {
+#        }
+#    }
+
+}