การปรับใช้และออนไลน์

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 เป็นวิธีแก้ปัญหาเริ่มต้นที่แนะนำ (ดู Front-end High Availability )

npm เข้าสู่ระบบ & โพสต์

ติดตั้ง nodejs เข้าสู่ระบบด้วย npm login

แก้ไข md/.i18n/htm/main.yml และเปลี่ยนค่า md: YOUR_NPM_PACKAGE เป็นชื่อแพ็คเกจ npm ของคุณเอง npmjs.com

แล้วแก้ไข md/.i18n/htm/main.package.json

รัน i18n.site --npm หรือ i18n.site -n ในไดเร็กทอรี md เพื่อแปลและเผยแพร่

หากคุณใช้สภาพแวดล้อมการรวมอย่างต่อเนื่องเพื่อเผยแพร่ ไม่จำเป็นต้องติดตั้ง nodejs เพียงคัดลอกสิทธิ์ในการเข้าสู่ระบบและการเผยแพร่ ~/.npmrc ไปยังสภาพแวดล้อม

หากคุณแก้ไขชื่อแพ็กเกจ v: ใน main.yml โปรด อย่าลืมลบ .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

จากนั้น กำหนดค่าเนื้อหาในไดเร็กทอรี md/out/main/v ให้เป็นพาธคำนำหน้า URL ที่ตั้งค่าไว้ใน v:

สุดท้าย ให้กำหนดค่าเวลาแคชของเส้นทางที่ลงท้ายด้วย /.v ถึง 1s ไม่เช่นนั้นเนื้อหาที่ออกใหม่จะไม่สามารถเข้าถึงได้ทันที

เวลาแคชสำหรับเส้นทางอื่นสามารถตั้งค่าเป็นหนึ่งปีหรือมากกว่านั้นเพื่อลดคำขอที่ไม่จำเป็น

โฮสต์เนื้อหาไปที่ s3

หากต้องการโฮสต์เนื้อหาด้วยตนเอง นอกเหนือจากการใช้เซิร์ฟเวอร์ของคุณเอง CDN อีกตัวเลือกทั่วไปคือการใช้ S3 +

คุณสามารถใช้ rclone เพื่อล็อกอินเข้าสู่เซิร์ฟเวอร์ S3 จากนั้นอ้างอิงและแก้ไขสคริปต์ต่อไปนี้ และคัดลอกเฉพาะการเปลี่ยนแปลงที่เพิ่มขึ้นเป็น 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

ขั้นแรก คลิกที่นี่ github เพื่อสร้างองค์กร ชื่อองค์กรต่อไปนี้คือ i18n-demo เป็นตัวอย่าง

จากนั้นสร้างคลังสินค้า 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

ปรับใช้บนหน้า cloudflare

cloudflare page เมื่อเทียบกับ github page จะให้การเขียนเส้นทางใหม่และเป็นมิตรกับจีนแผ่นดินใหญ่และเข้าถึงได้ง่ายกว่า

โดยทั่วไปการปรับใช้ cloudflare page จะขึ้นอยู่กับการปรับใช้ github page ข้างต้น

สร้างโครงการและผูกคลังสินค้า i18n-demo.github.io ด้านบน

กระบวนการนี้แสดงในรูปด้านล่าง:

กรุณาคลิก Add Account เพื่อให้สิทธิ์การเข้าถึงแก่องค์กร i18n-demo

หากคุณผูกคลังสินค้าขององค์กรอื่น คุณอาจต้องคลิก 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

คุณสามารถใช้การประมวลผลแบบ Edge เพื่อเขียนเส้นทางใหม่เพื่อปรับให้เข้ากับแอปพลิเคชันหน้าเดียวได้ ตัวอย่างเช่น 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 เพื่อระดับ CNAME ให้เป็นบันทึก A

นอกจากนี้ เนื่องจากค่าธรรมเนียมการรับส่งข้อมูลในต่างประเทศของผู้จำหน่ายระบบคลาวด์ในจีนแผ่นดินใหญ่มีราคาค่อนข้างแพง หากคุณต้องการเพิ่มประสิทธิภาพต้นทุน คุณสามารถใช้ ความละเอียดทางภูมิศาสตร์ของ Huawei Cloud DNS และชื่อโดเมนที่กำหนดเองของ Cloudflare for SaaS ได้ (ดังที่แสดงด้านล่าง) การเบี่ยงเบนการรับส่งข้อมูล──การกำหนดเส้นทางการรับส่งข้อมูลในจีนแผ่นดินใหญ่ Baidu Cloud CDN การรับส่งข้อมูลระหว่างประเทศไป cloudflare

โซลูชันการเพิ่มประสิทธิภาพการปรับใช้เหล่านี้มีความซับซ้อนมากขึ้นและจะมีการแนะนำในบทที่แยกต่างหากในอนาคต

การเปลี่ยนเส้นทางชื่อโดเมนทั่วไป

หากคุณใช้ i18n.site เพื่อสร้างเว็บไซต์เป็นเว็บไซต์หลักของคุณ โดยปกติคุณจะต้องกำหนดค่าการเปลี่ยนเส้นทางแพนโดเมน ซึ่งก็คือ เปลี่ยนเส้นทางการเข้าถึงไปที่ *.xxx.com (รวมถึง www.xxx.com ) ไปยัง xxx.com

ข้อกำหนดนี้สามารถทำได้ด้วยความช่วยเหลือของ Alibaba Cloud CDN EdgeScript ( เอกสารภาษาอังกฤษ / เอกสารภาษาจีน )

เพิ่มชื่อโดเมนใน Alibaba Cloud CDN และชี้ชื่อโดเมน *.xxx.com ถึง CNAME ใน Alibaba Cloud CDN

ตัวอย่างเช่น การกำหนดค่าการเปลี่ยนเส้นทางชื่อโดเมนแพนเป็น *.i18n.site ในภาพด้านบนจะเป็นดังนี้:

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

ปรับใช้กับ nginx

โปรดเพิ่มการกำหนดค่าที่คล้ายกับต่อไปนี้ในย่อหน้า server ของ nginx โปรดเปลี่ยน /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 ในการกำหนดค่า Visit npmjs.com และสร้างโทเค็นที่มีสิทธิ์การเผยแพร่ (ดังที่แสดงด้านล่าง)

โครงสร้างไดเร็กทอรี

public

ไฟล์คงที่ของเว็บไซต์ เช่น favicon.ico , robots.txt เป็นต้น

ไฟล์ไอคอนที่นี่สามารถสร้างได้ด้วย realfavicongenerator.net

.i18n

ภายใต้ไดเร็กทอรี .i18n คือไฟล์การกำหนดค่า แคชการแปล ฯลฯ ของ i18n.site โปรดดูรายละเอียดในบทถัดไป "การกำหนดค่า"

en

ไดเร็กทอรีภาษาต้นทางซึ่งสอดคล้องกับไฟล์คอนฟิกูเรชัน en จาก fromTo ใน .i18n/conf.yml

i18n:
  fromTo:
    en: zh

โปรดดูการกำหนดค่าการแปล i18