ASP.NET Core + Angular + Docker

ASP.NET Core

ASP.NET Core là gì:
Nôm na là bạn có thể viết ASP.NET trên các nền tảng Windows, Mac, Linux. Điều mà trước đây khó có một lập trình viên nào có thể nghĩ đến. Cái quan trọng là ASP.NET Core được thiết kế để tích hợp một cách liên tục với nhiều client-side frameworks (frontend) bao gồm AngularJS, KnockoutJS và Bootstrap.
Cài đặt:
Download và cài đặt .NET Core: https://www.microsoft.com/net/learn/dotnet/hello-world-tutorial
Sau khi cài đặt xong chạy lệnh $ dotnet --version để kiểm tra.

Tạo wep app với backend dùng .NET Core và frontend dùng Angular

Tạo folder chứa project $ mkdir dotnet-angular. Trong ví dụ này mình làm trên MacOS

Chuyển vào folder dotnet-angular $cd dotnet-angular

Chạy lệnh sau $dotnet new angular

Dùng Visual Code để mở folder dotnet-angular: Phần màu đỏ chính là source code của frontend (Angular), phần màu xanh lá chính là source code của backend (.NET Core)

Chúng ta cần phải chỉnh sữa một chút xíu để web app này có thể chạy được:
– Frontend: cd vào folder ClientApp và chạy lệnh nmp install để kéo dependency cho frontend $cd ClientApp && npm install .Lúc này folder ClientApp sẽ có thêm folder mới node_modules.
Dùng Visual Code, mở file ClientApp/src/app/fetch-data/fetch-data.component và replace đoạn code sau:

constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }

Bởi đoạn code này:

constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<WeatherForecast[]>('http://localhost:5000/api/SampleData/WeatherForecasts').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }

 

– Backend: Do backend và frontend chạy trên 2 port khác nhau, nên sẽ bị lỗi Access-Control-Allow-Origin, để by pass lỗi này trên backend cần enable CORS, bằng cách thêm dòng code sau vào file Startup.cs, đồng thời xoá dòng app.UseHttpsRedirection();

Khởi chạy ứng dụng bằng lệnh $dotnet run

Ứng dụng này sẽ chạy trên 2 port:
– Backend: chạy trên port 5000. Thử link sau trên Chrome “”
– Frontend: kiểm tra port frontend

Nhập link “http://localhost:57314” sau vào Chrome. Lưu ý port này sẽ thay đổi vào thời điểm mình chạy lệnh  $dotnet run

Publish .NET Core

Phần trên là để chạy debug. Để publish và host lên môi trường Production thì cần phải chạy lệnh sau  $dotnet publish . Default folder publish sẽ nằm trong bin/Debug/netcoreapp2.1/publish/

Code backend sau khi publish sẽ build thành các file dll + các file config

Còn code frontend thì năm trong folder ClientApp/dist

Để run code đã build thì cd vào bin/Debug/netcoreapp2.1/publish/ sau đó dùng lệnh  $dotnet dotnet-angular.dll

Vào Chrome với link “http://localhost:5000”. Lúc này thì frontend và backend đã chạy trên cùng 1 port 5000.

Deploy wep app lên Docker

Có 2 cách:

Cách 1: Đơn giản nhất. Sau khi publish xong, thì tạo file Dockerfile trong folder publish.

FROM microsoft/dotnet:aspnetcore-runtime
# Create app directory
WORKDIR /app
# Bundle app src
COPY . .

ENTRYPOINT ["dotnet", "dotnet-angular.dll"]

Cách 2: Khó hơn, tạo file Dockerfile trong source-code (dùng file .dockerignore để bỏ qua những folder không cần thiết)

FROM microsoft/dotnet:sdk AS build-env
WORKDIR /app

RUN apt-get update -yq && apt-get upgrade -yq && apt-get install -yq curl git nano
RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && apt-get install -yq nodejs build-essential
RUN npm install -g npm

# Copy csproj and restore as distinct layers
COPY *.csproj ./
RUN dotnet restore

# Copy everything else and build
COPY . ./

WORKDIR /app/ClientApp

RUN npm install

WORKDIR /app

RUN dotnet publish -c Release -o out

# Build runtime image
FROM microsoft/dotnet:aspnetcore-runtime
WORKDIR /app
COPY --from=build-env /app/out .
ENTRYPOINT ["dotnet", "dotnet-angular.dll"]

Chạy lệnh build $ docker build --rm -f Dockerfile -t dotnet-angular:latest .

Chạy lệnh run docker run --rm -d -p 5000:80 dotnet-angular:latest

Và đây là thành quả

Leave a Reply

Your email address will not be published. Required fields are marked *