5.5 将 dApp 部署到 Github

riyad

; S6 S$ K! K- W' Z8 |# r/ w
3 b8 t& I+ |# V% f2 V( P

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

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

1. echo "# first_contract_front_end" >> README.md
   - ^3 ?& E. s8 x* Z) M
2. git init
   
3. git add README.md
   1 ^- d  c1 D: k
4. git commit -m "first commit"
   
5. git branch -M main
   % A/ q1 i5 I) O* t0 H% l) x" b4 e+ U
6. git remote add origin https://github.com/markokhman/first_contract_front_end.git
   
7. git push -u origin main

复制代码

我们从这里开始：

1. git init
   

复制代码

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

8 J3 b' |: B  g  C8 W

1. git add .
   6 k6 g% P9 r% Z% C- b

复制代码

提交初始提交：

8 s2 \" Q( w' U: t% D% A: |8 p

1. git commit -m "Initial commit"
   : a* j' h/ G+ Q8 }

复制代码

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

1. git remote add origin https://github.com/xxxxxxxx/first_contract_front_end.git
   . f; K7 E+ Z9 @, C

复制代码

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

1. git push origin master
   * }, |/ v0 s& \* S

复制代码

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

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

1. "url": "https:///join.toncompany.org"
   ' ~3 E4 r$ P5 ]; g" M, Y* R

复制代码

那我们就用这个名字：

1. "name": "TON&Co. Tutorial"
   9 F) K! A7 _0 g8 l5 v

复制代码

然后是图标 URL。我们希望它也成为资源库的一部分。因此，我现在要在公共文件夹中放置一个图标文件，但稍后我会在这里创建一个适当的 URL，一旦我们部署了这个文件，它就会指向这个文件。目前，链接看起来是这样的，因为一旦我们构建了项目，公共文件夹实际上会解析到根目录：
2 L0 c7 [5 S; ]# z* w( n3 F  r; A

1. "iconUrl": "https://xxxxxxxxx.github.io/first_contract_front_end/icon.png"
   

复制代码

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

1. {
   1 z2 i/ X) W- o/ r! t# T" t4 B: E0 \
2. "url": "https://join.toncompany.org",
   
3. "name": "TON&Co. Tutorial",
   
4. "iconUrl": "https://xxxxxxxxxxxx.github.jo/first_contract_front_end/icon.png"
   
5. }

复制代码

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

1. const manifestUrl = "https://xxxxxxxxxxxx.github.io/first_contract_front_end/tonconnect-manifest.json"
   # K3 A$ Y4 b# E8 _" i( \8 u

复制代码

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

1. // https://vitejs.dev/config/
   
2. export default defineConfig({
   
3.   plugins: [react (), nodePolyfills()],
   
4.   base: "/",
   1 A7 d7 Y7 c5 H' x5 f+ c; W% @
5. });

复制代码

这个 base 不会是 root，因为我们还有另一个 base：在我的例子中是 first_contract_front_end。这是 GitHub 的规则：仓库名称必须是基本路径。所以我们就把它作为项目的基础：
) P5 r: x9 E% T7 U* b3 n2 `4 a) ?8 O

1. // https://vitejs.dev/config/
   3 I9 `, P% r% W( t* a
2. export default defineConfig({
   7 V8 L$ z, Y8 r* m  l2 X' S
3.   plugins: [react (), nodePolyfills()],
   . C9 a+ B% e4 _9 J
4.   base: "/first_contract_front_end/",
   ! `2 S6 s* f5 s" y. }- n& F/ N) i
5. });

复制代码

创建 GitHub 工作流程

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

1. yarn build
   5 {2 G* f- T7 A7 l; K, }

复制代码

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

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

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

1. name: Deploy
   
2. 
   
3. on:
   7 D9 z+ B0 V* @* |4 I5 ^
4.   push:
   
5.     branches:
   
6.       - master
   : \, q$ i0 ~+ C! G( Z7 E9 x: l
7. 
   
8. jobs:
   , Y' s3 C" R, {: ^
9.   build:
   
10.     name: Build
    
11.       runs=on: ubuntu-latest
    5 x: m# C6 W' Y5 L2 v
12. 
    
13.       steps:
    6 L3 C! g: Q6 V' A
14.         - name: Checkout repo
    
15.           uses: actions/checkout@v2
    
16. 
    
17.         - name: Setup Node
    
18.           uses: actions/setup-node@v1
    9 `$ B& u# ]* u6 h5 u3 Q
19.           with:
    : l0 T( Z# }$ y$ u+ X7 q
20.             node-version: 16
    
21. 
    
22.         - name: Install dependencies
    ; N3 i1 U/ v) T; v+ e/ a- e
23.           uses: bahmutov/npm-install@v1
    # O& g/ t. B# Y, Z/ o
24. 
    ' [$ R4 j4 v% a+ a+ {/ u. o8 I" v
25.         - name: Build project
    
26.           run: npm run build
    3 a- E8 G3 q& q  `! R
27. 
    * Q. y2 s7 @# W
28.         - name: Upload production-ready build files
    ' t) i$ Y$ W3 a) M: X) ]( j/ E8 _. R4 a
29.           uses: actions/upload artifact@v2
    
30.           with:
    
31.             name: production-files
    
32.             path: ./dist
    
33. 
    8 e% b! K1 J5 `1 n# O9 I( ?" D
34.   deploy:
    $ p  u% X* d5 j7 F. O. y
35.     name: Deploy
    
36.     needs: build
    + G% U; Q( c# A+ W' G0 C
37.     runs-on: ubuntu-latest
    $ I) |: M! C! X% {8 A5 o
38.     if: github.ref == 'refs/heads/master'
    
39. 
    
40.     steps:
    + Z4 J2 X& R: i* A
41.       - name: Download artifact
    
42.         uses: actions/download-artifact@v2
    8 f) c' |$ Z/ c( Z& g8 s% U
43.         with:
    
44.           name: production-files
    - O9 e  b6 ?2 Q- _  P7 {2 r
45.           path: ./dist
    
46. 
    % P) B4 L& _' ~0 s2 [, |
47.       - name: Deploy to GitHub Pages
    
48.         uses: peaceiris/actions-gh-pages@v3
    
49.         with:
    
50.           github_token: ${{ secrets.GITHUB_TOKEN }}
    
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"
   

复制代码

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

推送代码

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

1. git push origin master
   + H& q- T- f# c% w

复制代码

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

- k! z8 `$ c  m7 `

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

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

部署 GitHub Pages

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

测试 GitHub Pages

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

/ M( Y' L+ a, Q+ Q( O/ |$ o

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

部署完成！

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

下一步

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

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