Simple Step by Step Nginx setup

Nginx setup

# 01 - build your web app


# 02 - build the production version of your app into dist folder

# 03 - use express to create a simple server like below
const express = require('express')
const webpack = require('webpack')
const path = require('path')
const webpackMiddleware = require('webpack-dev-middleware')
const webpackconfig = require('./webpack.config.js')

const app = express()
const port = 8000
const dist = path.join(__dirname , 'dist')


app.use(webpackMiddleware(webpack(webpackconfig)))


app.get('*', (req,res) => {
  res.sendFile(path.join(dist, 'index.html'))
})

app.listen(port, () => {
  console.log('Listening at port ' + port + '...')
})

-> note that we use wbpack here as middle ware 
-> and passing webpack.config.js to it 
-> note that we use the builded index.html as a fallback to other urls
-> if we dont do this then user can't load directly from a link like www.example.com/profile/charge
-> then as usual use port to listen to


# 04 install nodemon (this is only for working with express in local)


# 05 create the coressponding command in pkg.json file
-> like this one: "_dev": "nodemon server.js --ignore client"


# 06 run the command to see the result in browser -> nom run _dev


# 07 if there was no error the go to the next step , else fix it


# 08 if everything was OK so far , then create the zip file to upload 
-> note that you dont need to include node_modules folder in zip file


# 09 open filezilla and connect to the server 

# 10 find the location that points to the domain or sub domain and then upload it there

# 11 use unzip filename to unzip files to there

# 12 after unzipping , run npm install 

# 13 if you havent installed pm2 , then go ahead and install it 

# 14 if you havent installed nginx , install it 

# 15 if you havent installed nodejs , install it 

# 16 head over to directory that you uploaded the zip file and then run -> pm2 start server.js 
-> server.js is the file that contains express
-> now your application runs at the port that you specified in the express app port 
-> lets consider it as 8000
-> now if the your server's os (in your case centos) was like your computer 
-> you could lunch the browser and head over to localhost:8000 to see your app
-> by that i mean that your app is runing on the machin currenlty and it is working , if you havent messed up something so far 


# 17 all after from on , is about nginx 

# 18 go to /etc/nginx folder 
-> it is where you can find the nginx.conf file
-> it contains some description and after them one events { ... } & one http { ... }
-> all server code goes under https block
-> basically you need to add the server code here
-> this code :

#
# The default server
#

server {
    listen       80 default_server;
    server_name  _;
    root         /usr/share/nginx/html;

    # 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 {
    }

}
-> basic description of it :
-> listen is the port (80 is default)
-> server_name is the domains that you want to connect to (example.com [one space, nothing else] www.example.com) (you can put subdomain like sub.example.com www.sub.example.com)
-> root is where your files exsits on the machin (address from root -> /home/username/public_html;

-> for now just dont mess with error_pages part 

-> BUT
-> if you look close it has a include line to conf.d directory that includes every .conf file 
-> i mean this motherfucker line here 
-> include /etc/nginx/conf.d/*.conf;
-> basically it means that it imports its server configs from conf.d folder 


# 19 go to -> cd ../ and go inside of conf.d

# 20 you will found cuple of server configuration files 

# 21 PARTY IS HERE

# 22 you need to duplicate default.conf file with the name of your website (to prevent confution later)

# 23 use cp duplicate.conf example.conf to firstly create and then copy the configuration file
-> now if you ls in the directory you will see the example.conf file that contains what ever that default.conf has 

# 24 use nano example.conf to edit the file 

# 25 listen should stay at 80 
-> b/c we want to be the default port 
-> in apache services it is the default port 
-> but we use nginx here for a specifc domain 
-> then it should listen on port 80 , the default port 
-> if not user has to input the port number with the domain name like example.com:8000 to see the website

# 26 server_name is the domain names 
-> put both with and with out www
-> example.com www.example.com

# 27 root is the location of files that you serving 
-> the folder , not specific file like app.js or index.html


# 28 location part is where that the magic happens
-> now you need to ask yourself that which port my application was running -> 8000
-> here we glas to introduce the one and only rever porxy part of nginx
-> basically we create a tunnel from point a (the domain) to point b (the files location on server)
-> all http requests would use this tunnel to connect 
-> add this line to location
-> proxy_pass http://localhost:8000;
-> you see ? we connecting the localhost to the domain name here


# 29 dont fuck with other stuff untill furder notation

# 30 save the file and close it 

# 31 use nginx -s reload to inform nginx from changes 

----------------
adding subdomain
----------------

# 32 for subdomain you need to add the subdomain from example.com:2082 , your websites control panel

# 33 then the whole proccess is the same
-> except that 
-> when we adding domain name on server_name in your cserver configuration , you gonna add sub domain name as well 
-> like test.example.com www.test.example.com


# 34 that is it ...