diff --git a/.env.example b/.env.example index ee948df6..3bfd7e50 100644 --- a/.env.example +++ b/.env.example @@ -10,6 +10,13 @@ GITHUB_ID= GITHUB_SECRET= GOOGLE_ID= (use google+ api) GOOGLE_SECRET= (use google+ api) +MAILGUN_DOMAIN= MAILGUN_KEY= -EXAMPLE_USER_EMAIL= -EXAMPLE_USER_PASSWORD= \ No newline at end of file +EMAIL_SENDER= +EMAIL_VERIFY_SECRET_TOKEN=whatever_you_want_this_to_be_it_only_matters_for_production +S3_BUCKET_URL_BASE= +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 diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 00000000..788b9be1 --- /dev/null +++ b/Dockerfile @@ -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"] diff --git a/README.md b/README.md index ca6f472b..9ab0fcc1 100644 --- 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= - AWS_SECRET_KEY= - AWS_REGION= - S3_BUCKET= - GITHUB_ID= - GITHUB_SECRET= - GOOGLE_ID= (use google+ api) - GOOGLE_SECRET= (use google+ api) - MAILGUN_KEY= - EXAMPLE_USER_EMAIL= - EXAMPLE_USER_PASSWORD= - ``` - - 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= - AWS_SECRET_KEY= - AWS_REGION= - S3_BUCKET= - GITHUB_ID= - GITHUB_SECRET= - GOOGLE_ID= (use google+ api) - GOOGLE_SECRET= (use google+ api) - EMAIL_SENDER= - MAILGUN_KEY= - MAILGUN_DOMAIN= - EMAIL_VERIFY_SECRET_TOKEN=whatever_you_want_this_to_be_it_only_matters_for_production - EXAMPLE_USER_EMAIL= - EXAMPLE_USER_PASSWORD= - ``` - 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: diff --git a/docker-compose-development.yml b/docker-compose-development.yml index 33d98f76..c0fbfdb6 100644 --- 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: diff --git a/docker-compose.yml b/docker-compose.yml index a5d58f68..306c0694 100644 --- 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: diff --git a/nginx/alpha.editor.p5js.org.conf b/nginx/alpha.editor.p5js.org.conf index ec704743..f89e51bd 100644 --- 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; - } -} \ No newline at end of file +# 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; +# } +# } \ No newline at end of file diff --git a/nginx/nginx.conf b/nginx/nginx.conf index e69de29b..b0ab9feb 100644 --- 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 { +# } +# } + +} \ No newline at end of file