Abp Angular 项目部署

Abp Angular 项目部署

后端Api部署

生成发布文件

• 在“解决方案资源管理器”中右键单击该项目，然后选择“发布”。
• 在“选择发布目标”对话框中，选择“文件夹”发布选项 。
• 设置“文件夹或文件共享”路径。
  • 如果为开发计算机上可用作网络共享的 IIS 站点创建了一个文件夹，请提供该共享的路径。 当前用户必须具有写入权限才能发布到共享。
  • 如果无法直接部署到 IIS 服务器上的 IIS 站点文件夹，请发布到可移动介质上的文件夹，并将已发布的应用物理移动到服务器上的 IIS 站点文件夹，该文件夹是该站点在 IIS 管理器中的物理路径。 将 bin/Release/{TARGET FRAMEWORK}/publish 文件夹的内容移动到服务器上的 IIS 站点文件夹，该文件夹是该站点在 IIS 管理器中的物理路径。
• 选择“发布”按钮

生成数据脚本

在开发工具visual studio的程序包管理控制台中执行以下脚本。

默认项目选择SWKJ.CRM.EntityFrameworkCore，启动项目选择SWKJ.CRM.EntityFrameworkCore

Script-Migration -Idempotent

Idempotent 参数产生幂等脚本

默认项目选择SWKJ.CRM.DataSync，启动项目选择SWKJ.CRM.DataSync

Script-Migration -Idempotent --context CRMDataSyncDbContext

安装运行环境

• dotnet-runtime
• aspnetcore-runtime
• dotnet-hosting

配置IIS

正常的asp.net网站部署，需要注意的是应用池.NET CLR 版本选择无托管代码。

Angular 前端发布

打包

ng build --aot

ng build 产生选项

特定配置编译

在src/environments文件夹中添加 environment.prod.SWKJ.ts文件，并进行一下配置

import { Environment } from '@abp/ng.core';

// 前端网站地址
const baseUrl = 'http://localhost:1142';

export const environment = {
  production: true,
  application: {
    baseUrl,
    name: 'CRM',
    logoUrl: '',
  },
  oAuthConfig: {
    // 后台授权地址
    issuer: 'https://localhost:1140/',
    redirectUri: baseUrl,
    clientId: 'CRM_App',
    responseType: 'code',
    scope: 'offline_access CRM',
    requireHttps: true
  },
  apis: {
    default: {
    // 后台api地址
      url: 'https://localhost:1140',
      rootNamespace: 'SWKJ.CRM',
    },
  },
} as Environment;

在angular.json文件中添加以下配置：

            "SWKJ":{
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.SWKJ.ts"
                }
              ],
              "outputHashing": "all"
            },

效果如下：

    {
            ...
          "configurations": {
            "production": {
              "budgets": [
                ...
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "SWKJ":{
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.SWKJ.ts"
                }
              ],
              "outputHashing": "all"
            },
          }

执行以下命令进行编译

ng build --aot --configuration=SWKJ

服务器IIS安装 IIS URL Rewrite

在IIS的根目录点击右侧的【获取新的Web平台组件】。在 web platform installer 的搜索框里搜 rewrite ，出来之后 按照步骤安装。

然后 web.config 的内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
 <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
 <modules runAllManagedModulesForAllRequests="true" runManagedModulesForWebDavRequests="true" >
      <remove name="WebDAVModule" />
    </modules>
        <httpErrors>
            <remove statusCode="404" subStatusCode="-1" />
            <error statusCode="404" prefixLanguageFilePath="" path="/" responseMode="ExecuteURL" />
        </httpErrors>
    </system.webServer>
</configuration>

在IIS中部署

正常的发布网站的步骤执行，.NET CLR版本选择对应的.NET版本

修改应用池中设置

在应用池高级设置里，将process Model下的Identity修改为LocalService（也可以不修改，使用默认的ApplicationPoolIdentity）。

解决页面刷新404问题

下载URL Rewrite

配置web.config

在<system.webServer>节点添加以下配置

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

在nginx中部署

下载nginx

• 下载后解压
• 将编译好的的dist\Crm文件夹下的所有文件复制到nginx-1.26.2\html文件夹下，并覆盖原有文件

修改配置文件

打开nginx-1.26.2\conf\nginx.conf文件，做以下配置

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       1142;  // 监视的端口
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;  // 程序入口
	          try_files $uri $uri/ /index.html =404; // 解决刷新页面时出现404错误问题
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

开启nginx

双击nginx-1.26.2\nginx.exe文件，会有命令窗口弹出并消失，则nginx开启成功。在任务管理器中可以看到该进程。