تخصيص نطاق لتطبيقات Nodejs عن طريقة Laravel valet

هل واجه أحدكم مشكلة أثناء تطوير تطبيق Node.js، حيث يرغب في تخصيص نطاق خاص به بدلاً من استخدام localhost:3000 كعنوان؟ هل قضى الكثير من الوقت في البحث عن حلول معقدة لهذه المشكلة؟ إذاً، دعوني أقدم لكم حلاً بسيطاً عن طريق Laravel Valet.

ماهو Laravel Valet ؟!

Laravel Valet هو بيئة تطوير لنظامي التشغيل macOS و Linux مصممة خصيصاً لمطوري Laravel. يوفر Laravel Valet طريقة سهلة وسلسة لإعداد بيئات تطوير محلية لمشاريع Laravel. يستخدم Valet خادمًا خفيفًا مثل Nginx و dnsmasq لخدمة تطبيقات Laravel الخاصة بك، مما يجعله سريعًا وفعّالاً.

تخصيص نطاق محلي ليعمل علي PORT خاص،

الطريقة الأولي:

قم بالذهاب الي اعدادات valet

cd ~/.config/valet

أنشأ اعدادات لنطاق خاص بك جديد:

valet nano you-own-domain.conf

داخل هذا الملف قم بوضع هذه الاعدادات :

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {
    listen          80;             # the port nginx is listening on
    server_name     you-own-domain.test;    # setup your domain here

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        expires $expires;

        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000; # set the adress of the Node.js instance here
    }
}

مع مراعات تغير you-own-domain بما باسم النطاق الخاص بك.

بعد ذلك قم بتشغيل تطبيقك علي nodejs وليكن بهذا الأمر علي سبيل المثال:

npm run dev

قم باعادة تشغيل valet

valet restart

الآن سيعمل تطبيقك علي النطاق المحلي الذي اخترته you-own-domain.test

الطريقة الثانية:

وهي أسهل بكثير من الأولي، فقط تحتاج منا الي سطر واحد

يمكنك القيام بذلك بسهولة باستخدام Valet Proxy. فمثلاً، قم بتشغيل الأمر التالي:

valet proxy --secure you-own-domain.test http://localhost:3000

ببساطة، سيقوم Valet بإنشاء بروكسي بين النطاق الخاص بك وتطبيق Node.js الذي يعمل على منفذ رقم 3000.

وبالفعل عوضا عن المجهود الذي بذلته في الخطوه الأولي ، ستقوم valet بانشاء nginx proxy عوضا عنك بالشكل التالي كمثال:

# valet stub: secure.proxy.valet.conf

server {
    listen 127.0.0.1:80;
    #listen 127.0.0.1:80; # valet loopback
    server_name you-own-domain.test www.you-own-domain.test *.you-own-domain.test;
    return 301 https://$host$request_uri;
}

server {
    listen 127.0.0.1:443 ssl http2;
    #listen 127.0.0.1:443 ssl http2; # valet loopback
    server_name you-own-domain.test www.you-own-domain.test *.you-own-domain.test;
    root /;
    charset utf-8;
    client_max_body_size 128M;
    http2_push_preload on;

    location /41c270e4-5535-4daa-b23e-c269744c2f45/ {
        internal;
        alias /;
        try_files $uri $uri/;
    }

    ssl_certificate "/Users/me/.config/valet/Certificates/you-own-domain.test.crt";
    ssl_certificate_key "/Users/maherelgamil/.config/valet/Certificates/you-own-domain.test.key";

    access_log off;
    error_log "/Users/maherelgamil/.config/valet/Log/you-own-domain.test-error.log";

    error_page 404 "/Users/maherelgamil/.composer/vendor/laravel/valet/server.php";

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header   Host              $host;
        proxy_set_header   X-Real-IP         $remote_addr;
        proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Client-Verify   SUCCESS;
        proxy_set_header   X-Client-DN       $ssl_client_s_dn;
        proxy_set_header   X-SSL-Subject     $ssl_client_s_dn;
        proxy_set_header   X-SSL-Issuer      $ssl_client_i_dn;
        proxy_set_header   X-NginX-Proxy true;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "upgrade";
        proxy_http_version 1.1;
        proxy_read_timeout 1800;
        proxy_connect_timeout 1800;
        chunked_transfer_encoding on;
        proxy_redirect off;
        proxy_buffering off;
    }

    location ~ /\.ht {
        deny all;
    }
}

وها قد انتهينا! 😎

استمتع بتجربة تطوير سهلة وممتعة!