Due to changes in Segmint's dev environment after moving from in-house servers to a cloud environment, my local machine angular.js environment required some modifications. Specifically I had to move from Apache to Nginx as my local dev/proxy server. Below I will detail the steps I took to get my Nginx server with multiple virtual hosts set up on my Windows 8.1 machine.
Note: I am using Nginx 1.8.0 on a Windows 8.1 machine running an angular.js site hitting some backend services in a dev environment.
First install Nginx by extracting the downloaded .zip file into a directory of your choosing. I extracted it close to my development directories but I've seen it placed at C:\nginx among other places.
Navigate to your Nginx directory where you will see a structure as shown below.
From here you can perform the following commands:
*Note: I will be using a linux shell for most of these commands, except where I specifically state a windows cmd is necessary.
First, let's clear out the html directory and create symlinks to the directories you would like Nginx to serve for you.
rm html/*
Next in conf/sites-available create a .conf file for each site you would like Nginx to host for you. Here is a sample .conf file for one of my sites with some annotations to explain what is required.
# The contents of each site .conf file should be wrapped in a
# server {
# }
# block.
server
{
rewrite_log on;
# You can listen on any port but to keep things simple I listen on 80
# and use different urls in my host file for each site
listen 80;
# This is the url that Nginx will map requests to this site to
server_name site-one.local.company.com;
charset utf-8;
# The location states what will be served from specific locations
# in your site. Here I am saying `always serve every request from
# the directory folder` in the root path below
#
# try_files tells Nginx to take a request like /adminstration/add/4
# and serve it from index.html. This is important because angular
# wants to handle all the routing and it is bootstrapped in
# index.html
location / {
root "html/site-one-html";
try_files $uri $uri/ /index.html =404;
}
}
If you have 3 sites you would like to serve from Nginx you should have 3 .conf files in sites-available.
Now we will create symlinks in conf/sites-enabled to these files. Open a cmd prompt and type the following for each .conf file you created.
mklink /h conf/sites-enabled/site-name.conf conf/sites-available/conf-file-you-just-created.conf
This will create a hard link to the .conf file and we will later add an import statement that will grab all .conf files in the conf/sites-enabled directory and give them to Nginx to host.
Now we need to create some symlinks to the folders we will be serving content out of for each site.
mklink /j html\site-one-html c:\path\to\my\app\directory
Repeat this command for each directory you entered as a location-root in the .conf files you created above. When you finish you will have a site-name-html directory (symlink) nested inside the Nginx default html directory at the root of the Nginx app folder.
Now we need to edit the conf/nginx.conf file. Mine looks something like this:
#user nobody;
worker_processes 1;
error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
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 logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
include conf/upstreams-enabled/*.conf;
include conf/sites-enabled/*.conf;
}
The key lines to note here are at the bottom. Each of the include lines at the bottom are what pull into the sever all of the symlinks to the .conf files created above.
Now you will need to start your nginx server.
nginx.exe -s reload
Now, assuming you have your local hosts file configured to redirect the domain names you set as server_name in your sites-available/siteX.conf files, you should be able to browse to the given url ( https://site-one.local.company.com in this case) in your browser and see your site load up. The other sites you configured should also work if you test them out.
Configuration is always the most annoying part of any development project. When learning something new there is always an excitement that pushes you to want to jump right into the code and test it out. Setting up your environment can really mess with that momentum and hopefully these instructions will streamline that process and allow us to dive straight into what we love - web development.
