背景：現在越來越多的企業都採用了在開發上前後端分離，前後端開發上的分離有很多種，那麼今天，我來分享一下專案中得的前後端分離。

B/S  Saas 專案：（這個專案可以理解成個人中心，當然不止這麼點功能）

        前端：node.js + vue

        後端：.net core webapi

前端安裝 node.js 跟建立vue專案這些不是這篇文章的重點，重點在於專案完成後的部署。

.net core webapi建立後，預設就建立了一個wwwroot的檔案夾，這個檔案夾是用來放置靜態檔案的，所以，我們可以理解成，這個檔案夾將放置我們的build好的前端專案。

 OK，到現在來講，有一個很有意思的發現（也可以是一點意思都沒有，因為都是同一個爸生的），這專案的部署跟mvc的部署的很像（這裡不涉及底層執行，只是一個釋出後簡單的像而已）。

由上圖就足夠清晰了，這樣的部署是屬於開發上的前後端分離，他們同屬於一個站點，系結同一個域名，所以不涉及跨域，外部不能直接呼叫webapi（安全上還是有保證D）。

那麼這樣的部署卻很簡單，僅僅是在 Startup 裡面的 Configure 設定 一下即可

            //設定主頁
            app.UseDefaultFiles();

            //這個是.net core webapi 訪問wwwroot檔案夾的配置，開啟靜態檔案
            app.UseStaticFiles();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "api/{controller=Login}/{action=Get}/{id?}");
            });

1、首先是設定主頁

      這裡直接使用的是預設的，就是 UseDefaultFiles 會重定向到 default.htm、default.html、index.htm、index.html。當然你也可以指定設定的首頁（指定的頁面是可以自定義的！）

            //設定主頁
            DefaultFilesOptions defaultFilesOptions = new DefaultFilesOptions();
            defaultFilesOptions.DefaultFileNames.Clear();
            defaultFilesOptions.DefaultFileNames.Add("index.html");

            app.UseDefaultFiles(defaultFilesOptions);

      這樣就設定了重定向到 index.html，那為什麼前面用了 Clear，其實個人認為僅僅是為了保險，因為

2、開啟靜態檔案，UseDefaultFiles 僅僅是一個重定向URL而不是真的提供一個檔案，真正提供靜態檔案的還是 UseStaticFiles。這就是為什麼要優先設定 UseDefaultFiles 再到 UseStaticFiles的原因。當然，提供靜態檔案也提供了多個多載，可以提供一個相對路徑，還有靜態檔案目錄的選擇。

            //這個是.net core webapi 訪問wwwroot檔案夾的配置，開啟靜態檔案
            StaticFileOptions staticFileOptions = new StaticFileOptions();
            staticFileOptions.FileProvider = new Microsoft.Extensions.FileProviders.PhysicalFileProvider(@"D:\testsite\wwwroot\");//指定目錄你站點api的要訪問的wwwroot目錄   

            app.UseStaticFiles(staticFileOptions);

上面這種寫法也同樣可以，當然指定的目錄也同樣可以放到配置檔案裡面去，但是這種做法一般都放在類似FTP的專案上。因為如果是指定的目錄脫離了 webapi 專案 wwwroot ，甚至是 wwwroot 下的檔案夾都不可以訪問到靜態頁面的。

3、使用MVC並配置路由，開啟了靜態檔案的訪問之後，就交由mvc來處理了，這個是webapi專案，所以配置api的路由就可以了。（除了上面的1、2順序不可以改變之外，mvc中配置的路由所放置的順序倒沒影響，因為這不是一個mvc專案）

好了，前後端都開發好之後，部署到伺服器，僅是上面在Startup的配置即可。.net core 還是非常非常方便的。

正常訪問！一點問題都沒有，就算是有問題，也是程式碼的問題了，噢哈哈

這就是我的專案中的前後端在開發上分離的實踐，講得不深，隨便拍！

原文地址：https://www.cnblogs.com/Vam8023/p/10670741.html