तैनाती र अनलाइन

i18n.site एकल-पृष्ठ एप्लिकेसन आर्किटेक्चर अपनाउँछ, र वेबसाइटको प्रवेश पृष्ठ र वेबसाइट सामग्री स्वतन्त्र रूपमा प्रयोग गरिन्छ।

माथिको अनुवाद चलाएपछि, डाइरेक्टरी htm र v md/out/dev डाइरेक्टरी अन्तर्गत उत्पन्न हुनेछ।

यहाँ, 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 सम्पादन गर्नुहोस् र आफ्नो npm प्याकेज नामको रूपमा md: YOUR_NPM_PACKAGE को मान परिवर्तन गर्नुहोस् npmjs.com

त्यसपछि md/.i18n/htm/main.package.json परिमार्जन गर्नुहोस्

अनुवाद र प्रकाशित गर्न md डाइरेक्टरीमा i18n.site --npm वा i18n.site -n चलाउनुहोस्।

यदि तपाइँ प्रकाशित गर्न निरन्तर एकीकरण वातावरण प्रयोग गर्नुहुन्छ भने, nodejs स्थापना गर्न आवश्यक छैन। केवल लग-इन र प्रकाशन अनुमतिहरू ~/.npmrc वातावरणमा प्रतिलिपि गर्नुहोस्।

यदि तपाईंले main.yml मा v: को प्याकेज नाम परिमार्जन गर्नुभयो भने, कृपया पहिले .i18n/v/main मेटाउन र त्यसपछि प्रकाशित गर्न निश्चित हुनुहोस् ।

npm द्वारा प्रकाशित प्रोक्सी सर्भर

यदि मुख्य भूमि चीनका प्रयोगकर्ताहरूले नेटवर्क समस्याहरू सामना गर्छन् र 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 तपाइँको URL उपसर्गमा परिवर्तन गर्नुहोस्, जस्तै v: //i18n-v.xxx.com ।

md डाइरेक्टरी प्रविष्ट गर्नुहोस् र चलाउनुहोस्

i18n.site --htm_conf ol --save

वा संक्षिप्त नाम

i18n.site -c ol -s

त्यसपछि, v: मा सेट गरिएको URL उपसर्ग पथमा md/out/main/v डाइरेक्टरीमा रहेको सामग्री कन्फिगर गर्नुहोस्।

अन्तमा, /.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 राम्रो विकल्पहरू छन्।

वेबसाइटले एकल-पृष्ठ एप्लिकेसन आर्किटेक्चर प्रयोग गरेको हुनाले, . देखि index.html सम्म समावेश नगर्ने URL पथहरू पुन: लेख्न सम्झनुहोस्।

वेबसाइट प्रविष्टि पृष्ठ एक पटक मात्र प्रयोग गर्न आवश्यक छ, र त्यसपछि सामग्री अद्यावधिकहरूको लागि वेबसाइट प्रविष्टि पृष्ठ पुन: प्रयोग गर्न आवश्यक छैन।

Github पृष्ठमा तैनात गर्नुहोस्

एउटा i18n-demo बनाउनको लागि यहाँ क्लिक github ।

त्यसपछि यो संगठन अन्तर्गत गोदाम i18n-demo.github.io सिर्जना गर्नुहोस् (कृपया तपाईंले सिर्जना गर्नुभएको संगठनको नामले i18n-demo प्रतिस्थापन गर्नुहोस्):

अघिल्लो लेखमा सामग्री प्रकाशित गर्दा, out/main/htm उत्पन्न भएको छ कृपया यो डाइरेक्टरी प्रविष्ट गर्नुहोस् र चलाउनुहोस् :

ln -s index.html 404.html

किनभने github page URL पथ पुनर्लेखन समर्थन गर्दैन, यसको सट्टा 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

क्लाउडफ्लेयर पृष्ठमा तैनात गर्नुहोस्

github page को cloudflare 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 Smart Cloud 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_flatten रेकर्ड A मा स्तर CNAME मा लिपिसँग सहयोग गर्न आवश्यक छ।

थप रूपमा, मुख्य भूमि चीनमा क्लाउड विक्रेताहरूको विदेशी ट्राफिक शुल्कहरू तुलनात्मक रूपमा महँगो भएकाले, यदि तपाईं लागतहरू अनुकूलन गर्न चाहनुहुन्छ भने, तपाईंले प्राप्त गर्न DNS Cloud को निःशुल्क भौगोलिक रिजोल्युसन र Cloudflare for SaaS को अनुकूलन डोमेन नाम (तल देखाइएको) प्रयोग गर्न सक्नुहुन्छ ट्राफिक डाइभर्सन──मुख्य भूमि चीन Baidu क्लाउड CDN मा ट्राफिक मार्ग, अन्तर्राष्ट्रिय यातायात cloudflare जान्छ।

यी परिनियोजन अनुकूलन समाधानहरू अधिक जटिल छन् र भविष्यमा छुट्टै अध्यायहरूमा प्रस्तुत गरिनेछ।

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

यदि तपाइँ आफ्नो मुख्य वेबसाइटको रूपमा वेबसाइट उत्पन्न गर्न i18n.site प्रयोग गर्नुहुन्छ भने, तपाइँ सामान्यतया प्यान-डोमेन रिडिरेक्शन कन्फिगर गर्न आवश्यक छ, अर्थात्, *.xxx.com ( www.xxx.com सहित) बाट xxx.com मा पहुँच पुर्ननिर्देशित गर्नुहोस्।

यो आवश्यकता Alibaba Cloud CDN EdgeScript ( अङ्ग्रेजी कागजात / चिनियाँ कागजात ) को मद्दतले प्राप्त गर्न सकिन्छ।

Alibaba CDN मा डोमेन नाम थप्नुहोस् र Alibaba Cloud CDN मा डोमेन नाम *.xxx.com देखि CNAME लाई पोइन्ट गर्नुहोस्।

उदाहरणका लागि, माथिको चित्रमा *.i18n.site को प्यान-डोमेन नाम रिडिरेक्शन कन्फिगरेसन निम्नानुसार छ:

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

nginx सँग डिप्लोय गर्नुहोस्

कृपया nginx out/main/htm server अनुच्छेदमा /root/i18n/md/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