CentOS 7如何部署DotNetCore+Angular2

在现代Web开发中，DotNetCore和Angular2是两个非常流行的技术栈。DotNetCore是一个跨平台的高性能框架，而Angular2则是一个强大的前端框架。本文将详细介绍如何在CentOS 7上部署一个基于DotNetCore和Angular2的Web应用程序。

1. 环境准备

在开始部署之前，我们需要确保CentOS 7系统已经安装了必要的软件和工具。以下是需要安装的软件列表：

• DotNetCore SDK
• Node.js 和 npm
• Nginx（可选，用于反向代理）
• Git（可选，用于版本控制）

1.1 更新系统

首先，确保系统是最新的：

sudo yum update -y

1.2 安装DotNetCore SDK

DotNetCore SDK是开发DotNetCore应用程序的必备工具。我们可以通过以下步骤安装：

1. 添加Microsoft的包仓库：

   sudo rpm -Uvh https://packages.microsoft.com/config/centos/7/packages-microsoft-prod.rpm

1. 安装DotNetCore SDK：

   sudo yum install dotnet-sdk-6.0 -y

注意：请根据实际需求选择合适的DotNetCore版本。

1.3 安装Node.js和npm

Angular2需要Node.js和npm来构建和运行。我们可以通过以下步骤安装：

1. 添加NodeSource的仓库：

   curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -

1. 安装Node.js和npm：

   sudo yum install nodejs -y

1. 验证安装：

   node -v
   npm -v

1.4 安装Nginx（可选）

Nginx可以作为反向代理服务器，将请求转发到DotNetCore应用程序。安装Nginx的步骤如下：

sudo yum install nginx -y

1.5 安装Git（可选）

Git用于版本控制，如果你需要从远程仓库拉取代码，可以安装Git：

sudo yum install git -y

2. 创建DotNetCore和Angular2项目

2.1 创建DotNetCore Web API项目

首先，我们创建一个DotNetCore Web API项目：

dotnet new webapi -o MyWebApi
cd MyWebApi

2.2 创建Angular2项目

接下来，我们创建一个Angular2项目：

npx @angular/cli new MyAngularApp
cd MyAngularApp

2.3 集成DotNetCore和Angular2

为了将DotNetCore和Angular2集成在一起，我们可以将Angular2项目放在DotNetCore项目的ClientApp目录下：

mv ../MyAngularApp ./ClientApp

然后，修改DotNetCore项目的Startup.cs文件，以支持静态文件服务和Angular的路由：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();
    if (!env.IsDevelopment())
    {
        app.UseSpaStaticFiles();
    }

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller}/{action=Index}/{id?}");
    });

    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseAngularCliServer(npmScript: "start");
        }
    });
}

2.4 构建和运行项目

在项目根目录下运行以下命令来构建和运行项目：

dotnet build
dotnet run

此时，DotNetCore应用程序将在http://localhost:5000上运行，Angular2应用程序将在http://localhost:4200上运行。

3. 部署到生产环境

3.1 发布DotNetCore应用程序

在生产环境中，我们需要将DotNetCore应用程序发布为一个独立的可执行文件：

dotnet publish -c Release -o ./publish

3.2 配置Nginx反向代理

为了将Nginx配置为反向代理，我们需要编辑Nginx的配置文件：

sudo vi /etc/nginx/nginx.conf

在http块中添加以下内容：

server {
    listen 80;
    server_name your_domain_or_ip;

    location / {
        proxy_pass http://localhost:5000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

保存并退出，然后重启Nginx：

sudo systemctl restart nginx

3.3 配置防火墙

如果启用了防火墙，需要允许HTTP和HTTPS流量：

sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload

3.4 配置DotNetCore应用程序为服务

为了确保DotNetCore应用程序在系统启动时自动运行，我们可以将其配置为系统服务：

1. 创建一个服务文件：

   sudo vi /etc/systemd/system/mywebapi.service

1. 添加以下内容：

   [Unit]
   Description=MyWebApi

   [Service]
   WorkingDirectory=/path/to/your/publish
   ExecStart=/usr/bin/dotnet /path/to/your/publish/MyWebApi.dll
   Restart=always
   RestartSec=10
   SyslogIdentifier=mywebapi
   User=www-data
   Environment=ASPNETCORE_ENVIRONMENT=Production

   [Install]
   WantedBy=multi-user.target

1. 保存并退出，然后启用并启动服务：

   sudo systemctl enable mywebapi
   sudo systemctl start mywebapi

4. 验证部署

现在，你可以通过浏览器访问你的域名或IP地址，应该能够看到Angular2应用程序的界面，并且所有API请求都将通过DotNetCore后端处理。

5. 总结

通过以上步骤，我们成功地在CentOS 7上部署了一个基于DotNetCore和Angular2的Web应用程序。从环境准备到项目创建，再到生产环境的部署，本文详细介绍了每一步的操作。希望这篇文章能够帮助你顺利部署自己的DotNetCore和Angular2应用程序。