Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

D-Zone & Heroku #55

Closed
HottonJoris opened this issue Apr 11, 2018 · 49 comments
Closed

D-Zone & Heroku #55

HottonJoris opened this issue Apr 11, 2018 · 49 comments

Comments

@HottonJoris
Copy link

Hi,

First, thank you for your awesome work !

Second, is it possible to host d-zone server on Heroku ? I tried but it seems that client can't connect to servers websockets.

@vegeta897
Copy link
Member

Thank you for the compliment, I'm super happy that people enjoy this project.

I have never seen a working Heroku deployment of server-side D-Zone. I don't have personal experience with it so I can't offer a detailed explanation. Sorry!

I'll leave this open in case anyone who has managed to get it to work wants to share their advice.

@HottonJoris
Copy link
Author

I try to merge UI & Server part (universal app) to avoid external websocket issue with Heroku.
Hope it'll suceed !

@Macleykun
Copy link

Can you try going to the webadress of the app, but use http. Rather then https? I actully waited trying this myself due to the https thingie.

@HottonJoris
Copy link
Author

Already try, the app only work in http (https = "insecure operation" error), i'm stuck on 'Connecting..' and got a timeout error for the ws connection

@HottonJoris
Copy link
Author

I find a way to make it work with Heroku:

  1. Create an express server into index.js and serve index.html file
  2. Replace Websock with Socket.IO

Now the app is Universal !

Once it will be finished, i'll make it available for everyone, maybe on a new branch or another repo, like a fork.. IDK ? @vegeta897

@Macleykun
Copy link

Wow you did that fast!

Just a little idea: due to Heroku restarting every 24 hours (give or take). We can do the following smart trick:

a thought
Run the .sh file to update the server list, on (re)boot. Then users don't have to update it locally, and then re-push the bot.

@HottonJoris
Copy link
Author

HottonJoris commented Apr 11, 2018

You can find a working version here : https://world-of-nep.herokuapp.com/?s=default (Discord server is one of mine (FR) )

I didn't implemented "Presence" ATM, working on it.
Now I didn't need to set IP & PORT for socket, everything on the same host (Back & UI), NodeJS universal app

edit: Now it works with https ! :)

@Macleykun
Copy link

Damn that looks perfect!

I also found out that you can set a custom domain too (world-of-nep.herokuapp.com could be world-of-nep.com)

This is also possible for a free tier it seems.
https://devcenter.heroku.com/articles/custom-domains
https://stackoverflow.com/questions/7170664/how-to-configure-heroku-application-dns-to-godaddy-domain

Only now left is to set a .com/dzone/ (that's what i prefer, but that's ma own issue :P)

@HottonJoris
Copy link
Author

HottonJoris commented Apr 11, 2018

With express it's possible, you define that you get the index.html only when user is on /dzone for example

I need to discuss with @vegeta897 to determine if I make a new branch or a fork. You will see how it works

@vegeta897
Copy link
Member

This is very impressive, great work.

Your working link is stuck on connecting for me though.

I'd be happy to have it as a branch, but a fork would be OK too. I'm not sure which is more appropriate since I wouldn't be maintaining it as someone who doesn't use Heroku.

I would definitely like to have a tutorial page on the wiki for how to set it up too, if you're interested in writing that.

@HottonJoris
Copy link
Author

Sometimes I need to restart Heroku server, IDK why (people got stuck on connecting like you)

Why not make a tutorial, I edited all the websockets part of your code (between main.js and index.js)

ATM i'm trying to make a Theme selector, because I really want to get boat actors and sea tiles ! (thx sea of thieves!)

I'll make a fork repo with my code and write a tutorial if people want to 'migrate' to the 'heroku' version

@vegeta897
Copy link
Member

Cool, looking forward to seeing your work!

@HottonJoris
Copy link
Author

HottonJoris commented Apr 11, 2018

Server available https://world-of-nep.herokuapp.com/?s=default (it's working atm)

@HottonJoris
Copy link
Author

I'd finish the Theme selector, you can try it (link above)

If you're stuck on 'Connecting..', refresh the page until it works (5 try max 🏷, I need to implement a timeout handler)

How to change theme :

  • Click on [?] and select the theme you want
  • Well done !

Now, there is just one 'block' that change, I need to do the rest, but the system is implemented

@vegeta897 I will make the same for the 'normal' version (master branch) and make a pull request ? as u want

@vegeta897
Copy link
Member

Nice job, I want to see what that theme looks like when finished 😮

I want to handle theming a different way, and I will save it for the rewrite, but thank you for the offer.

Do you know what's causing the connection issues?

@HottonJoris
Copy link
Author

IDK, I think it's the websocket connection which failed to reach the server for some reason. I need to investigate a bit on this subject

@HottonJoris
Copy link
Author

HottonJoris commented Apr 12, 2018

image

Small update on Pirate theme, now I need to make details

@Macleykun
Copy link

So about heroku, i wanna try to get it to work. Of course without the https I can’t verfiy if it tottaly works..

If MechaPoulpe can share the https version that would be great! If the bot works on it, the same steps apply to the main.

@HottonJoris
Copy link
Author

HottonJoris commented Apr 30, 2018 via email

@Macleykun
Copy link

Macleykun commented Apr 30, 2018 via email

@HottonJoris
Copy link
Author

HottonJoris commented Apr 30, 2018 via email

@Macleykun
Copy link

Ah your right, should've re-read the whole issue 😛

@favna
Copy link

favna commented May 14, 2018

I just found this issue and it looks very interesting to host this off of Heroku. Will you still be sharing the code rework you did as well as setup instructions @MechaPoulpe ? I found your mirrored version of the code (not sure why not forked but hey you do you, it's ISC license after all) but while I would assume those are the base files Heroku is using it is not clear what is required for that to run for other people

@HottonJoris
Copy link
Author

HottonJoris commented May 14, 2018 via email

@Macleykun
Copy link

Macleykun commented May 14, 2018

it is not clear what is required for that to run for other people

For Heroku we must need a procfile that tells Heroku how to run the app.
I did some quick researching and found out that running a static website will be doable with some workarounds.

After we figured out how to run the app, we could improve the way of building/deploying by doing this part on Heroku's end. What i mean with that is that the commands: npm install --no-optional and npm run-script build should be run when push the build git push heroku master.

What i know so far, is that with the procfile we could say: bash npminstall.sh && npm start & index.html. But i want to see if we could do better. For now i can only offer small help due to my studies.

@Macleykun
Copy link

Macleykun commented May 14, 2018

Also,
If we plan to use a script, when we run the app. It will re-download everything from npm install/npm run-script build everytime we boot the app. (So less fast bootup times, guaranteed to work with my knowledge)
If we plan to use it while we push the files to Heroku, it will only affect the build time (note that if there is nothing new with the commands, the time completing them will decrease! Yet i fail still how to exactly do this)

Might need to study this: https://devcenter.heroku.com/articles/nodejs-support#build-behavior

@favna
Copy link

favna commented May 14, 2018

Did some more figuring out myself as well and I managed to run it off of a github page with custom domain for the client and the server is running off of my VPS droplet at DigitalOcean (which already hosts my primary site anyway).

This solution will work just fine for me tbh. Would drop the link but I gotta do some config stuff first..

@favna
Copy link

favna commented May 16, 2018

Coming back to my comment from yesterday I did the aforementioned fixing so now I have ribbonzone-server which is the server and ribbonzone-client as client. The client is also a submodule on the server so they are all included when you'd recursively clone the server.

The production environment is

  • Running off of my DigitalOcean droplet (debian 9)
  • The server was started on some port with IP set to the IP of the VPS
  • The port was set to some port
  • The client was started through ExpressJS on some other port
  • nginx handles the reverse proxy to make the entire thing available on http://ribbonzone.club

If any other readers are interested in how to config my version, you need

  • .env in src/

    • content is socketserver, sockerport (2356 in my config), token and url
  • conf.json in src/data

    • content is just the servers (see src/convict.js for layout i guess)
  • update the ip the client needs to open a websocket to in web/main.js (client submodule folder)

  • run yarn install in both the project root and the web folder.

  • run yarn build

  • run yarn start to start server, yarn start:client to start client

@vegeta897
Copy link
Member

Impressive work! Do you have any intention to do further customization or enhancements?

@favna
Copy link

favna commented May 16, 2018

Well yes there is one thing that caught my attention that I may improve, mobile support. It is not possible to press the [Server] or [?] buttons on mobile and for as far as I've been able to tell the text boxes for messages are also not rendered.

That said, I also have to set my own priorities and I have my Discord bot to tend to as well and I'm also trying to start something with Amazon Alexa skills since the only package that links Discord with Alexa right now is well... not updated. Not to mention work and social life ¯\_(ツ)_/¯

@Macleykun
Copy link

Macleykun commented May 30, 2018

I think i have it working almost. It seems that this is the last bit holding me back from getting it to work dedicated:

2018-05-30T11:43:02.317602+00:00 app[web.1]: > d-zone@0.1.65 start /app/d-zone
2018-05-30T11:43:02.317604+00:00 app[web.1]: > node index.js
2018-05-30T11:43:02.317605+00:00 app[web.1]: 
2018-05-30T11:43:02.410481+00:00 app[web.1]: Optimizing defaults for 1X dyno...
2018-05-30T11:43:02.526384+00:00 app[web.1]: Initializing server
2018-05-30T11:43:02.574099+00:00 app[web.1]: 4 processes at 128MB memory limit.
2018-05-30T11:43:02.583418+00:00 app[web.1]: Starting php-fpm...
2018-05-30T11:43:02.870106+00:00 app[web.1]: 2018-05-30T11:43:02.868Z 'Logged in as: Delta - (341194927935586305)'
2018-05-30T11:43:02.872137+00:00 app[web.1]: Connected to 8 server(s)
2018-05-30T11:43:02.899642+00:00 app[web.1]: events.js:183
2018-05-30T11:43:02.899646+00:00 app[web.1]:       throw er; // Unhandled 'error' event
2018-05-30T11:43:02.899648+00:00 app[web.1]:       ^
2018-05-30T11:43:02.899649+00:00 app[web.1]: 
2018-05-30T11:43:02.899651+00:00 app[web.1]: Error: listen EACCES 0.0.0.0:443
2018-05-30T11:43:02.899655+00:00 app[web.1]:     at Object._errnoException (util.js:992:11)
2018-05-30T11:43:02.899657+00:00 app[web.1]:     at _exceptionWithHostPort (util.js:1014:20)
2018-05-30T11:43:02.899659+00:00 app[web.1]:     at Server.setupListenHandle [as _listen2] (net.js:1338:19)
2018-05-30T11:43:02.899660+00:00 app[web.1]:     at listenInCluster (net.js:1396:12)
2018-05-30T11:43:02.899662+00:00 app[web.1]:     at doListen (net.js:1505:7)
2018-05-30T11:43:02.899664+00:00 app[web.1]:     at _combinedTickCallback (internal/process/next_tick.js:141:11)
2018-05-30T11:43:02.899665+00:00 app[web.1]:     at process._tickCallback (internal/process/next_tick.js:180:9)
2018-05-30T11:43:02.909193+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-05-30T11:43:02.909478+00:00 app[web.1]: npm ERR! errno 1
2018-05-30T11:43:02.910525+00:00 app[web.1]: npm ERR! d-zone@0.1.65 start: `node index.js`
2018-05-30T11:43:02.910627+00:00 app[web.1]: npm ERR! Exit status 1
2018-05-30T11:43:02.910792+00:00 app[web.1]: npm ERR! 
2018-05-30T11:43:02.910902+00:00 app[web.1]: npm ERR! Failed at the d-zone@0.1.65 start script.
2018-05-30T11:43:02.911006+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-05-30T11:43:02.915049+00:00 app[web.1]: 
2018-05-30T11:43:02.915191+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-05-30T11:43:02.915275+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2018-05-30T11_43_02_912Z-debug.log
2018-05-30T11:43:04.585609+00:00 app[web.1]: Starting httpd...

I think due to not having a static ip. It can't loopback itself (127.0.0.1:443). If we could use the hostname instead, it should work.

@HottonJoris
Copy link
Author

HottonJoris commented May 30, 2018 via email

@Macleykun
Copy link

o, well, ig i use that then >.>

@HottonJoris
Copy link
Author

HottonJoris commented May 30, 2018 via email

@Macleykun
Copy link

Macleykun commented May 30, 2018

Well sure, but i still need to get the initial d-zone working. I'm quite sure it has to do with the ip not being a name.
I think it would be this because i made the fredboat heroku instructions. The backend only could connect with the HOST NAME, and only trough a port like 80 or 433.
I'm not sure how much harder it would be to use a hostname instead of IP for d-zone...

or.. do we need that? https://elements.heroku.com/addons/fixie

@Macleykun
Copy link

After alot of trial and error i didn't succeed to get it to work. Due to studies i'm unable to spent more time into it. Techguy12 🔥 will take over my findings and hopefully he finds a way to get it to work.

So far, the web part works.
The main part doesn't
Might be something around the port/ip/config part. It's surely the app part but where exactly i'm not sure.

@HottonJoris
Copy link
Author

HottonJoris commented May 30, 2018 via email

@Macleykun
Copy link

logs.txt
d-zone.zip
instructions.txt
For anyone else intrested, you can use these files to get the web part working on Heroku.
I do recommand replacing the files in web with your own.
logs show a working webservers.
instructions tell you what commands to use to get your files into Heroku.

If anyone finds the solution to get the core of d-zone working on Heroku, then d-zone should be able to work on Heroku as a easy and free way for everyone to enjoy.

@HottonJoris
Copy link
Author

HottonJoris commented Jun 5, 2018 via email

@Macleykun
Copy link

Any steps how to do that? Is it just a copy paste of another library or..?

Not a developer here, so i'm a bit new to this ^^;;

@Macleykun
Copy link

Or do you just want me to get it working on your repo?

Normally i try to get the original working. But if vegeta uses the same websocket library like you do, and it all works i'm ok to do it on your repo then.

@Macleykun
Copy link

What kind of websocket does D-Zone use?

@vegeta897
Copy link
Member

Regular ws://, non secure.

@Macleykun
Copy link

I've tried everything, but i think it's not possible to host it fully, unless the following would happen:

The solution for Heroku was to use express server to render the UI and replace the websocket library used by socket.io (some code rework is necessary)

It's easy to host the web part in heroku, and put the core somewhere else. But using Heroku only for webhosting isn't really that good.

Hope that D-Zone can run on Heroku some day 👍

@NNTin
Copy link

NNTin commented Nov 10, 2018

I got a proof of work for hosting d-zone on Heroku. I will create a pull request later tonight or tomorrow.
d-zone: https://nntindzone.herokuapp.com/?s=default
heroku deploy link: https://heroku.com/deploy?template=https://github.com/nntin/d-zone/tree/heroku
github: https://github.com/NNTin/d-zone/tree/heroku

What I did:
Added to the websocket "server" a http server using express. It hosts the static website.
You can serve ws/wss and http/https on Heroku natively, so you don't need any certificates.
Port is handled by Heroku so the websocket link has no port.
Also added a bunch of files back into git such as config, bundle.js etc. Else you would have to manually commit the config files to Heroku git which isn't beginner friendly.

Can you create a heroku branch from your master? I will do my pull request there. I might have removed some code you need (SSL certification) and I'm not happy with my solution in general. It still needs a bit of refactoring/re-organisation/addition before it is ready for main branch. Also the discord server id is hardcoded into the config. That should be customizable from env var in Heroku.
The heroku button link can however be put into the ReadMe.

@Macleykun
Copy link

Truely amazing work! You’ve done it in less then a day! I’m super happy that you got it to work and can’t wait to move over to heroku with d-zone!

One tiny suggestion, I made and-zone logo that you guys can have: https://deltabot.me/about/images/D-zone.png
Suggest putting this in the git itself, so it is in a safe place :-)

Again thank you so so much! I’m super happy with the result you’ve brought!

@vegeta897
Copy link
Member

Awesome work @NNTin! I didn't occur to me that you could have the http and ws on the same url. I'll create a branch. Thanks so much for your contribution!

@Macleykun
Copy link

I think this can be closed :P

@vegeta897
Copy link
Member

Okie doke

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants