故事開端（前因）
嗯，內網其實是校園網絡，服務器呢，不是阿里雲、騰訊雲之類的雲服務器，而是自己正在碼字的筆記本電腦；有公網IP嗎？沒有！校園IP分配的IP固定不？不固定，動態分配的，額~~~。
我想想，要不這樣吧，使用內網穿透吧？
內網穿透？我找找,nat123，花生殼可以試試，花生殼現在需要實名制，而自己沒有必要去實名制啦，自己測試用，用nat123吧，我看看，本地測試，可以，測試成功，那就它了，修改端口，修改ip，阿勒，無法保存了，哦，保存需要消耗的N幣不足了，哎，充值吧，都到這份上了，叮叮付費30RMB，充值成功，獲得300N幣(一幣可保存一次)，嗚嗚嗚，謹慎！謹慎！修改慎重！
系統的前后端並不是部署到的IIS同一個網站上的，而是前端一個網站，后端一個網站，我如何通過訪問前端后，通過ajax訪問到后端呢？瀏覽器ajax不允許跨域，可以從兩方面入手，一方面是服務器，進行允許跨域的設置，一方面前端進行請求的轉發，通過第三方的服務webservice（.asmx）/一般處理程序（.ashx）或者代理實現相關接口請求的轉發，修改服務端，pass掉，選擇前端處理請求，我的前端基本是純靜態頁面+ajax，再增加請求服務，就提高了前端項目的開發復雜度了，這是我所不願意看到的，所以不打算使用服務中轉，那代理吧，將進行數據接口的請求進行轉發，轉發到后端網站，那用什么作為代理呢，自己學過一些nginx代理，那就它了，果斷草率的愉快決定了，此處忽略全是淚的經過成功實現了。
G:寫個博客慶祝一下。Y: 向我們這種小白，想用都看不懂寫的啥, 你可以一步一步簡單點。G:我試試。
於是乎，就有了這篇博客，也可以說這是一篇技巧隨筆，分享前后端簡單分離，使用nginx作為代理，IIS作為服務器，初學者體驗手動式個人本地計算機部署發布系統外網訪問的技巧。
一、前期准備
知識-如果不考慮了解可忽略該部分
- nat123的使用技巧（內網網站發布到外網-五種方法-內網環境，無公網IP-80端口）
- nginx的代理技巧（http-proxy）
- 本地訪問和外網訪問聯系和區別
- Asp.Net WebApi的簡單使用
- 前端html以及ajax的使用
工具-案例資源
- nat123 windows版本 下載鏈接 http://www.nat123.com/Pages_2_32.jsp
- nginx windows版本 nginx-1.13.12 下載鏈接 http://nginx.org/en/download.html
- 后端網站案例-VS2015開發 +前端網站案例-Html+js(ajax相關js文件) 下載地址 https://pan.baidu.com/s/1WAhv4WKXExGcEJsl3XdVow 密碼： 1unv
二、操作實踐
前端和后端網站的案例
后端網站案例（部署Web Api）-前期准備中的案例文件
此處使用VS15調試項目時，在瀏覽器中直接訪問接口的方式為XXXXX/api/product/getproducts，出現如下的結果則說明簡單的getproducts接口實現了，能夠正常訪問了。
發布項目文件-該步驟可跳過准備工作中已提供發布文件
將項目發布至文件系統：F:\Nat123_Nginx_Demo\back-end
查看發布結果如下圖，以及文件發布路徑下的結果
使用window自帶的IIS進行該后端的網站的部署
IIS部署Asp.net應用程序
自行百度
IIS部署Asp.net程序過程中需要注意的問題此處不詳細說明，具體查看網址：https://www.cnblogs.com/hongmaju/p/6800403.html）
PS:發布過程中需要注意，當前網站並未分配對應本機的IP地址，同時該網站的端口號不能和已有的網站端口號重復，重復將出現不可控異常
建站配置如下：
瀏覽網站-輸入api/product/getproducts，如下圖則表示后端部署成功端口為8090
前端網站
前端網站（部署前端靜態網站）
在非C盤的盤區（D盤、E盤等）中添加一個文件夾作為前端網站的網站根目錄，此處我是以F盤為例，路徑為：F:\Nat123_Nginx_Demo\front-end，文件結構如下圖：
Index.html代碼如下：
<html>
<head>
<script src="/js/jquery.js"></script>
</head>
<body>
<span id='msg'>this is my web !</span>
<input id='btn' onclick='GetData()' type='button' value='getData'/>
</body>
<script type="text/javascript">
function GetData() { $.ajax({ url:"http://localhost:8090/api/product/getproducts", type:"json", method:"get", success:function(data) { $("#msg").html(data); } }); } </script>
</html>
Js文件夾中為當前需要使用的ajax需要的jquery腳本
進行網站部署同后端部署，注意需要端口不一樣，我設定為9898，運行效果如下：
點擊獲取數據按鈕getData出現如下異常（普通情況下瀏覽不允許ajax跨域）於是乎nginx派上用場了，需要處理的是將當前數據接口的請求進行一次轉發，獲取到的數據再返回給前端
需要做如下修改：
將前端頁面中ajax請求中url進行修改，修改為/api/product/getproducts
運行時出現：404未找到請求服務端
配置Nginx
此時使用nginx（此處nginx的安裝和基本操作不做介紹，有興趣的可以自行百度），對nginx進行如下配置（confg文件夾下的nginx.conf），實現代理，需要注意的是當前前端端口號為9898,后端端口號為8090,nginx配置文件中，主要使用的是http節點下的upstream和server中的location，#為行注釋符號。
http節點下
.......................略
http{
#內部前端網站轉發規則名稱
upstream myweb
{
#前端網站在IIS上的網址
server 127.0.0.1:9898;
}
#內部后端api網站轉發規則名稱
upstream webapi
{
#api網站在IIS上的網址
server 127.0.0.1:8090;
}
.......................略
}
Server節點下
http {
.........略
server {
listen 9999;#nginx監聽端口-同時也是計划內網穿透的端口
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
#默認location注釋掉
#location / {
# root html;
# index index.html index.htm;
#}
#默認轉發的請求-轉發給前端網站-前端網站為localhost:9898
location /{
proxy_pass http://myweb;
}
#匹配請求中含有/api/-轉發給后端網站-后端網站為localhost:8090
location /api/{
proxy_pass http://webapi;
}
.......................略
}
以管理員權限啟動cmd，然后切換路徑到nginx解壓（安裝）路徑，此處樓主為D:\Program Files\nginx-1.13.12，啟動nginx
運行后，可查看任務管理器中是否存在nginx相關的進程
然后在瀏覽器中輸入localhost:9999,進行測試，若如下結果，則前端頁面成功實現轉發。
點擊獲取getdata按鈕，結果通過瀏覽器斷點，可以發現能夠通過ajax正常訪問
配置Nat123
本地測試成功了，然后就可以將當前9999端口通過nat123進行公開了（本機防火牆為該端口建立入站規則或者關閉防火牆便於遠程端口訪問），nat123我在使用過程中，使用的是外網80端口，這樣顯得自己假專業一些，看着逼格高點兒，配置如下：
外網訪問的域名可以是個人域名，也可以是nat123自帶的免費域名，看個人的喜好，點擊保存，保存成功后,查看nat123的主頁面中對應的網站類型
列表中的目錄，出現小黃笑臉，這表示當前的映射成功，可能在映射生效需要等待分鍾，等待期間請盡量不要在修改映射配置，避免出錯，同時需要注意的是一個細節是作為服務端口即nginx監聽端口和nat123的映射端口是一致的，不一致將導致，nat123映射失敗
三、測試效果
測試效果
在瀏覽器中輸入對應的域名進行訪問，則實現外網訪問了，這樣就算是圓滿的成功了
四、測試分析
簡單的效果已經實現，其中需要注意的是，樓主使用的web api的開發環境，如果有興趣的小伙伴們版本比樓主低的可以查看樓主上傳的附件文檔資源，對於上述的操作中，需要對一些地方做出一些分析和探討：
處理ajax跨域的基本思路
通過將請求發送到當前的服務中，通過服務去實現個人請求的轉發，服務同時將獲取到的請求結果返回給前端請求方，這樣就像是我需要去取快遞，知道取件地址，自己因為某些原因不能親自去，就告訴自己信任的朋友，讓朋友去幫忙代取，然后將快遞給自己，這樣的過程可以理解為代理(正向)，以此實現前后端的數據交互
Nginx與nat123在此處扮演的角色
在測試過程中，Nginx可以看作將前端和后端進行連接的那個橋，是兩個相對獨立的網站能夠進行簡單數據傳遞，可認為是代理
Nat123將當前的當前電腦的端口進行對外開發的操作，就仿佛是將內網和外網之間搭建了一個橋，這個橋的入口和出口就是訪問的外網端口以及內網的開發端口，外網的訪問能夠映射到對應的內網端口；綜上，nginx作為前端請求后端網站的一個請求代理者-中間者，nat123是能外網請求轉換的搬運工和支撐者
作為前后端分離的簡單方式這樣的核心思想是否能夠運用到實際的開發中
我個人認為這樣的出發點是可以的，前后端，通過代理的思想去處理開發過程中遇到的部分問題還是可以的，工具不是唯一的，重要的是這樣的想法的適用性（拙見）
五、問題總結
所思
對於nginx的使用始終感覺有些大材小用，可能是個人能力目前有限，暫時這樣的操作能夠個人測試使用，相對於前后端簡單分離的方式，這樣還是能夠達到效果的，但是配置還是相對復雜，后續通過了解IIS使用特點，可能會將Nginx排除，使用IIS的請求轉發去實現類似於Nginx的代理功能，這些都是后話，這是作為一個初學者的個人總結，可能該篇博客的適合的人群范圍小，當時我覺得還是有必要和廣大的博友們分析的，這也是一種記錄成長的方式吧！
所想
這篇文章是我的第一篇文章，寫完也簡單佩服那些每月每周堅持更新博客的老哥們，工作之余能夠合理的安排自己的時間，博客是一個表達自己的想法和分享經驗的好地方這是大實話，不考慮博文質量，當然，如果該篇文章有什么表述錯誤和思想錯誤的地方，希望各位博友能夠提出來，集思廣益。
六、資源鏈接
關於代理服務
nginx指令的詳解-https://www.cnblogs.com/brant/p/7209048.html
nginx實現前后端分離-https://m.linuxidc.com/Linux/2016-11/136885.htm&http:/m.linuxidc.com/Linux/2016-11/136885.htm
關於nat123
nat123官網-http://www.nat123.com/