chieftan frontend

酋長前端

Aurelia Web應用程序，該應用程序消耗了任務自動化的酋長API

入門

要設置開發環境，您將需要安裝在本地計算機上的Node.js。您可以從這裡下載它。

完成此操作後，克隆酋長存儲庫並運行npm install以安裝Chieftan要求的各種依賴關係。

發展

開發環境圍繞Webpack構建，並啟用了熱模塊重新裝載，從而允許（近）實時更新樣式表和代碼（如果尚未運行），則沒有頁面重新加載。您可以通過運行npm run server:dev從項目文件夾中運行開發服務器，然後在瀏覽器中訪問http://localhost:3002 。

部署

部署涉及構建應用程序的生產包，然後將dist文件夾的內容放在服務器上。要構建生產包，只需運行npm build並等待WebPack完成即可。

如果您希望為前端錯誤啟用Sentry錯誤報告，則應將SENTRY_DSN環境變量設置為公共Sentry DSN。您也可以通過設置VERSION環境變量來標記發布版本。

示例構建腳本

SENTRY_DSN= " https://[email protected]/1 " VERSION= " $( git rev-parse HEAD ) " npm run build

此構建腳本將使用當前的Git SHA和配置Sentry錯誤報告標記版本。

不錯的網址

值得注意的是，如果您希望使用html5 push state api用於NICE URL，則需要配置Web服務器以服務於所有404s的index.html文件。

使用nginx可以使用try_files指令輕鬆完成這一點。

示例NGINX配置

 server {
  listen :80 default;
  hostname chieftan.emss.co.za;

  root /var/www/chieftan/dist;

  # Serve the frontend
  location / {
    try_files $url $url.html index.html;
  }

  # Pass API requests to the application instance (basic)
  location /api {
    proxy_pass http://127.0.0.1:8000;
  }
}

Docker圖像

您也可以使用Docker部署酋長前端，以構建圖像，只需運行npm build && docker build .使用最新編譯的應用程序包構建容器映像。

該容器基於nginx:alpine ，使其非常輕巧，默認情況下會在端口3000上收聽。您可以按照NGINX Docker圖像頁面上的說明進行配置不同，或將其放置在生產部署中的反向代理後面。