چگونه یک پروژه Elm Land برای تولید بسازیم

Summarize this content to 400 words in Persian Lang
پس از تکمیل پروژه آزمایشی خود در Keycloak OAuth2 Token Exchange، تصمیم گرفتم این ایده را گسترش دهم و یک پروژه آزمایشی جدید به نام my-ai-doctor ایجاد کردم. برخلاف نسخه آزمایشی قبلی، که بر روی یکپارچه سازی باطن متمرکز بود، این پروژه از Elm برای رابط کاربری و Docker Compose برای اجرای هر شش سرور به صورت محلی استفاده می کند: سرور Keycloak، سرور API، و سرورهای وب SPA برای MyDoctor و MyHealth.

تعمیر کامپایلر Elm برای لینوکس ARM 64

اولین چالش ساخت پروژه Elm Land و استقرار آن در کانتینرهای Docker بود. در ابتدا، من از یک Dockerfile استاندارد برای ساخت پروژه Elm UI خود استفاده کردم، اما به زودی با یک مانع مواجه شدم:

> [build 8/9] RUN npm install:
8.709 npm error code 1
8.709 npm error path /app/node_modules/elm
8.709 npm error command failed
8.709 npm error command sh -c node install.js
8.709 npm error — ERROR ———————————————————————–
8.709 npm error
8.709 npm error I am detecting that your computer (linux_arm64) may not be compatible with any
8.709 npm error of the official pre-built binaries.
8.709 npm error
8.709 npm error I recommend against using the npm installer for your situation. Check out the
8.709 npm error alternative installers at https://github.com/elm/compiler/releases/tag/0.19.1
8.709 npm error to see if there is something that will work better for you.
8.709 npm error
8.709 npm error From there I recommend asking for guidance on Slack or Discourse to find someone
8.709 npm error who can help with your specific situation.
8.709 npm error
8.709 npm error ——————————————————————————–

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس از بررسی، متوجه شدم که آخرین کامپایلر Elm (نسخه 0.19.1) از linux_arm64 پشتیبانی نمی کند. این بدان معناست که می‌توانم پروژه‌های Elm را بر روی Apple Mac Mini Pro خود به صورت بومی بسازم و اجرا کنم، اما نه در Docker. خوشبختانه، Simon Lydell و Mario Rogic نسخه جدیدی از بسته elm npm را ایجاد کردند که از Linux ARM 64 پشتیبانی می کند. بر اساس این بحث، راه حل این بود که بسته elm در من لغو شود. package.json با افزودن این خطوط فایل کنید:

“overrides”: {
“elm”: “npm:@lydell/elm”
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این جایگزین ماژول Elm npm در دانلود محلی می شود node_modules دایرکتوری با @lydell/elm ماژول، به کامپایلر غیر رسمی Elm اجازه می دهد تا به درستی روی پلت فرم لینوکس ARM64 کار کند.

انتقال متغیرهای محیطی به کد UI

هنگام توسعه سیستم AI Doctor به صورت محلی، UI SPA به API باطن متصل می شود http://api.mydoctor:8081/api/v1/records. با این حال، هنگام اجرای کل نسخه ی نمایشی در داکر، API از طریق پورت 80 با کمک یک پروکسی معکوس Nginx قابل دسترسی است: http://api.mydoctor/api/v1/records. چالش این بود که چگونه به صورت پویا URL API Backend را در کد Elm تغییر دهیم.

مستندات Elm Land به طور خلاصه به متغیرهای محیطی اشاره می کند، اما بدون مثال های دقیق. من یک وبلاگ مفید پیدا کردم، به نام Deploying an Elm Frontend to Cloudflare Pages، که نکاتی را در مورد نحوه انتقال متغیرهای محیطی به برنامه Elm Land ارائه می کرد. پس از مطالعه مجدد اسناد Elm Land (اینجا و اینجا)، متوجه شدم که انتقال مقادیر مختلف به عنوان متغیرهای محیطی به کد Elm کاملاً ساده است.

در interop.js ما می توانیم متغیرهای محیطی را انتخاب کرده و به کد Elm به عنوان ارسال کنیم Flags. به عنوان مثال:

export const flags = ({ env }) => {
return {
apiBaseUrl: env.API_BASE_URL
};
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا، URL پایه API backend را به عنوان یک فیلد در آن ارسال می کنیم flags، که سپس در آن ذخیره می شود Shared.Model.

ابتدا باید ماژول Shared را سفارشی کنم:

elm-land customize shared

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این دستور سه فایل را از آن جابجا می کند .elm-land به src پوشه: Shared.elm، Shared/Model.elm و Shared/Msg.elm.

بعد، فیلد را اضافه کردم apiBaseUrl به Shared.Model.Model. در اینجا کد برای Shared/Model.elm:

module Shared.Model exposing (Model)

type alias Model =
{ apiBaseUrl : String
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در Shared.elm، پرچم ها را رمزگشایی کردم و گذشتم apiBaseUrl به Shared.Model.Model:

— FLAGS

type alias Flags =
{ apiBaseUrl : String
}

decoder : Json.Decode.Decoder Flags
decoder =
Json.Decode.map Flags
(Json.Decode.field “apiBaseUrl” Json.Decode.string)

— INIT
type alias Model =
Shared.Model.Model

init : Result Json.Decode.Error Flags -> Route () -> ( Model, Effect Msg )
init flagsResult route =
( { apiBaseUrl =
case flagsResult of
Ok flags -> flags.apiBaseUrl
Err _ -> “”
}
, Effect.none
)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را Shared.Model.Model (یا Shared.Model) سپس به هر صفحه منتقل می شود، بنابراین apiBaseUrl هر زمان که نیاز به فراخوانی باطن API داشته باشیم قابل دسترسی است. کد نمونه را در Pages/Home_.elm

تنظیم متغیرهای محیطی

برای تنظیم متغیرهای محیطی مانند API_BASE_URL، ابتدا باید آنها را در قسمت اعلام کنید elm-land.json فایل تحت app.env، به عنوان:

{
“app”: {
“env”: [ “API_BASE_URL” ] }
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به دلایل امنیتی، همه متغیرهای محیطی به طور پیش فرض از برنامه Elm Land شما پنهان هستند.هنگامی که می خواهید یک متغیر محیطی را با برنامه خود به اشتراک بگذارید، فیلد app.env چک یک نقطه است

من را ببینید elm-land.json فایل، و من هم اعلام کردم AUTH_SERVER_URL برای آدرس سرور Keycloak و WS_BASE_URL برای آدرس WebSocket ربات چت باطن.

سپس، شما می توانید عبور کنید API_BASE_URL در خط فرمان هنگام توسعه محلی:

API_BASE_URL=http://api.mydoctor:8081/api/v1 elm-land server

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای ساخت های تولیدی، از ENV بخشنامه در Dockerfile مانند این:

ENV API_BASE_URL=”http://api.mydoctor/api/v1″

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

من را ببینید Dockerfile برای برنامه mydoctor-ui.

می توانید تمام کد منبع را در https://github.com/jiwhiz/my-ai-doctor پیدا کنید. این هنوز یک کار در حال پیشرفت است. لطفا اگر فکر می کنید این وبلاگ مفید است به من اطلاع دهید.

 > [build 8/9] RUN npm install:                                                                                                                             
8.709 npm error code 1                                                                                                                                     
8.709 npm error path /app/node_modules/elm                                                                                                                 
8.709 npm error command failed                                                                                                                             
8.709 npm error command sh -c node install.js                                                                                                              
8.709 npm error -- ERROR -----------------------------------------------------------------------
8.709 npm error
8.709 npm error I am detecting that your computer (linux_arm64) may not be compatible with any
8.709 npm error of the official pre-built binaries.
8.709 npm error
8.709 npm error I recommend against using the npm installer for your situation. Check out the
8.709 npm error alternative installers at https://github.com/elm/compiler/releases/tag/0.19.1
8.709 npm error to see if there is something that will work better for you.
8.709 npm error
8.709 npm error From there I recommend asking for guidance on Slack or Discourse to find someone
8.709 npm error who can help with your specific situation.
8.709 npm error
8.709 npm error --------------------------------------------------------------------------------

"overrides": {
  "elm": "npm:@lydell/elm"
}

export const flags = ({ env }) => {
  return {
    apiBaseUrl: env.API_BASE_URL
  };
};

elm-land customize shared

module Shared.Model exposing (Model)

type alias Model =
  { apiBaseUrl : String
  }

-- FLAGS

type alias Flags =
  { apiBaseUrl : String
  }

decoder : Json.Decode.Decoder Flags
decoder =
  Json.Decode.map Flags
    (Json.Decode.field "apiBaseUrl" Json.Decode.string)

-- INIT
type alias Model =
  Shared.Model.Model

init : Result Json.Decode.Error Flags -> Route () -> ( Model, Effect Msg )
init flagsResult route =
  ( { apiBaseUrl =
        case flagsResult of
          Ok flags -> flags.apiBaseUrl
          Err _ -> ""
    }
  , Effect.none
  )

{
  "app": {
    "env": [ "API_BASE_URL" ]
  }
}

API_BASE_URL=http://api.mydoctor:8081/api/v1 elm-land server

ENV API_BASE_URL="http://api.mydoctor/api/v1"