چگونه یک برنامه React را با استفاده از Nginx بر روی سرور مجازی Ubuntu نصب کنیم؟

پس از توسعه یک پروژه با استفاده از برنامه React، ممکن است بخواهید آن را در اختیار سایر کاربران قرار دهید. این فرآیند که با عنوان Deploy شناخته می‌شود، به‌ معنای انتقال پروژه از محیط توسعه به یک سرور واقعی است تا از طریق اینترنت یا شبکه قابل دسترسی باشد.

در این آموزش از لیارا، با استفاده از ابزار Create React App یک پروژه React خواهیم ساخت،آن را برای استقرار آماده کرده و فایل‌ های لازم را به یک سرور مجازی Ubuntu منتقل خواهیم کرد و در نهایت با پیکربندی Nginx پروژه را در در اختیار سایر کاربران قرار خواهیم داد.

همین الان، هاست ابری React را با سرعت بالا راه‌اندازی کنید.
✅ بدون نیاز به پیکربندی ✅ استقرار آسان ✅ مناسب برای React
خرید هاست React

آنچه در ادامه خواهید خواند:

• پیش نیاز ها
• مرحله اول: ساخت پروژه React
• مرحله دوم: تعیین مکان فایل های استقرار در سرور Ubuntu
• مرحله سوم: آپلود کردن فایل های Build با استفاده از scp
• سوالات متداول
• جمع بندی

پیش نیازها

• کاربر غیر روت (non-root) با دسترسی Sudo که بر روی آن تعریف شده باشد.
• فایروال فعال.
• دسترسی یه SSh سرور.
• نصب Node.js بر روی سیستمی که بر روی آن کد نویسی انجام می‌دهید.
• نصب Nginx روی سرور.
• داشتن گواهی امنیتی HTTPS برای سرور.
• دامنه ثبت‌ شده یا IP عمومی سرور.
• آشنایی پایه با HTML , CSS و JavaScript.

“برای ساخت برنامه React می‌توانید از مستندات لیارا استفاده کنید.”

مرحله اول: ساخت پروژه React

در این مرحله اپلیکیشن را با استفاده از Create React App خواهید ساخت و مهم‌تر از همه، نسخه‌ای قابل استقرار از اپلیکیشن اولیه خود را ایجاد خواهید کرد.

برای شروع، یک اپلیکیشن جدید با استفاده از Create React App در محیط خود بسازید. در ترمینال دستور زیر را اجرا کرده و منتظر باشید تا اپلیکیشن شما ساخته شود. در این آموزش، نام پروژه شما react-deploy خواهد بود.

npx create-react-app react-deploy

دستور npx نیازی به پکیج‌های روی سیستم شما ندارد و خودکار پکیج‌های Node را اجرا می‌کند. اسکریپت create-react-app تمامی وابستگی های لازم را برای اپلیکیشن React شما نصب کرده و یک پروژه پایه را در پوشه react-deploy ایجاد خواهد کرد.

این کد ممکن است چند دقیه طول بکشد تا نتیجه را به شما نشان دهد. پس از اتمام آن پیام های مبنی بر موفقیت آن را دریافت خواهید کرد. اگر از yarn به جای npm استفاده کنید، ممکن است که پیام شما کمی متفاوت تر باشد.

Success! Created react-deploy at your_file_path/react-deploy

در این پوشه، می‌توانید چندین دستور را اجرا کنید.

• npm start: سرور توسعه را راه‌اندازی می‌کند.
• npm build: اپلیکیشن را به فایل‌های استتیک تبدیل می‌کند.
• npm test: تست‌ها را اجرا می‌کند.
• npm eject: ابزار را حذف می‌کند و وابستگی‌ها، فایل‌ های پیکربندی و اسکریپت‌ها را به پوشه‌ اپلیکیشن منتقل می‌کند.

به شما پیشنهاد خواهیم کرد که ابتدای کار دستور زیر را اجرا کنید بعد به اجرای پروژه بپردازید.

cd react-deploy
npm start

اجرای پروژه

بعد از اینکه پوشه پروژه تان را با دستور cd react-deploy اجرا کردید، باید بتوانید نحوه اجرای آن را در سرور تان بررسی کنید. برای اجرای پروژه از دستور npm start استفاده کنید.

npm start

با اجرای تمامی دستورات، اطلاعات سرور محلی شما نمایش داده خواهد شد.

Compiled successfully!

You can now view react-deploy in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

در مرورگر، به آدرس http://localhost:3000 بروید. در این قسمت می‌توانید اپلیکیشن اولیه React خود را مشاهده کنید.

توقف پروژه در حال اجرا برای ساخت نسخه تولیدی

برای اینکه بتوانید پروژه در حال اجرا تان را متوقف کنید، باید در ترمینال یکی از ترکیب روبه رو را اCTRL+C یا ⌘+C فشار دهید.

در این قسمت پروژه شما به درستی در مرورگر تان اجرا می‌شود، اما باید نسخه تولیدی (Production) پروژه خود را بسازید. برای انجام این کار، دستور زیر را وارد کنید.

npm run build

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

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.21 KB  build/static/js/2.82f639e7.chunk.js
  1.4 KB    build/static/js/3.9fbaa076.chunk.js
  1.17 KB   build/static/js/runtime-main.1caef30b.js
  593 B     build/static/js/main.e8c17c7d.chunk.js
  546 B     build/static/css/main.ab7136cd.chunk.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  https://cra.link/deployment 

حال پوشه build شما نسخه های کامپایل و minified را دارا است و تمامی فایل های مورد نیاز برای پروژه شما را دارد. دیگر نیازی به نگرانی در مورد فایل های خارج از پوشه build را نخواهید داشت. تنها کاری که شما باید آن را انجام دهید این است که این پوشه را به سرور منتقل کنید.

در این مرحله، شما یک اپلیکیشن React را ساخته اید که در ابتدا از آن مطمئن شدید که به درستی در محیط خود اجرا می شود و نسخه تولیدی آن را با استفاده از اسکریپت build ساخته اید. در مرحله بعدی، به سرور خود وارد خواهید شد و یاد خواهید گرفت که پوشه build را در کدام قسمت کپی کنید.

مطالعه بیشتر: آموزش راه‌اندازی اپلیکیشن وب Go با Docker و Nginx در اوبونتو 22.04

همین الان، بدون کمترین پیچیدگی، سرور مجازی خودتون رو در کمتر از ۳۰ ثانیه، راه‌اندازی کنید.
✅ عملکرد پایدار ✅ ترافیک نامحدود ✅ هزینه به‌صرفه
خرید سرور مجازی ابری

مرحله دوم: تعیین مکان فایل های استقرار در سرور Ubuntu

در این مرحله، برای استقرار اپلیکیشن React بر روی سرور خود اقداماتی را انجام خواهید داد. اما قبل از اینکه فایل ها را بارگذاری کنید، باید مکان صحیح فایل ها را بر روی سرور خود مشخص کنید. در این آموزش از Nginx به عنوان وب سرور استفاده خواهید کرد، ولی روش مشابهی با Apache هم وجود دارد. تفاوت اصلی در این است که فایل های پیکربندی در دایرکتوری متفاوتی قرار دارد.

برای اینکه بتوانید از دایرکتوری وب سرور به عنوان روت استفاده کنید، باید با استفاده از SSH وارد سرور شوید.

ssh username@server_ip

بعد از ورود به سرور، پیکربندی وب سرور را در مسیر /etc/nginx/sites-enabled پیدا کنید. همچنین دایرکتوری sites-available نیز وجود دارد که شامل پیکربندی هایی است که فعال نشده‌اند. بعد از پیدا کردن فایل پیکربندی، خروجی آن را با دستور زیر نمایش دهید.

cat /etc/nginx/sites-enabled/your_domain

اگر سایت شما گواهی HTTPS را نداشته باشد. نتیجه کار شما به صورت زیر خواهد بود.

server {
        listen 80;
        listen [::]:80;

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }
}

اگر برای ایمن سازی از سرور مجازی Ubuntu تان از گواهی Let's Encrypt استفاده می‌کنید. خروجی زیر را مشاهده خواهید کرد.

server {
        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your_domain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}
server {
    if ($host = www.your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name your_domain www.your_domain;
    return 404; # managed by Certbot
}

در هر دو حالت، مهم ترین بخش برای استقرار اپلیکیشن React شما، فیلد روت است. این فیلد درخواست های HTTP را به دایرکتوری /var/www/your_domain/html هدایت می‌کند و شما باید فایل هایتان را در این قسمت کپی کنید. خط بعدی نشان می‌دهد که Nginx به دنبال فایل index.html خود می‌گردد.

اگر پوشه build خود را پیدا کردید، یک فایل index.html را مشاهده خواهید کرد که به عنوان ورودی اصلی اپلیکیشن شما عمل می‌کند. حال که از سرور Ubuntu خارج شدید و به محیط توسعه برگشتید. می‌توانید پوشه Build را بارگذاری کنید.

مرحله سوم: آپلود کردن فایل های Build با استفاده از scp

فایل های build در این قسمت دیگر آماده شده‌اند و فقط باید آن ها را بر روی سرور آپلود کنید. یکی از سریع ترین راه ها برای انجام این کار، استفاده از دستور scp است. این دستور به صورت امن فایل های شما را از طریق ترمینال به سرور منتقل می‌کند. اگر کلید SSH را تنظیم کرده باشید، از آن استفاده خواهد کرد. در صورت عدم استفاده از شما نام کاربری و رمز عبور را درخواست می‌کند.

فرمت اصلی کلی دستوراتی که باید آن را رعایت کنید به صورت زیر است.

scp files_to_copy username@server_ip:path_on_server

قسمت اول، فایل هایی است که نیاز دارید آن ها را کپی کنید. در این قسمت همه فایل های داخل پوشه build را منتقل کنید.

قسمت دوم ترکیبی از نام کاربری، IP سرور و مسیر مقصد شما است که باید در مسیر همان روتی که در Nginx تعیین کردید آن را پیکربندی کنید.

برای کپی کردن همه فایل های داخل پوشه تان از دستور زیر استفاده کنید.

scp -r ./build/* username@server_ip:/var/www/your_domain/html

بعد از اجرای این دستور خروجی زیر را مشاهده خواهید کرد که نشان دهنده این است که فایل های شما در حال اپلود شدن است و با روند موفقیت آمیزی اجرا می‌شود.

asset-manifest.json                          100% 1092    22.0KB/s   00:00
favicon.ico                                  100% 3870    80.5KB/s   00:00
index.html                                   100% 3032    61.1KB/s   00:00
...
main.e8c17c7d.chunk.js                       100% 1045    21.7KB/s   00:00
logo.103b5fa1.svg                            100% 2671    56.8KB/s   00:00

وقتی دستور شما تمام شد، کار شما هم دیگر تمام شده است، به این دلیل که پروژه Ract تنها از فایل های استتیک ساخته شده است و برای اجرای آن به یک مرورگر نیاز خواهید داشت، پس دیگر نیازی نخواهید داشت که از سمت سرور کار خاصی را انجام دهید. فقط کافی است که مرورگر خود را باز کنید و آدرس دامنه تان را بزنید. وقتی این کار را انجام می‌دهید، پروژه React شما در دسترس خواهد بود.

برای ادامه مطالعه و یادگیری: چطور با استفاده از Fail2Ban در اوبونتو 22.04 از سرور Nginx خود محافظت کنیم!

سوالات متداول:

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

چرا باید پروژه React را build کنیم؟

نسخه build شامل فایل‌های بهینه‌شده برای تولید (production) است که سرعت بارگذاری و امنیت را افزایش می‌دهد.

چطور پروژه React را روی سرور Ubuntu منتقل کنیم؟

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

نقش Nginx در استقرار پروژه چیست؟

Nginx به عنوان وب سرور، فایل‌های build را به کاربران نمایش می‌دهد و درخواست‌های HTTP را مدیریت می‌کند.

آیا بدون دامنه هم می‌توان پروژه را منتشر کرد؟

بله، می‌توانید از آدرس IP عمومی سرور به جای دامنه استفاده کنید.

گواهی HTTPS چقدر اهمیت دارد؟

گواهی HTTPS امنیت ارتباط بین کاربر و سرور را تضمین می‌کند و برای اکثر پروژه‌ها ضروری است.

بیشتر بخوانید: ۵ اشتباهی که هر توسعه‌دهنده وب باید از آن‌ها اجتناب کند!

جمع بندی

در این آموزش یاد گرفتید چگونه یک پروژه React بسازید، نسخه نهایی (build) آن را تولید کنید و با استفاده از دستور esp آن را به‌سادگی مستقر کنید. پیشنهاد می‌کنیم برای استقرار سریع برنامه‌های React از مستندات لیارا استفاده کنید.