Guide to Setting Up, Building, and Deploying an ASP.NET Core + Angular2 Project on CentOS

This article, authored by Tencent senior engineer Qu Zhengbin, provides a step‑by‑step tutorial for installing the development environment, building, and deploying an open‑source ASP.NET Core + Angular2 project template on a CentOS 7.1 server.

Environment Installation

1. Install .NET Core

Follow the official guide (https://www.microsoft.com/net/core#linuxcentos). The project requires .NET Core 1.0.1, so install both 1.1 (default) and 1.0.1.

curl -sSL -o dotnet.tar.gz https://go.microsoft.com/fwlink/?LinkID=827529

tar zxf dotnet.tar.gz -C /opt/dotnet

2. Disable Firewall

systemctl stop firewalld.service # stop firewall

systemctl disable firewalld.service # prevent firewall from starting on boot

For learning purposes the firewall can be disabled; production should use iptables.

3. Install Nginx

yum install nginx

systemctl start nginx

Test with curl http://127.0.0.1 to ensure HTML is returned.

Project Build

1. Build the Project

Refer to the generator documentation (https://www.npmjs.com/package/generator-aspnetcore-angular2). Use tnpm if npm access is restricted.

npm install -g yo

npm install -g generator-aspnetcore-angular2

2. Create the Project

Select the advanced template in the generator UI.

3. Compile the Project

Run dotnet restore , then let webpack bundle Angular2, and start the application locally.

4. Local Access

Open http://localhost:3000/ in a browser.

Deployment

1. Publish Script

dotnet publish

This executes the project.json scripts, e.g.:

"scripts": {

"prepublish": [ "npm install", "npm run rebuild-sass", "npm run build" ],

"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]

}

2. Package the Output

The publish folder is \test\src\test\bin\Debug\netcoreapp1.0\publish . Compress it into a zip file.

3. Upload to the Linux Server

Use an FTP tool (e.g., Xshell + Xftp) to transfer the zip, then unzip:

unzip test.zip

4. Start the Application

set ASPNETCORE_ENVIRONMENT=Development

dotnet test.dll server.urls=http://127.0.0.1:3000/

Note: the address uses the explicit IP because of IPv6 binding issues.

5. Test and Fix

If the page shows an error, edit Views\Home\Index.cshtml and remove the prerender attributes:

<app-root asp-prerender-module="wwwroot/src/server" asp-prerender-webpack-config="webpack.config.js">

Loading...

</app-root>

6. Configure Nginx Reverse Proxy

Expose port 80 and proxy to port 3000.

proxy_pass http://127.0.0.1:3000;

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-Real-IP $remote_addr;

proxy_set_header REMOTE-HOST $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

Test the Nginx configuration with /usr/sbin/nginx -t and restart:

service nginx restart

7. Verify the Result

Access the server’s external IP on port 80; the application should be reachable.

Other Notes

The project is intended for learning purposes, covering .NET Core, Angular2, npm, webpack, and Linux.