I am having a problem setting up nginx on a webserver.
I am deploying my application on Heroku and I need to have nginx infront of nuxt.js.
The docs say a little on how to use nginx on nuxt but only a little. They describe a
conf file but they do not state where to put the conf file. And then they go all the way to Laravel.
I am using node.js and vue.js and I turned to nuxt.js thinking it was easier to set up nginx on it.
Any help will be appreciated.
OK.
Finally, after giving up 5 times I have set up nuxt.js with nginx heroku buildpack.
For those who are interested in how I did it checkout this repository.
https://github.com/rsgilbert/hellonuxt.
In there you will find a file called hellonuxt-steps that covers all the steps I took. From creating the nuxt app to deploying and then to setting up nginx and redeploying. You can benefit even though you are not using nuxt.
These are some of the important webpages I visited that really helped me understand what's happening and how to set up nginx:
Have you managed to make your node nginx proxy setup on Heroku work?
Heroku + Node (Parse server) + nginx not working
https://elements.heroku.com/buildpacks/beanieboi/nginx-buildpack
https://github.com/heroku/heroku-buildpack-nginx
The last one was really annoying. For instance, they say "You touch /tmp/app-initialized when you are ready for traffic" ?? What's touch?
Related
I've been trying to deploy a repository https://github.com/evelynhathaway/triton-poll to heroku, but since I am fairly new to NodeJs, I am unable to detect the problem. But I guess it's due to the port because heroku doesn't use static ports.
Any help would be appreciated.
Thank You in advance.
I looked at the fork and you did a couple of mistakes. I don't have the time to fix, test and get it to run but I can show you how I solved it before.
All the relevant code changes can be found in this commit (different project):
https://github.com/vegeta897/d-zone/commit/63730fd7f44d2716a31fcae55990d83c84d5ffea
The project is divided into a client and server part.
You can see here, https://github.com/vegeta897/d-zone/blob/63730fd7f44d2716a31fcae55990d83c84d5ffea/script/websock.js#L16, how I combined server and client into one. This only works because the static client files are served via http/https and the server uses websocket, no http ws/wss
When you publish a server on Heroku you need to bind to their dynamic port. However when you want to access the web server you do not specify a port. The hostname is automatically translated into an ip-address + port combo. I did this here: https://github.com/vegeta897/d-zone/blob/63730fd7f44d2716a31fcae55990d83c84d5ffea/web/main.js#L44 When deployed on Heroku the socketURL does not contain a port number.
Finally you bind to the server. I did it here https://github.com/vegeta897/d-zone/blob/63730fd7f44d2716a31fcae55990d83c84d5ffea/script/websock.js#L55 and here https://github.com/vegeta897/d-zone/blob/63730fd7f44d2716a31fcae55990d83c84d5ffea/socket-config.js#L30
You also have to make sure that your clients files are built properly and served.
Well, i installed nginx on VPS (ovh.com)
then i put all files into /root/directory_site
then i setup nginx config:
server {
listen 80;
server_name 54.38.184.210;
location / {
proxy_pass http://54.38.184.210:3000;
proxy_buffering off;
}
}
Now i got 2 problems
First one: After you go to http://54.38.184.210/
it's loading so long! Like 5-6 seconds before i see anything on website, i can only see the index title before, i think it might be the proxy_pass problem, but i don't how to fix it. It's impossible to load site like this that long, the server is fast, and my connection too!
(it's loading so long only when you try first time, so maybe it's something with cache?)
Second one:
i got errors like this in console:
[WDS] Disconnected!
What the hell is it? i never had it before on my local server!
What's the problem then? Im starting my website using "npm run dev"
you can try to access to the site, it's taking ages before it starting loading anything, where is the problem? Please help me!
WDS is webpack-dev-server, please never use development tools in production.
Why you got things fast locally? Because most heavy file, bundle.js, is loaded to browser from localhost, and you can load locally many Mb before it start to get long.
In proudction though you need to load bundle.js via internet, where speed is times slower. This is why good practice is to make your bundle.js under 2Mb and why in production build your bundle.js goes trhough minification process. Not only code, but assets, like images must be compressed, otherwise you going to load all this super long.
Also many packages has additional optimizations, when they built with environmental variable NODE_ENV=production. So please use minification tool, like uglifyjs, compress your assets and do not use any development tools/packages in production.
You are hosting the site directly off webpack-dev-server. This is bad and you should take this down right away. You need to make a production build and deploy it properly with the command npm run build if you are using create-react-app. Doing this will fix both issues.
Webpack Dev Server is for development purposes only and adds extra bloat to your app to make it easier to debug. This should not be used for a live server.
So I'm building an end to end application (With node.js/mysql back end, react front end, and using the express router), but I'm having trouble setting up a local development server. I don't need it to be accessed from the outside world, just be able to load different pages connecting to the express router. I don't have any dev ops experience for this, so I'm trying to use nginx to point it to the router which I can't figure out. Is there an easier way to do this?
I also need to run this on a windows machine, which just makes everything slightly more complicated
It's not entirely clear from your description how your application is set up and what the role of Nginx is.
So I'll start from the beginning...
Nginx is primarily an HTTP server which can also function as a proxy for HTTP requests. If you've written a Node.js application using Express, you have written an HTTP server which can handle any routes you have set up and can also serve your static assets (ie. HTML pages, images, front-end Javascript, CSS, etc.). In this case, there is no need for Nginx - if you wrote something like the Express "Hello World" app, then you will see a message like "Example app listening on port 3000" and you can connect to your app by visiting http://localhost:3000 in your browser.
That's it - there's literally nothing else to your app and there is no need for Nginx (or any other HTTP server) to run your application.
Now that's not to say that there is no role for Nginx in your application, but it may not be as an HTTP server. One possibility is that you may want to set up Nginx as a proxy, to handle certain routes by sending the requests to your Node application. For example, I set up an application some time ago which uses Nginx to proxy API routes for my application to a Node application and to serve static assets directly. This may be what you have in mind - if it is, you will need to configure different routes in Nginx to serve different things (and unfortunately there's not enough information in your question to give suggestions on this).
As an aside, you're probably going to find this much easier to set up using Linux - perhaps the Windows Linux Subsystem, a virtual machine running Linux, or Docker.
You'll probably want to use
https://github.com/facebook/create-react-app
create-react-app my-app will set up everything you need (webpack, etc.), and then
npm start will start a local development server.
Should work on Windows, but I don't know, because I wouldn't use/recommend Windows ;-)
context
I've a running app on Openshift using a nodejs (nodejs-0.10). I would like to add a ngix as first proxy to serve static files only.
problem
The question is how to add nginx to a running app on Openshift. I saw this cartridge gsterjov/openshift-nginx-cartridge but the README instructs how to create a new app using the nginx, but not how to add it to an existing app.
You can not add a secondary web framework cartridge to an application. Each application can only have one web framework cartridge installed at a time. You might need to setup a second application and setup nginx as a proxy if you want the requests to hit that first and serve static assets, then proxy the dynamic requests back to your node.js application.
Sorry for confusing title, new to Node.js and Heroku, but trying to quickly pick it up.
I currently own a domain, and my first goal is to have it set up so I go to the domain, it uses Heroku to wake up and run Node.js, run my web.js, and display "Hello world".
I've already gone through this heroku/node.js tutorial, and so I understand how to set up stuff locally, push to the heroku remote, and run my Node.js server with it (am I understanding that correctly?). However, I couldn't find anything for how you actually put your Node.js files onto your external server (so, in this case, my domain), and connect the service of Heroku to those files, allowing my local machine to interact with the node on my server.
If there's any tutorials or pages you'd recommend, I'd appreciate it. Kinda stuff and most likely confused on quite a few things here. Thanks!
Heroku apps have their own git repository. So, you push from your local git directory to heroku's git remote.
Setup:
git remote add heroku <git://yourherokurepourl.git>
and then every time to deploy:
git push heroku
That's all needed to get your node.js files on heroku's server. Heroku follows foreman as process launcher. foreman needs a special file in project root called procfile. procfile has simple unix commands to launch processes in each line :
web : npm install && node app.js
So, when you push your project to heroku's git. It will look for procfile and launch processes defined there. You can place more commands here. Better install foreman on your local/development machine and test using that.
In heroku app settings you can "bind" your www.domain.com address to node app running on heroku's server. You have to do the same in settings of domain provider. The DNS will now route requests to www.domain.com to your app's server IP.
On heroku, configuration lives in environment. A lot many process.env.* are available on heroku. You can locally simulate this by providing .env files to foreman.
finally, in your node.js code make sure you listen on value provided by process.env.PORT.
Connecting servers:
Use Request module to directly call other server urls.
Or, Let server's subscribe and publish to a centralized service bus.
You are describing operating two servers. One on Heroku, one "on your domain". I suspect you haven't made the connection that you can merely get your domain to point to your Heroku server. Contact your domain name provider with the heroku url you are using and they can do this for you.
In effect they will "point" your domain to your Heroku node.js server and from there it will act as you expect.