معرفی

پلتفرم برنامه vpsgol یک محصول پلتفرم به عنوان سرویس (PaaS) است که به شما امکان می دهد برنامه ها را از یک مخزن منبع پیکربندی و استقرار دهید. پس از پیکربندی برنامه شما، vpsgol برنامه را با هر تغییری ایجاد و مستقر می کند و به شما از مزایای یک وب سرور کامل و خط لوله استقرار با حداقل پیکربندی می دهد. این می تواند یک راه سریع و کارآمد برای استقرار برنامه های React شما باشد، و اگر از React برای ساختن سایتی بدون باطن استفاده می کنید، می توانید از لایه رایگان App Platform استفاده کنید.

در این آموزش، یک برنامه React را با استفاده از لایه Starter رایگان در پلتفرم برنامه vpsgol اجرا می‌کنید. با Create React App یک برنامه می‌سازید، کد را به یک مخزن GitHub فشار می‌دهید، سپس برنامه را به عنوان یک برنامه vpsgol پیکربندی می‌کنید. شما برنامه را به کد منبع خود متصل می کنید و پروژه را به عنوان مجموعه ای از فایل های ثابت اجرا می کنید.

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

پیش نیازها

• در ماشین محلی خود، به یک محیط توسعه نیاز دارید که Node.js را اجرا کند. این آموزش بر روی Node.js نسخه 10.22.0 و npm نسخه 6.14.6 تست شده است.
• Git روی دستگاه محلی شما نصب شده است.
• یک حساب vpsgol.
• یک حساب کاربری در GitHub که می توانید با رفتن به صفحه Create your Account ایجاد کنید.

مرحله 1 – ایجاد یک پروژه React

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

برای شروع، یک برنامه جدید با استفاده از Create React App در دستگاه محلی خود ایجاد کنید. در ترمینال، دستور ساخت اپلیکیشنی به نام vpsgol-app را اجرا کنید:

npx create-react-app vpsgol-app

دستور npx یک بسته Node را بدون بارگیری در دستگاه شما اجرا می کند. اسکریپت create-react-app همه وابستگی ها را نصب می کند و یک پروژه پایه را در فهرست راهنمای دیجیتال-اقیانوس-برنامه می سازد. برای اطلاعات بیشتر در مورد Create React App، آموزش نحوه راه اندازی یک پروژه React با ایجاد برنامه React را بررسی کنید.

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

Success! Created vpsgol-app at your_file_path/vpsgol-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd vpsgol-app
  npm start

Happy hacking!

اکنون که یک پروژه پایه دارید، آن را به صورت محلی اجرا کنید تا بتوانید نحوه نمایش پروژه در سرور را آزمایش کنید. ابتدا به دایرکتوری تغییر دهید:

cd vpsgol-app

پروژه را با استفاده از اسکریپت شروع npm اجرا کنید:

npm start

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

Compiled successfully!

You can now view vpsgol-app 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 باز کنید و پروژه خود را پیدا خواهید کرد:

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

اکنون که یک برنامه React در حال کار دارید، می توانید کد را به یک مخزن GitHub فشار دهید.

مرحله 2 – فشار دادن کد به GitHub

برای استقرار برنامه شما، App Platform کد منبع شما را از یک مخزن کد میزبانی شده بازیابی می کند. در این مرحله، کد برنامه React خود را به یک مخزن GitHub فشار می‌دهید تا App Platform بتواند بعداً به آن دسترسی داشته باشد.

به حساب GitHub خود وارد شوید. پس از ورود به سیستم، یک مخزن جدید به نام vpsgol-app ایجاد کنید. می توانید مخزن را خصوصی یا عمومی کنید:

Create React App به طور خودکار پروژه شما را با git مقداردهی اولیه می کند، بنابراین می توانید تنظیم کنید تا کد را مستقیماً به GitHub فشار دهید. ابتدا مخزن مورد نظر خود را با دستور زیر اضافه کنید:

git remote add origin https://github.com/your_name/vpsgol-app.git

در مرحله بعد، اعلام کنید که می‌خواهید با موارد زیر به شاخه اصلی بروید:

git branch -M main

در نهایت، کد را به مخزن خود فشار دهید:

git push -u origin main

هنگامی که از شما خواسته شد کد خود را فشار دهید، اعتبار GitHub خود را وارد کنید.

هنگامی که کد را فشار می دهید یک پیام موفقیت آمیز دریافت خواهید کرد. پیام شما کمی متفاوت خواهد بود:

Counting objects: 22, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 187.50 KiB | 6.94 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0)
To github.com:your_name/vpsgol-app.git
   4011c66..647d2e1  main -> main

اکنون کد خود را در مخزن GitHub کپی کرده اید.

در این مرحله، پروژه خود را به GitHub هل دادید تا بتوانید با استفاده از vpsgol Apps به آن دسترسی داشته باشید. در مرحله بعد، با استفاده از پروژه خود یک برنامه vpsgol جدید ایجاد می کنید و استقرار خودکار را تنظیم می کنید.

مرحله 3 – استقرار در پلتفرم برنامه vpsgol

در این مرحله، یک برنامه React را در پلتفرم اپلیکیشن vpsgol مستقر خواهید کرد. شما مخزن GitHub خود را به vpsgol متصل می کنید، پروژه را برای ساخت پیکربندی می کنید و پروژه اولیه خود را می سازید. پس از اجرای پروژه، هر تغییر باعث ایجاد یک ساخت و به روز رسانی جدید می شود.

در پایان این مرحله، می‌توانید برنامه‌ای را با تحویل مداوم درvpsgol اجرا کنید.

برای شروع، وارد حساب vpsgol خود شوید و دکمه Create را فشار دهید، سپس Apps را انتخاب کنید:

در مرحله بعد از شما خواسته می شود که مخزن GitHub خود را پیوند دهید. اگر هنوز آن را متصل نکرده اید، باید با نام کاربری و رمز عبور خود وارد شوید و به vpsgol مجوز دسترسی به مخازن خود را بدهید:

هنگامی که حساب خود را پیوند دادید، مخزن مورد نظر برای اتصال را در صفحه مجوز GitHub انتخاب کنید. در این مورد، شما از مخزن دیجیتال-اقیانوس-برنامه استفاده می کنید، اما در صورت تمایل می توانید مخازن بیشتری را متصل کنید:

پس از انتخاب مخزن، دوباره به رابط vpsgol متصل خواهید شد. vpsgol-app را از لیست مخازن انتخاب کنید، سپس Next را فشار دهید. این برنامه شما را مستقیماً به مخزن GitHub متصل می کند:

اکنون که مخزن خود را انتخاب کرده اید، باید اپلیکیشن vpsgol را پیکربندی کنید. در این مثال، سرور با انتخاب نیویورک در قسمت Region، در آمریکای شمالی مستقر خواهد شد و شاخه استقرار اصلی خواهد بود. برای برنامه خود، منطقه ای را انتخاب کنید که به موقعیت مکانی فیزیکی شما نزدیک است:.

برای این آموزش، تغییرات کد Autodeploy را بررسی می کنید. هر بار که کد را به‌روزرسانی می‌کنید، این به طور خودکار برنامه شما را بازسازی می‌کند.

Next را فشار دهید تا به صفحه پیکربندی برنامه خود بروید.

در مرحله بعد، نوع برنامه ای را که اجرا می کنید انتخاب کنید. از آنجایی که React دارایی های استاتیک را می سازد، Static Site را از منوی کشویی در قسمت Type انتخاب کنید.

توجه: Create React App یک تولیدکننده سایت ایستا مانند گتسبی نیست، اما شما از دارایی های ثابت استفاده می کنید، زیرا سرور نیازی به اجرای کدهای سمت سرور مانند Ruby یا PHP ندارد. برنامه از Node برای اجرای مراحل نصب و ساخت استفاده می کند، اما کد برنامه را در لایه آزاد اجرا نمی کند.

شما همچنین می توانید از یک اسکریپت ساخت سفارشی استفاده کنید. اما در این حالت، می‌توانید از دستور پیش‌فرض npm run build استفاده کنید. اگر اسکریپت ساخت متفاوتی برای تضمین کیفیت (QA) یا یک محیط تولید دارید، ممکن است بخواهید یک اسکریپت ساخت سفارشی ایجاد کنید:

Next را فشار دهید تا به صفحه نهایی و راه اندازی بروید.

در اینجا می توانید طرح قیمت را انتخاب کنید. ردیف شروع رایگان برای سایت های استاتیک ساخته شده است، بنابراین یکی را انتخاب کنید:

دکمه Launch Starter App را فشار دهید و vpsgol شروع به ساخت برنامه شما می کند.

این برنامه اسکریپت های ساخت npm ci و npm را در مخزن شما اجرا می کند. این همه وابستگی ها را دانلود می کند و فهرست ساخت را با یک نسخه کامپایل شده و کوچک شده از همه جاوا اسکریپت، فایل های HTML و سایر دارایی های شما ایجاد می کند. همچنین می توانید یک اسکریپت سفارشی در package.json خود ایجاد کنید و دستورات را در تب Components برنامه خود در App Platform به روز کنید.

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

برای دسترسی به پروژه خود در مرورگر، Live App را فشار دهید. این پروژه مانند پروژه ای است که به صورت محلی آزمایش کرده اید، اما با یک URL ایمن در وب به صورت زنده نمایش داده می شود:

اکنون که پروژه شما پیکربندی شده است، هر زمان که تغییری در مخزن پیوند داده شده ایجاد کنید، یک بیلد جدید اجرا خواهید کرد. در این حالت، اگر تغییری را به شاخه اصلی فشار دهید، vpsgol به طور خودکار یک استقرار جدید را اجرا می کند. نیازی به ورود نیست؛ به محض اینکه تغییر را فشار دهید اجرا می شود:

در این مرحله، یک برنامه vpsgol جدید در پلتفرم App ایجاد کردید. شما حساب GitHub خود را متصل کردید و برنامه را برای ساخت شعبه اصلی پیکربندی کردید. پس از پیکربندی برنامه، متوجه شدید که برنامه پس از هر تغییر، یک بیلد جدید را مستقر می کند.

نتیجه

پلتفرم برنامه vpsgol ابزاری سریع برای استقرار برنامه ها در اختیار شما قرار می دهد. با یک تنظیم اولیه کوچک، برنامه شما به طور خودکار پس از هر تغییر مستقر می شود. این می‌تواند همراه با React برای راه‌اندازی سریع برنامه وب شما استفاده شود.

https://vpsgol.net/product/vps-germany/

https://vpsgol.net/product/vps-usa/

https://vpsgol.net/product/vps-france/

https://vpsgol.net/product/vps-canada/

https://vpsgol.net/product/vps-poland/

https://vpsgol.net/product/vps-netherlands/

https://vpsgol.net/product/vps-england/