तैनाती और ऑनलाइन

i18n.site एकल-पृष्ठ एप्लिकेशन आर्किटेक्चर को अपनाता है, और वेबसाइट प्रवेश पृष्ठ और वेबसाइट सामग्री स्वतंत्र रूप से तैनात की जाती है।

उपरोक्त अनुवाद चलाने के बाद, md/out/dev निर्देशिका के अंतर्गत निर्देशिका htm और v उत्पन्न हो जाएंगी।

यहां, dev का अर्थ है कि यह .i18n/htm/dev.yml कॉन्फ़िगरेशन फ़ाइल के आधार पर बनाया गया है।

dev निर्देशिका :

htm निर्देशिका वेबसाइट का प्रवेश पृष्ठ है।

v निर्देशिका में संस्करण संख्याओं के साथ वेबसाइट सामग्री शामिल है।

स्थानीय पूर्वावलोकन संस्करण संख्या की परवाह नहीं करता है और सभी फ़ाइलों को out/dev/v/0.1.0 निर्देशिका में कॉपी कर देगा।

आधिकारिक रिलीज़ के लिए, परिवर्तित फ़ाइलों को नई संस्करण संख्या निर्देशिका में कॉपी किया जाएगा।

-c के साथ कॉन्फ़िगरेशन फ़ाइल निर्दिष्ट करें

विभिन्न कॉन्फ़िगरेशन फ़ाइलें out निर्देशिका में संबंधित निर्देशिकाएं बनाएंगी।

उदाहरण के लिए, .i18n/htm/main.yml out/main निर्देशिका बनाएगा।

dev.yml और main.yml डिफ़ॉल्ट कॉन्फ़िगरेशन हैं.

dev development का संक्षिप्त रूप है, जो विकास परिवेश को दर्शाता है, जिसका उपयोग स्थानीय पूर्वावलोकन के लिए किया जाता है, और यह डिफ़ॉल्ट कॉन्फ़िगरेशन फ़ाइल भी है। ol online का संक्षिप्त रूप है, जो ऑनलाइन वातावरण को दर्शाता है, जिसका उपयोग आधिकारिक रिलीज़ के लिए किया जाता है। रिलीज़ के लिए कमांड लाइन पैरामीटर -n से npm का उपयोग करते समय यह डिफ़ॉल्ट कॉन्फ़िगरेशन फ़ाइल भी है।

आप अन्य कॉन्फ़िगरेशन फ़ाइलें भी बना सकते हैं, उपयोग करने के लिए कॉन्फ़िगरेशन फ़ाइल नाम निर्दिष्ट करने के लिए कमांड लाइन पर --htm_conf उपयोग करें:

उदाहरण के लिए:

i18n.site --htm_conf dist --save

यहां --save अद्यतन रिलीज़ संस्करण संख्या को दर्शाता है।

npmjs.com पर सामग्री प्रकाशित करें

पर सामग्री प्रकाशित करना अनुशंसित डिफ़ॉल्ट समाधान है ( फ़्रंट-एंड उच्च उपलब्धता देखें) npmjs.com

npm लॉग इन करें & पोस्ट

nodejs इंस्टॉल करें, npm login से लॉग इन करें।

md/.i18n/htm/main.yml संपादित करें और md: YOUR_NPM_PACKAGE के मान को अपने npm पैकेज नाम के रूप में बदलें npmjs.com

फिर संशोधित करें md/.i18n/htm/main.package.json

अनुवाद और प्रकाशन के लिए md निर्देशिका में i18n.site --npm या i18n.site -n चलाएँ।

यदि आप प्रकाशित करने के लिए निरंतर एकीकरण वातावरण का उपयोग करते हैं, तो nodejs स्थापित करने की कोई आवश्यकता नहीं है। बस लॉग-इन और प्रकाशन अनुमतियों ~/.npmrc पर्यावरण में कॉपी करें।

यदि आप main.yml में v: के पैकेज नाम को संशोधित करते हैं, तो कृपया पहले .i18n/v/main हटाना सुनिश्चित करें और फिर इसे प्रकाशित करें।

एनपीएम द्वारा प्रकाशित प्रॉक्सी सर्वर

यदि मुख्य भूमि चीन में उपयोगकर्ता नेटवर्क समस्याओं का सामना करते हैं और npm पैकेज प्रकाशित करने में असमर्थ हैं, तो वे प्रॉक्सी सर्वर को कॉन्फ़िगर करने के लिए पर्यावरण चर https_proxy सेट कर सकते हैं।

यह मानते हुए कि आपका प्रॉक्सी सर्वर पोर्ट 7890 है, आप लिख सकते हैं:

https_proxy=http://127.0.0.1:7890 i18n.site -n

स्व-होस्ट की गई सामग्री

यदि आप सामग्री को स्वयं-होस्ट करना चाहते हैं, तो पहले md/.i18n/htm/main.yml संपादित करें और v: //unpkg.com/i18n.site अपने यूआरएल उपसर्ग में बदलें, जैसे कि v: //i18n-v.xxx.com ।

md निर्देशिका दर्ज करें और चलाएँ

i18n.site --htm_conf ol --save

या संक्षिप्तीकरण

i18n.site -c ol -s

फिर, md/out/main/v निर्देशिका में सामग्री को v: में सेट URL उपसर्ग पथ पर कॉन्फ़िगर करें।

अंत में, /.v से 1s पर समाप्त होने वाले पथ के कैश समय को कॉन्फ़िगर करें , अन्यथा नई जारी सामग्री को तुरंत एक्सेस नहीं किया जा सकता है।

अनावश्यक अनुरोधों को कम करने के लिए अन्य पथों के लिए कैश समय को एक वर्ष या उससे अधिक पर सेट किया जा सकता है।

सामग्री को s3 पर होस्ट करें

सामग्री को स्व-होस्ट करने के लिए, अपने स्वयं के सर्वर का उपयोग करने के अलावा, एक अन्य सामान्य विकल्प S3 + CDN उपयोग करना है।

आप S3 सर्वर में लॉग इन करने के लिए rclone का उपयोग कर सकते हैं, फिर निम्नलिखित स्क्रिप्ट को देखें और संशोधित करें, और प्रत्येक रिलीज़ के लिए केवल वृद्धिशील परिवर्तनों को S3 पर कॉपी करें।

i18n.site -c ol -s
s3=your-s3
bucket=your-bucket
ver=$(head -1 .i18n/v/main/v.hash | cut -c 2-)
rclone copy --overwrite-dir out/main/htm/v/$ver $s3:/$bucket/$ver
rclone copy out/main/v/.v "$s3:/$bucket/"

CDN को कॉन्फ़िगर करना याद रखें ताकि /.v में समाप्त होने वाले पथ का कैश समय 1s हो, अन्यथा नई जारी सामग्री को तुरंत एक्सेस नहीं किया जा सकता है।

वेबसाइट प्रकाशित करें

वेबसाइट को कहीं भी तैनात किया जा सकता है github page और cloudflare page अच्छे विकल्प हैं।

चूँकि वेबसाइट एकल-पृष्ठ एप्लिकेशन आर्किटेक्चर का उपयोग करती है, इसलिए उन URL पथों को फिर से लिखना याद रखें जिनमें . से index.html नहीं हैं।

वेबसाइट प्रविष्टि पृष्ठ को केवल एक बार तैनात करने की आवश्यकता है, और बाद के सामग्री अपडेट के लिए वेबसाइट प्रविष्टि पृष्ठ को फिर से तैनात करने की कोई आवश्यकता नहीं है।

जीथब पेज पर तैनात करें

एक संगठन बनाने के लिए सबसे पहले यहां क्लिक github । उदाहरण के तौर पर निम्नलिखित संगठन का नाम i18n-demo है।

फिर इस संगठन के अंतर्गत वेयरहाउस i18n-demo.github.io बनाएं (कृपया i18n-demo आपके द्वारा बनाए गए संगठन के नाम से बदलें):

पिछले आलेख में सामग्री प्रकाशित करते समय, out/main/htm उत्पन्न हुआ है, कृपया इस निर्देशिका को दर्ज करें और चलाएँ :

ln -s index.html 404.html

क्योंकि github page यूआरएल पथ पुनर्लेखन का समर्थन नहीं करता है, इसके बजाय 404.html उपयोग किया जाता है।

फिर htm निर्देशिका में निम्नलिखित कमांड चलाएँ ( i18n-demo/i18n-demo.github.io.git अपने गोदाम के पते से बदलना याद रखें) :

git init
git branch -M main
git remote add origin [email protected]:i18n-demo/i18n-demo.github.io.git
git push -u origin main -f

कोड को पुश करने के बाद, उस तक पहुंचने से पहले github page के परिनियोजन के सफलतापूर्वक चलने की प्रतीक्षा करें (जैसा कि नीचे दिखाया गया है)।

डेमो पेज के लिए कृपया देखें:

https://i18n-demo.github.io

क्लाउडफ्लेयर पेज पर तैनात करें

cloudflare page github page की तुलना में, यह पथ पुनर्लेखन प्रदान करता है और मुख्य भूमि चीन के लिए अधिक अनुकूल है और इसका उपयोग करने की अनुशंसा की जाती है।

cloudflare page की तैनाती आमतौर पर उपरोक्त github page की तैनाती पर आधारित होती है।

एक प्रोजेक्ट बनाएं और ऊपर i18n-demo.github.io वेयरहाउस को बाइंड करें।

प्रक्रिया नीचे दिए गए चित्र में दिखाई गई है:

संगठन i18n-demo तक पहुंच प्रदान करने के लिए कृपया Add Account पर क्लिक करें।

यदि आपने किसी अन्य संगठन के गोदाम को बाध्य किया है, तो नए संगठन को प्रदर्शित करने से पहले आपको दो बार अधिकृत करने के लिए Add Account पर क्लिक करना पड़ सकता है।

इसके बाद, वेयरहाउस i18n-demo.github.io चुनें, फिर Begin setup पर क्लिक करें, और बाद के चरणों के लिए डिफ़ॉल्ट मानों का उपयोग करें।

पहली बार बाइंडिंग के बाद, आपको उस तक पहुंचने से पहले कुछ मिनट इंतजार करना होगा।

परिनियोजन के बाद, आप एक कस्टम डोमेन नाम बाइंड कर सकते हैं।

कस्टम डोमेन नाम को बाइंड करने के बाद, कृपया सिंगल-पेज एप्लिकेशन के पथ पुनर्लेखन को कॉन्फ़िगर करने के लिए डोमेन नाम पर जाएं, जैसा कि नीचे दिखाया गया है:

उपरोक्त चित्र में नियम इस प्रकार हैं। कृपया नीचे दी गई पहली पंक्ति में i18n.site आपके द्वारा बंधे गए डोमेन नाम से बदलें।

(http.host in {"i18n.site"}) and not (
substring(http.request.uri.path,-3) in {".js" ".gz"} or
substring(http.request.uri.path,-4) in {".htm" ".rss" ".css" ".svg" ".ico" ".png" ".xml" ".txt"} or
substring(http.request.uri.path,-5) in {".html" ".avif" ".json"} or
ends_with(http.request.uri.path,".webmanifest")
)

इसके अलावा, कृपया कैश नियमों को कॉन्फ़िगर करें, जैसा कि नीचे दिखाया गया है, और कैश अवधि को एक महीने पर सेट करें।

कृपया ऊपर चित्र में दूसरे चरण में मेल खाने वाले डोमेन नाम को आपके द्वारा बंधे डोमेन नाम से बदलें।

मुख्य भूमि चीन में वेबसाइट परिनियोजन का अनुकूलन

यदि आप मुख्य भूमि चीन के नेटवर्क वातावरण में बेहतर पहुंच प्रदर्शन प्राप्त करना चाहते हैं, तो कृपया पहले एक डोमेन नाम पंजीकृत करें ।

फिर, मुख्य भूमि + में क्लाउड विक्रेताओं के ऑब्जेक्ट स्टोरेज का उपयोग करें CDN निम्नलिखित सामग्री तैनात करें out/main/htm ।

आप एकल-पृष्ठ अनुप्रयोगों को अनुकूलित करने के लिए पथ को फिर से लिखने के लिए एज कंप्यूटिंग का उपयोग कर सकते हैं, उदाहरण के लिए, Baidu स्मार्ट क्लाउड CDN को इस तरह कॉन्फ़िगर किया जा सकता है:

const uri = r.uri, p = uri.lastIndexOf(".");
if (
  p < 0 ||
  !"|js|css|htm|html|md|avif|json|ico|xml|rss|gz|mp4|png|svg|txt|webmanifest|".includes(
    "|" + uri.slice(p + 1) + "|",
  )
) {
  const ua = r.headersIn["User-Agent"].toLowerCase()
  if (/facebookexternalhit|slurp|bot|spider|curl/.test(ua)) {
    r.return(
      302,
      (/baidu|yisou|sogou|360|byte/.test(ua) ? "/zh" : "/en") + r.uri + ".htm",
    )
  } else {
    r.uri = "/index.html"
  }
}

r.respHeader(() => {
  const t = [], out = r.headersOut;
  ["Content-MD5", "Age", "Expires", "Last-Modified"].forEach(
    i => delete out[i]
  )
  r.rawHeadersOut.forEach(i => {
    const key = i[0].toLowerCase()
    if (key.startsWith("x-") || key.startsWith("ohc-")) {
      delete out[key]
    }
  })
  out["Cache-Control"] = "max-age=" + 9e5
  // आप आउटपुट को डीबग करने के लिए रिस्पॉन्स हेडर सेट कर सकते हैं, जैसे कि out.XXX = 'MSG';
})

क्योंकि रिकॉर्ड MX और रिकॉर्ड CNAME एक साथ नहीं रह सकते हैं, यदि आप एक ही समय में डोमेन नाम ईमेल प्राप्त करना चाहते हैं, तो आपको लेवल CNAME से रिकॉर्ड A तक cname_flatten स्क्रिप्ट के साथ सहयोग करना होगा।

इसके अलावा, क्योंकि मुख्य भूमि चीन में क्लाउड विक्रेताओं के विदेशी ट्रैफ़िक शुल्क अपेक्षाकृत महंगे हैं, यदि आप लागतों को अनुकूलित करना चाहते हैं, तो आप DNS Cloud के मुफ़्त भौगोलिक रिज़ॉल्यूशन और Cloudflare for SaaS के कस्टम डोमेन नाम (जैसा कि नीचे दिखाया गया है) का उपयोग कर सकते हैं ट्रैफ़िक डायवर्जन──मुख्यभूमि चीन में ट्रैफ़िक रूटिंग Baidu क्लाउड CDN , अंतर्राष्ट्रीय ट्रैफ़िक cloudflare हो जाता है।

ये परिनियोजन अनुकूलन समाधान अधिक जटिल हैं और इन्हें भविष्य में अलग-अलग अध्यायों में पेश किया जाएगा।

सामान्य डोमेन नाम पुनर्निर्देशन

यदि आप किसी वेबसाइट को अपनी मुख्य वेबसाइट के रूप में बनाने के लिए i18n.site उपयोग करते हैं, तो आपको आमतौर पर पैन-डोमेन पुनर्निर्देशन को कॉन्फ़िगर करने की आवश्यकता होती है, अर्थात, *.xxx.com ( www.xxx.com सहित) से xxx.com तक पहुंच को पुनर्निर्देशित करें।

यह आवश्यकता अलीबाबा क्लाउड CDN EdgeScript ( अंग्रेजी दस्तावेज़ / चीनी दस्तावेज़ ) की सहायता से प्राप्त की जा सकती है

अलीबाबा CDN में डोमेन नाम जोड़ें और अलीबाबा क्लाउड CDN में डोमेन नाम *.xxx.com से CNAME इंगित करें।

उदाहरण के लिए, ऊपर चित्र में *.i18n.site का पैन-डोमेन नाम पुनर्निर्देशन कॉन्फ़िगरेशन इस प्रकार है:

rewrite(concat('https://i18n.site',$uri), 'redirect',301)

nginx के साथ परिनियोजन करें

कृपया nginx के server पैराग्राफ में निम्नलिखित के समान एक कॉन्फ़िगरेशन जोड़ें। कृपया /root/i18n/md/out/main/htm अपने प्रोजेक्ट out/main/htm के पथ में बदलें:

location / {
  root  /root/i18n/md/out/main/htm;
  add_header Cache-Control "max-age=9999999";
  if ($uri !~* \.(avif|css|html|ico|js|json|png|svg|txt|webmanifest|xml)$) {
     rewrite ^ /index.html last;
  }
}

github action सतत एकीकरण पर आधारित

आप अपने github action कॉन्फ़िगर करने के लिए निम्नलिखित का संदर्भ ले सकते हैं:

name: i18n.site

on:
  workflow_dispatch:
  push:
    branches:
      - main
      - dist

jobs:
  i18n:

    permissions:
      repository-projects: write
      contents: write

    runs-on: ubuntu-latest

    steps:
      - name: checkout
        uses: actions/checkout@v4

      - name: https://i18n.site
        uses: i18n-site/github-action-i18n.site@main
        with:
          I18N_SITE_TOKEN: ${{ secrets.I18N_SITE_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

जैसा कि कॉन्फ़िगरेशन में देखा जा सकता है, शाखा main और शाखा dist पर पुश करने पर यह वर्कफ़्लो ट्रिगर हो जाता है।

दस्तावेज़ को प्रकाशित करने के लिए वर्कफ़्लो शाखा नाम से संबंधित कॉन्फ़िगरेशन फ़ाइल का उपयोग करेगा। यहां, .i18n/htm/main.yml और .i18n/htm/dist.yml उपयोग क्रमशः प्रकाशन कॉन्फ़िगरेशन के रूप में किया जाएगा।

हम दस्तावेज़ जारी करने की प्रक्रिया के लिए निम्नलिखित सर्वोत्तम प्रक्रियाओं की अनुशंसा करते हैं:

जब परिवर्तनों को शाखा main पर धकेल दिया जाता है, तो दस्तावेज़ को पूर्वावलोकन स्टेशन पर बनाने और तैनात करने के लिए ट्रिगर किया जाता है (पूर्वावलोकन स्टेशन उपलब्ध है github page )।

यह पुष्टि करने के बाद कि पूर्वावलोकन साइट पर दस्तावेज़ सही है, कोड को मर्ज कर दिया जाएगा और शाखा dist पर धकेल दिया जाएगा, और आधिकारिक निर्माण और तैनाती ऑनलाइन हो जाएगी।

बेशक, उपरोक्त प्रक्रिया को लागू करने के लिए अधिक कॉन्फ़िगरेशन लिखने की आवश्यकता होती है।

वर्कफ़्लो स्क्रिप्टिंग के लिए आप वास्तविक प्रोजेक्ट का संदर्भ ले सकते हैं github.com/fcdoc/doc

कॉन्फ़िगरेशन में secrets.I18N_SITE_TOKEN और secrets.NPM_TOKEN लिए आपको कोड बेस में गुप्त चर कॉन्फ़िगर करने की आवश्यकता होती है।

I18N_SITE_TOKEN i18n.site/token

NPM_TOKEN कॉन्फ़िगरेशन में पैकेज npm का प्रकाशन टोकन है npmjs.com पर जाएँ और प्रकाशन अनुमतियों के साथ एक टोकन बनाएं (जैसा कि नीचे दिखाया गया है)।

निर्देशिका संरचना

public

वेबसाइट की स्थिर फ़ाइलें, जैसे favicon.ico , robots.txt , आदि।

यहां आइकन फ़ाइलें realfavicongenerator.net के साथ उत्पन्न की जा सकती हैं।

.i18n

.i18n निर्देशिका के अंतर्गत i18n.site की कॉन्फ़िगरेशन फ़ाइलें, अनुवाद कैश इत्यादि हैं। विवरण के लिए अगला अध्याय "कॉन्फ़िगरेशन" देखें।

en

स्रोत भाषा निर्देशिका, .i18n/conf.yml कॉन्फ़िगरेशन फ़ाइल में fromTo में से en के अनुरूप

i18n:
  fromTo:
    en: zh

कृपया अनुवाद की कॉन्फ़िगरेशन देखें i18