كيفية نشر تطبيق Shopify على خادم Linux/Nginx باستخدام pm2 على السحابة

يرشدك هذا الدليل خطوة بخطوة إلى نشر تطبيق Shopify الخاص بك على نطاق مخصّص باستخدام Nginx وpm2.

المتطلبات المسبقة:

• خادم مثبّت عليه Nginx
• تثبيت Node.js وnpm
• تطبيق Shopify تم إنشاؤه وإعداده

الخطوات:

إعداد Nginx:

1. أضف مقتطف الكود المرفق إلى ملف إعدادات Nginx. استبدل <SUB_LOCATION_OF_YOUR_APP> بالمسار الفرعي الفعلي الذي سيكون تطبيقك متاحاً عليه ضمن نطاقك (مثل /app).
2. يعمل هذا الجزء من الكود كوكيل عكسي (reverse proxy) يمرّر الطلبات إلى تطبيقك الذي يعمل على المنفذ 5000.
3. أعد تشغيل Nginx بعد إجراء تغييرات الإعدادات باستخدام sudo service nginx restart.

location /SUB_LOCATION_OF_YOUR_APP {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_pass http://127.0.0.1:5000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    #make sure the buffers are enough to handle session data
    proxy_buffers 8 256k;
    proxy_buffer_size 256k;
    proxy_busy_buffers_size 256k;
}

تثبيت pm2 وإعداده:

1. ثبّت pm2 على مستوى النظام باستخدام npm install pm2 -g.
2. هيّئ pm2 باستخدام pm2 init.
3. حدّث ملف إعدادات pm2 الذي تم إنشاؤه (app.config.js) بالتفاصيل التالية:
4. استبدل YOUR_APP_NAME باسم وصفي لتطبيقك.
5. اضبط الخاصية script على npm start لتشغيل تطبيقك عبر npm.
6. عرّف متغيرات البيئة ضمن الخاصية env:

• NODE_ENV: اضبطه على "production" لبيئة الإنتاج.
• SHOPIFY_APP_URL: استبدله بـ https://YOUR_DOMAIN/SUB_LOCATION_OF_YOUR_APP.
• SHOPIFY_API_KEY: استبدله بمفتاح Shopify API الخاص بك.
• SHOPIFY_API_SECRET: استبدله بالرمز السري لـ Shopify API الخاص بك.
• SCOPES: استبدله بالصلاحيات المطلوبة لتطبيقك (تجدها في shopify.app.toml).
• PORT: اضبطه على 5000 ليتطابق مع المنفذ المحدد في Nginx.

module.exports = {
    apps: [
        {
            name: "YOUR_APP_NAME",
            script: "npm start",
            env: {
                NODE_ENV: "production",
                SHOPIFY_APP_URL: "https://YOUR_DOMAIN/SUB_LOCATION_OF_YOUR_APP",
                SHOPIFY_API_KEY: "CLIENT_ID",
                SHOPIFY_API_SECRET: "CLIENT_SECRET",
                SCOPES: "SCOPES", //from shopify.app.toml
                PORT: "5000",  //same port as configured in nginx
            },
        },
    ],
};

تشغيل التطبيق:

شغّل تطبيقك باستخدام pm2 ثم أعد تشغيل Nginx: pm2 start app.config.cjs

sudo service nginx restart

إذا واجهت أخطاء متعلقة بوحدات ESM، فأعد تسمية ملف الإعدادات إلى app.config.cjs.

التحقق من عمل التطبيق:

تحقق من وجود أخطاء في سجلات pm2 باستخدام pm2 logs.

إذا كان كل شيء يعمل بشكل صحيح، فستظهر لك الصفحة الافتراضية لتطبيقك عند زيارة https://YOUR_DOMAIN/SUB_LOCATION_OF_YOUR_APP.

تحديث إعدادات تطبيق Shopify:

في لوحة تحكم Shopify Partners، حدّث رابط التطبيق (App URL) إلى https://YOUR_DOMAIN/SUB_LOCATION_OF_YOUR_APP.

حدّث روابط إعادة التوجيه الخاصة بتطبيقك إلى https://YOUR_DOMAIN/SUB_LOCATION_OF_YOUR_APP/auth/callback وأي مسارات أخرى ذات صلة.

أضف basename إلى ملف vite.config.ts ضمن إعدادات remix:

const isProduction = process.env.NODE_ENV === "production";
export default defineConfig({
    ...
    remix({
        basename: !isProduction ? "/" : "SUB_LOCATION_OF_YOUR_APP",
        ignoredRouteFiles: ["**/.*"],
    }),
    ...
}) satisfies UserConfig;

أضف base إلى ملف vite.config.ts ضمن الإعدادات الرئيسية:

export default defineConfig({
    ...
    base: !isProduction ? "/" : "SUB_LOCATION_OF_YOUR_APP/build/client/",
    ...
}) satisfies UserConfig;

اختبار التكامل:

سجّل الدخول إلى متجرك التجريبي وتحقق من أن التطبيق يُحمَّل من نطاقك المخصّص (https://YOUR_DOMAIN/SUB_LOCATION_OF_YOUR_APP) بدلاً من نفق Cloudflare.

إعداد اختياري لـ Nginx (للترويسات الكبيرة):

إذا واجهت مشكلات مع ترويسات HTTP كبيرة الحجم في Nginx، فأضف الأسطر التالية إلى كتلة server:

http2_max_field_size 256k;
http2_max_header_size 256k;

يؤدي ذلك إلى زيادة الحجم المسموح به لترويسات HTTP وحقولها.

---

باتباع هذه الخطوات، ستتمكن من نشر تطبيق Shopify الخاص بك بنجاح على نطاقك المخصّص باستخدام Nginx وpm2.

ارتقِ بمتجرك على Shopify إلى المستوى التالي. دع فريقنا يطوّر لك تطبيقات مخصّصة تعزّز المبيعات، وتؤتمت المهام، وتحسّن تجربة العملاء.

تواصل مع فريق المبيعات