ABP .Net Core API和Angular前端APP集成部署

時間 2019-11-13

標籤 abp core api angular 前端 app 集成部署欄目 AngularJS 简体版

原文原文鏈接

前言：
在ABP官網（https://aspnetboilerplate.com）生成的.Net Core + Angular項目先後端是兩個獨立的項目，咱們能夠分開部署，也能夠將前端和Web API一塊兒集成部署，咱們今天就來嘗試一下集成部署。javascript

一前端打包
確保前端安裝和運行沒有問題，如何安裝運行請查看博客：http://www.cnblogs.com/donaldtdz/p/7705605.html
運行命令 ng build 進行打包，在項目根目錄會自動建立一個dist目錄（先安裝 npm install -g angular-cli）
html

二打包集成
1. 將第一步打包好的dist目錄裏的文件copy到後臺host項目裏的wwwroot目錄下面（注：打包好的靜態文件都須要放到wwwroot目錄，這個目錄是網站靜態資源根目錄，以便後續作動靜分離部署）前端

2. 而後在HomeController裏建立一個新視圖PhotoStory（注：這裏是隨便建立一個View用於集成測試，實際項目你能夠按照你的須要進行建立）java

3. 而後將以前打包到dist目錄的index.html文件裏的代碼copy PhotoStory 視圖
npm

<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>照片故事</title>
    <base href="/">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="author" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="theme-red">
    <app-root></app-root>
    <script type="text/javascript" src="inline.bundle.js"></script>
    <script type="text/javascript" src="polyfills.bundle.js"></script>
    <script type="text/javascript" src="scripts.bundle.js"></script>
    <script type="text/javascript" src="styles.bundle.js"></script>
    <script type="text/javascript" src="vendor.bundle.js"></script>
    <script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

4. 而後將默認路由Index返回視圖PhotoStory，集成完成後端

public IActionResult Index()
{
    //return Redirect("/swagger");
     return View("PhotoStory");
}

　
三集成運行測試

更改URL爲http://localhost:21021/swagger/會跳轉的Web API頁面
api

如要先後端獨立部署須要注意跨域問題，可查看博客：http://www.cnblogs.com/donaldtdz/p/7882225.html跨域

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。