Deployment on IIS

อัพเดทคอนฟิกให้เป็นของ Production

เพื่อให้เห็นภาพมากยิ่งขึ้น ขอกำหนดตัวอย่าง Url สำหรับเว็บแอพฯ และเว็บเซอร์วิสดังนี้

เว็บแอพฯ: https://appserver2.cdg.co.th/demo
เว็บเซอร์วิส: https://appserver2.cdg.co.th/demo-service

Front-end (ClientApp)

ปรับแก้ค่าของ webServiceUrl และ callbackUri ตามตัวอย่างคอนฟิกด้านล่างนี้

File: environments/environment.prod.ts

import { AxAuthenticationConfig } from '@atlasx/core/authentication'
import { ApplicationConfig } from '../app/core/config/application.config'

export const environment: ApplicationConfig & AxAuthenticationConfig = {
  production: true,
  webServiceUrl: 'https://appserver2.cdg.co.th/demo-service', // <<< Edit url

  // OAuth client information.
  clientId: 'random-some-text-ajskdlf;',
  clientSecret: '02FZf68/Xff0hrSQgc7Je5CNgdjaSgltNU4gb3AbJ9A=',

  // When use full secure authentication, application are required
  // the callbackUri property.
  fullSecureAuthentication: true,
  callbackUri: 'https://appserver2.cdg.co.th/demo/callback', // <<< Edit url

  // If not use full secure authentication, application are required
  // the loginUri property.
  // fullSecureAuthentication: false,
  // loginUri: 'https://portal-atlasx.cdg.co.th/axwa-demo/login'
}

import { AxAuthenticationConfig } from '@atlasx/core/authentication'
import { ApplicationConfig } from '../app/core/config/application.config'

export const environment: ApplicationConfig & AxAuthenticationConfig = {
  production: true,
  webServiceUrl: 'https://appserver2.cdg.co.th/demo-service', // <<< Edit url

  // OAuth client information.
  clientId: 'random-some-text-ajskdlf;',
  clientSecret: '02FZf68/Xff0hrSQgc7Je5CNgdjaSgltNU4gb3AbJ9A=',

  // When use full secure authentication, application are required
  // the callbackUri property.
  fullSecureAuthentication: true,
  callbackUri: 'https://appserver2.cdg.co.th/demo/callback', // <<< Edit url

  // If not use full secure authentication, application are required
  // the loginUri property.
  // fullSecureAuthentication: false,
  // loginUri: 'https://portal-atlasx.cdg.co.th/axwa-demo/login'
}

Back-end (ServerApp)

ปรับแก้ค่าของ WebServiceEndpoint ตามตัวอย่างคอนฟิกด้านล่างนี้

appsettings.json

{
  "Logging": {...},
  "AllowedHosts": "*",
  "WebServiceSettings": {
    "General": {
      "WebServiceEndpoint": "https://appserver2.cdg.co.th/demo-service" // <<< Edit url
    },
    "DataParser": {
      "Paths": [
        "/api/AppAuthen",
        "/api/AppData",
        "/api/reports",
        "/AppLogin"
      ]
    }
  }
}

{
  "Logging": {...},
  "AllowedHosts": "*",
  "WebServiceSettings": {
    "General": {
      "WebServiceEndpoint": "https://appserver2.cdg.co.th/demo-service" // <<< Edit url
    },
    "DataParser": {
      "Paths": [
        "/api/AppAuthen",
        "/api/AppData",
        "/api/reports",
        "/AppLogin"
      ]
    }
  }
}

บิวต์แอพฯ และนำไปติดตั้งบน IIS

ก่อนที่เราจะทำการ Build และนำไป Deploy ต้องการการ ติดตั้ง .NET Core Hosting Bundle บนเครื่องเว็บเซิร์ฟเวอร์ก่อน กรณีติดตั้งบนเครื่องเซิร์ฟเวอร์กลางจะติดตั้งมาให้เรียบร้อย ไม่จำเป็นต้องดำเนินการขั้นตอนนี้ จากนั้นทำการสร้างแอพบน IIS ให้เรียบร้อย แล้วทำการ Build โค้ดของ Back-end และ Front-end เพื่อนำไป Deploy ตามขั้นตอนดังต่อไปนี้

Build back-end ด้วยคำสั่ง

dotnet publish --configuration Release

dotnet publish --configuration Release

Build front-end ด้วยคำสั่ง

npx ng build --prod --base-href="/demo/" --output-path="..\ServerApp\bin\Release\net5.0\publish\ClientApp"

npx ng build --prod --base-href="/demo/" --output-path="..\ServerApp\bin\Release\net5.0\publish\ClientApp"

หลังจาก Build ทั้ง Back-end และ Front-end เสร็จ เมื่อเราเปิดโฟล์เดอร์ ServerApp\bin\Release\net5.0\publish จะเห็นโครงสร้างโฟล์เดอร์ดังนี้

publish
│───ClientApp
│───Config
│───License
│───runtimes
└───wwwroot
│   appsettings.Development.json
│   appsettings.json
│   AtlasX.Engine.dll
│   ...

publish
│───ClientApp
│───Config
│───License
│───runtimes
└───wwwroot
│   appsettings.Development.json
│   appsettings.json
│   AtlasX.Engine.dll
│   ...

นำโค้ดที่ได้จากการ Build ในโฟล์เดอร์ publish ทั้งหมดไปวางไว้ในโฟล์เดอร์ที่เราเตรียมไว้บนเว็บเซิร์ฟเวอร์
เปิดเว็บบราวเซอร์แล้วเข้าไปที่ https://appserver2.cdg.co.th/demo จากนั้นทดลองเล่นเว็บแอพฯ ของเราว่าสามารถทำงานได้ตามปกติหรือไม่