اپ تک‌صفحه‌ای Angular

هاست Angular برای اپ‌های سازمانی

اپ Angular با ng build ساخته و خروجی آن با nginx سرو می‌شود. فقط مسیر خروجی پروژه را اعلام کنید.

تشخیص
@angular/core و angular.json
بیلد
ng build
خروجی
dist/<project>/browser
پورت
80
لوگوی Angular

Angular، بیلد شده و سبک

وجود angular.json و @angular/core یعنی پروژه Angular است. خروجی ng build از نسخه‌ی 17 به بعد در dist/<نام پروژه>/browser قرار می‌گیرد؛ همین پوشه با nginx سرو می‌شود.

برای Angular Router حالت SPA را روشن کنید تا رفرش مسیرهای داخلی به index.html برگردد.

مناسب برای

  • اپ سازمانی و پنل‌های بزرگ
  • سامانه‌های داخلی با Angular Router
  • رابط کاربری جدا از API
  • داشبورد با Angular Material

مسیر بیلد Angular

  1. تشخیص

    angular.json و @angular/core در ریشه.

    angular.json
  2. نصب و بیلد

    وابستگی‌ها نصب و بیلد production اجرا می‌شود.

    ng build
  3. بسته‌بندی

    پوشه‌ی browser در ایمیج nginx قرار می‌گیرد.

    dist/my-app/browser
  4. سرو

    nginx فایل‌ها را روی پورت 80 سرو می‌کند.

    nginx :80

خروجی یک استقرار واقعی

sakoocloud deploy
sakoocloud deploy
✔ Packed 2.7MB
✔ Source uploaded
ℹ Build started · dep_7k2m9q
#4 [builder 1/5] FROM node:22-alpine
#6 [builder 3/5] RUN npm ci
#8 [builder 4/5] RUN npm run build
#10 [stage-1 2/2] COPY dist/my-app/browser /usr/share/nginx/html
#12 exporting to image
✔ Deployed — app is running.
→ https://my-angular.sakooapps.ir

تنظیم پروژه

مسیر خروجی را دقیق بنویسید؛ نام پروژه همان است که در angular.json آمده.

{
  "runtime": "angular",
  "outputDir": "dist/my-app/browser",
  "spa": true
}

تنظیمات

پوشه‌ی خروجی

نسخه‌ی AngularoutputDir
17 و بالاترdist/<project>/browser
16 و پایین‌ترdist/<project>

پکیج‌منیجر

ابزار از روی لاک‌فایل انتخاب می‌شود و نصب همیشه دقیقاً همان نسخه‌های قفل‌شده را می‌گیرد.

لاک‌فایلابزاردستور نصب
package-lock.jsonnpmnpm ci
yarn.lockyarnyarn install --frozen-lockfile
pnpm-lock.yamlpnpmpnpm install --frozen-lockfile

همراه هر استقرار

این‌ها به رانتایم بستگی ندارند و برای هر اپ روی سکو کلود فعال‌اند. بعضی، مثل مقیاس‌دهی خودکار و کران‌جاب، به پلن بستگی دارند.

خطاهای رایج

با رفرش یک مسیر داخلی، ۴۰۴ برمی‌گردد

علتمسیرهایی مثل /dashboard فایل واقعی ندارند و روتر سمت مرورگر آن‌ها را می‌سازد.

راه‌حلدر sakoocloud.json حالت SPA را روشن کنید تا مسیرهای ناشناخته به index.html برگردند.

sakoocloud.json
{
  "outputDir": "dist/my-app/browser",
  "spa": true
}

صفحه‌ی سفید یا فایل‌ها پیدا نمی‌شوند

علتoutputDir به dist/<project> اشاره می‌کند ولی Angular جدید خروجی را در زیرپوشه‌ی browser می‌ریزد.

راه‌حل/browser را به انتهای outputDir اضافه کنید.

بیلد با خطای حافظه متوقف می‌شود

علتبیلد پروژه‌های بزرگ Angular حافظه‌ی زیادی می‌گیرد.

راه‌حلحافظه را بیشتر کنید یا مصرف برنامه را پایین بیاورید.

terminal
sakoocloud apps scale --memory 1Gi

پرسش‌های متداول

Angular SSR پشتیبانی می‌شود؟

این رانتایم برای خروجی تک‌صفحه‌ای است. برای Angular SSR از رانتایم Node.js با اسکریپت start سرور SSR استفاده کنید.

کدام نسخه‌های Node.js برای بیلد استفاده می‌شوند؟

Node.js 20، 22 و 24؛ نسخه را در .nvmrc یا engines اعلام کنید.

environment.prod.ts کجا خوانده می‌شود؟

در زمان بیلد. مقادیرش داخل باندل قرار می‌گیرد، پس رمز و کلید محرمانه در آن نگذارید.

جزئیات بیشتر در راهنمای Angular در مستندات و مرجع CLI.

سریع‌ترین مسیر از کد تا انتشار.

ابتدا ابزار خط فرمان را نصب کنید، سپس همین‌جا امتحان کنید. (بنویسید، یا یکی از پیشنهادهای پایین ترمینال را بزنید)

~/projects/my-app
امتحان کنید