5.5 将 dApp 部署到 Github

riyad

% E, E( H# J+ Y, V$ d' h, _
: z- x; j: [4 q2 |3 F' E

GitHub Pages 是发布 dApp 的理想平台，适用于开发和生产。它是免费的开源托管服务，支持 HTML/CSS/JS 静态网站，并允许自定义域名。

GitHub Pages 仅支持静态网站，避免了中心化的后台依赖，符合 dApp 的去中心化原则。此外，它基于 Git 仓库，便于社区管理，支持协作开发和分叉。任何人都可自由创建独立版本并发布。

1. echo "# first_contract_front_end" >> README.md
   
2. git init
   & L6 u+ ~0 l6 R* Q- o
3. git add README.md
   
4. git commit -m "first commit"
   
5. git branch -M main
   9 j" s+ w8 u/ i2 E  k" E0 v
6. git remote add origin https://github.com/markokhman/first_contract_front_end.git
   " K" k/ Z1 l1 `
7. git push -u origin main

复制代码

我们从这里开始：

1. git init
   $ G2 D2 t/ o( a

复制代码

Git 仓库已初始化，而且我们已经有了 .gitignore 文件。好极了。现在把所有东西都加进去吧：

1. git add .
   

复制代码

提交初始提交：

1. git commit -m "Initial commit"
   5 n4 L% p% _1 l2 V; S8 {

复制代码

现在，我调用我们的远程源，即之前从 GitHub 仓库复制的链接：

1. git remote add origin https://github.com/xxxxxxxx/first_contract_front_end.git
   ' E0 J2 P: M5 J4 c  R& b2 v

复制代码

然后，我进行首次推送，其中包括我们的初始代码：

1. git push origin master
   0 C- w% A3 c8 g$ W1 c7 A. ~

复制代码

在 GitHub Pages 上托管网站，我们使用用户名和仓库名称作为子域。例如，我的用户名 Markokhman 加上 github.io 形成域名。

接下来，需要创建清单文件以准备发布。转到 main.tsx，找到清单文件的 URL，并在 public 文件夹下创建 tonconnect-manifest.json，其中包含网站的 URL。

1. "url": "https:///join.toncompany.org"
   8 m* V! w: o  a

复制代码

那我们就用这个名字：

1. "name": "TON&Co. Tutorial"
   " j1 g9 G8 L+ k# w+ H5 p

复制代码

然后是图标 URL。我们希望它也成为资源库的一部分。因此，我现在要在公共文件夹中放置一个图标文件，但稍后我会在这里创建一个适当的 URL，一旦我们部署了这个文件，它就会指向这个文件。目前，链接看起来是这样的，因为一旦我们构建了项目，公共文件夹实际上会解析到根目录：
3 s9 f' K& s% p! [: q7 ^

1. "iconUrl": "https://xxxxxxxxx.github.io/first_contract_front_end/icon.png"
   ' \5 V& a& o) t( M6 C0 j8 X

复制代码

这就是我们全新的清单文件：

1. {
   
2. "url": "https://join.toncompany.org",
   
3. "name": "TON&Co. Tutorial",
   + l6 c! r$ o# z( w1 Z# H
4. "iconUrl": "https://xxxxxxxxxxxx.github.jo/first_contract_front_end/icon.png"
   , x. h, ]6 K: h
5. }

复制代码

现在，我们前往 main.tsx 文件，在这里编写一个合适的 URL：

1. const manifestUrl = "https://xxxxxxxxxxxx.github.io/first_contract_front_end/tonconnect-manifest.json"
   

复制代码

现在我们需要做的最后一件事是准备好 vite 本身，以便为我们正确构建。如图所示，vite 配置有一个基础：

1. // https://vitejs.dev/config/
   
2. export default defineConfig({
   
3.   plugins: [react (), nodePolyfills()],
   
4.   base: "/",
   . |- h+ o1 r1 n" h3 F6 C! Z8 C8 C
5. });

复制代码

这个 base 不会是 root，因为我们还有另一个 base：在我的例子中是 first_contract_front_end。这是 GitHub 的规则：仓库名称必须是基本路径。所以我们就把它作为项目的基础：
2 E0 ^9 p" }0 T  S' C, \- ]

1. // https://vitejs.dev/config/
   
2. export default defineConfig({
   / Y/ _" D8 i5 \0 [
3.   plugins: [react (), nodePolyfills()],
   & z' D' G" G% X  d+ X1 |
4.   base: "/first_contract_front_end/",
   
5. });

复制代码

创建 GitHub 工作流程

至此，我们已经掌握了现有的代码，但还有一件事要做。首先，我们运行

1. yarn build
   # I- N6 F, k. \& ~- v) J

复制代码

我们需要构建项目，因为 TypeScript 代码无法直接在浏览器中运行。构建后的文件存放在 dist 文件夹中，但该文件夹通常被 gitignored，因此不会被推送到 GitHub。

GitHub Pages 依赖特定分支来托管网站内容，因此我们可以创建一个专用分支，仅包含 dist 文件夹的内容，并将其链接到 GitHub Pages 的 URL。为了自动完成这一过程，我们使用 GitHub Actions 工作流。

在项目根目录下创建 .github/workflows/ 文件夹，并在其中新建 deploy.yml，粘贴以下代码即可自动部署网站。

1. name: Deploy
   
2. 
   ) X0 o7 b$ a: x* m3 L  A! m4 e* `$ I! g
3. on:
   9 ^' T3 g+ m* h4 [
4.   push:
   
5.     branches:
   " L' \) K, c/ [$ C# K1 }
6.       - master
   / G/ |& S$ y2 g+ r( q. R: E* \$ Y% s
7. 
   
8. jobs:
   . V/ R) k2 e* j" \/ L  X
9.   build:
   " K- E5 h+ A! _) a$ ~/ Q
10.     name: Build
    
11.       runs=on: ubuntu-latest
    9 n6 ~: [0 g+ z, q
12. 
    
13.       steps:
    
14.         - name: Checkout repo
    2 ~/ V. D/ M+ o) A, Z+ _
15.           uses: actions/checkout@v2
    
16. 
    
17.         - name: Setup Node
    
18.           uses: actions/setup-node@v1
    
19.           with:
    
20.             node-version: 16
    
21. 
    
22.         - name: Install dependencies
    
23.           uses: bahmutov/npm-install@v1
    8 w4 L* @/ V% r& p/ f" w
24. 
    
25.         - name: Build project
    
26.           run: npm run build
    
27. 
    : e5 q# w! C! J; S: F, ]3 e
28.         - name: Upload production-ready build files
    3 a7 g7 d' q6 a( z5 H  c2 E+ L
29.           uses: actions/upload artifact@v2
    2 H5 W  E: X. l  Q3 l0 F1 M8 C
30.           with:
    
31.             name: production-files
    
32.             path: ./dist
    
33. 
    6 V0 u) D" i* p6 Q/ N
34.   deploy:
    
35.     name: Deploy
    9 p0 H# Q8 N7 g8 t' Y% e( p
36.     needs: build
    
37.     runs-on: ubuntu-latest
    
38.     if: github.ref == 'refs/heads/master'
    % ?5 G7 c( i) R3 i
39. 
    " Q$ l  k9 ^: Q$ o/ }$ Z5 x
40.     steps:
    
41.       - name: Download artifact
    
42.         uses: actions/download-artifact@v2
    - ?& q, k! W0 s0 o
43.         with:
    $ [. J/ M' Q: z3 B/ i
44.           name: production-files
    . }) ?* O- ?$ C3 w
45.           path: ./dist
    
46. 
    
47.       - name: Deploy to GitHub Pages
    
48.         uses: peaceiris/actions-gh-pages@v3
    
49.         with:
    ; Z7 i& p6 s" D
50.           github_token: ${{ secrets.GITHUB_TOKEN }}
    - R+ d3 v& M# ^! y3 Z! f
51.           publish_dir: ./dist

复制代码

这个部署工作流会在主分支推送时自动触发，包括 构建 和 部署 两个步骤。

构建阶段 指定运行环境，配置 Node.js 版本，并执行 npm install。最终会生成 dist 文件夹，其中包含编译后的文件，就像本地构建一样。

部署阶段 负责下载 dist 文件夹的工件，并将其推送到 GitHub Pages 分支，以便网站自动更新。

保存并提交 deploy.yml 后，检查 Git 状态 (git status)，确保 vite.config.ts 和 tonconnect-manifest.json 已更新。然后运行：

1. git commit -m "Workflow"
     P/ F1 [5 Z0 l: \; ]+ j# b3 a6 G

复制代码

很好，我们已经准备好了这个工作流！我们进入 GitHub 仓库设置，"操作">"常规"，确保工作流权限设置为 "读写"；否则我们将无法创建文件夹。

推送代码

下一步是推送我们提交的内容。回到 .gitignore 并使用以下命令:

1. git push origin master
   ) ^0 d& G9 b9 W" ^7 ?& t

复制代码

前往 GitHub 仓库中的 "操作 "选项卡，查看工作流程的运行情况。如有必要，请刷新：

. D: v: k! {+ F+ ^

您可以点击一个工作流程，查看它目前正在做什么：

# \; e& h/ }& t* w2 S3 L

这个工作流的最终结果是一个名为 gh-pages 的新分支。每次向主分支推送更新时，工作流会运行并重新创建 gh-pages，确保部署的版本始终是最新的。

部署 GitHub Pages

• 进入 Settings > Pages，在 Build and Deployment 选项中选择 gh-pages 分支。
• 返回 Actions 页面，查看工作流的运行状态，它正在将 dist 文件夹部署到子域。
  

测试 GitHub Pages

• 部署完成后，在 Settings > Pages 页面顶部找到网站链接，点击访问，确认它正常运行。
• 测试功能：点击 连接钱包 → 选择 Wallet > Tonkeeper → 扫描二维码。
• 升级 清单文件 后，检查是否正确显示 图标和名称，以及所有操作按钮是否正常。
  

- `  N+ w. Q8 C1 U

点击 "递增 5" 后，所有操作都在域上执行。交易确认后，区块链数据更新，计数器变为 10，同时合约余额增加，反映交易费用的支出。

部署完成！

我们成功将第一个 dApp 部署到生产环境，测试网与主网的流程相同，具体推送哪些证书和代码由你决定。至此，你已构建并上线了一个公开可访问的 Web 应用。

下一步

在下一章，我们将学习如何将该界面嵌入 Telegram，并构建一个 聊天机器人界面，让用户通过钱包进行交互。你将探索聊天机器人和网页界面的区别，并掌握其实现方式。

敬请期待，我们将迈向新的知识领域！ 🚀