برنامه‌های Gatsby

ساخت، استقرار و اجرای یک برنامه Gatsby

در این راهنما نحوه‌ی اجرای یک برنامه Gatsby را در فینگ یاد خواهیم گرفت.

برنامه hello-gatsby

با وارد کردن دستور زیر در ترمینال خود، یک پروژه gatsby برای ما ایجاد می‌شود:

$ npm init gatsby

• با اجرای این دستور، عنوان سایت و نام پوشه‌‌ای که پروژه‌ی ما می‌خواهد در آن قرار بگیرد را وارد می‌کنیم. همچنین می‌توانیم زبان دلخواه (جاوا اسکریپت یا تایپ اسکریپت) و یا ابزارهایی که برای طراحی ظاهری سایت خود می‌خواهیم را انتخاب کنیم.

• با انجام دادن مراحل بالا، وابستگی‌ها‌ و تنظیمات پیش فرض برنامه اضافه می‌گردند.

// package.json
{
  "name": "hello-gatsby",
  "version": "1.0.0",
  ...
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "gatsby": "^4.14.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

• با ایجاد شدن برنامه‌ی مورد نظر، وارد مسیر برنامه cd hello-gatsby شده و فایل src/pages/index.js را به دلخواه خود ویرایش می‌کنیم:

// index.js
const IndexPage = () => {
  return (
    <main>
      <title>Home Page</title>
      <h1>Hello Gatsby</h1>
    </main>
  )
}

export default IndexPage

اجرای برنامه

برای اجرای برنامه ساخته شده دستور زیر را در مسیر اصلی پروژه وارد می‌کنیم:

$ npm run develop

> hello-gatsby@1.0.0 develop
> gatsby develop

success compile gatsby files - 0.979s
...
⠀
You can now view hello-gatsby in the browser.
⠀
  http://localhost:8000/

اکنون http://localhost:8000 را در مرورگر خود باز کرده تا مطمئن شویم برنامه gatsby ما کار می‌کند.

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

استقرار برنامه gatsby در فینگ

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

ایجاد فایل fing.yaml

در ریشه اصلی پروژه خود، فایلی را با نام fing.yaml ایجاد می‌کنیم و اطلاعات پایه‌ای برنامه‌ی خود را در آن قرار می‌دهیم. که می‌توان نام برنامه، پلتفرمی که از آن استفاده می‌کنیم و همچنین پورتی که برنامه‌ی ما بر روی آن listen می‌کند را مشخص کنیم.

# fing.yaml
app: "hello-gatsby"
platform: "gatsby"
port: 3000

نصب فینگ cli و ورود به آن

برنامه‌ی gatsby ما آماده‌ی استقرار بر روی سکوی ابری فینگ می‌باشد و این بدین معناست که ما برای مدیریت برنامه‌های خود به فینگ cli نیاز داریم. اگر هنوز آن را نصب نکرده‌اید به راهنمای نصب ما بروید و بعد از نصب، وارد حساب خود شوید.

دستور استقرار

بعد از ورود به حساب خود در فینگ CLI، در مسیر اصلی پروژه‌ی خود دستور زیر را وارد می‌کنیم تا اولین استقرار انجام شود:

$ fing up

مشاهده خروجی

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

زیر دامنه‌ی ما به این صورت خواهد بود: https://hello-gatsby.onfing.ir