5.5 将 dApp 部署到 Github

riyad

' D3 w# |+ p7 ?. j. i. ~

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

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

1. echo "# first_contract_front_end" >> README.md
   , K' W1 ~7 C3 P$ r. e, R  M. S
2. git init
   . i. a- U/ W! }. @
3. git add README.md
   
4. git commit -m "first commit"
   2 C3 q- c" V! F7 Z3 }
5. git branch -M main
   ; Z8 x6 W- t, Q" ?; H) h
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 文件。好极了。现在把所有东西都加进去吧：

1. git add .
   

复制代码

提交初始提交：

# O/ @& ^2 m1 U8 w

1. git commit -m "Initial commit"
   

复制代码

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

1. git remote add origin https://github.com/xxxxxxxx/first_contract_front_end.git
   

复制代码

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

1. git push origin master
   

复制代码

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

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

1. "url": "https:///join.toncompany.org"
   8 ]( Q: V5 l# s

复制代码

那我们就用这个名字：

1. "name": "TON&Co. Tutorial"
   0 X% Y+ F: a' Y3 a

复制代码

然后是图标 URL。我们希望它也成为资源库的一部分。因此，我现在要在公共文件夹中放置一个图标文件，但稍后我会在这里创建一个适当的 URL，一旦我们部署了这个文件，它就会指向这个文件。目前，链接看起来是这样的，因为一旦我们构建了项目，公共文件夹实际上会解析到根目录：
$ M$ ^+ A# u' m8 o

1. "iconUrl": "https://xxxxxxxxx.github.io/first_contract_front_end/icon.png"
   - O+ e( j' s8 Q# a. w4 b

复制代码

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

1. {
   
2. "url": "https://join.toncompany.org",
   
3. "name": "TON&Co. Tutorial",
   
4. "iconUrl": "https://xxxxxxxxxxxx.github.jo/first_contract_front_end/icon.png"
   ! s* K2 p3 u' }/ g. A$ q: Q1 m
5. }

复制代码

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

1. const manifestUrl = "https://xxxxxxxxxxxx.github.io/first_contract_front_end/tonconnect-manifest.json"
   / x4 H+ |. u: Y4 ?

复制代码

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

1. // https://vitejs.dev/config/
   
2. export default defineConfig({
   2 h, J0 P0 s% n. j* Y
3.   plugins: [react (), nodePolyfills()],
   
4.   base: "/",
   1 u4 U8 m% d9 I2 s/ }. Q
5. });

复制代码

这个 base 不会是 root，因为我们还有另一个 base：在我的例子中是 first_contract_front_end。这是 GitHub 的规则：仓库名称必须是基本路径。所以我们就把它作为项目的基础：
0 r# v1 b  c& C

1. // https://vitejs.dev/config/
   & d- V& ?$ N5 |3 `1 ]
2. export default defineConfig({
   $ K# z4 \% @' U' C  ?
3.   plugins: [react (), nodePolyfills()],
   
4.   base: "/first_contract_front_end/",
   
5. });

复制代码

创建 GitHub 工作流程

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

1. yarn build
   

复制代码

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

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

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

1. name: Deploy
   2 k( L8 B+ d+ S
2. 
   
3. on:
   
4.   push:
   ( }: R7 i  ^% x6 W+ J
5.     branches:
   " _& }( g4 ^9 r8 O! u0 C1 T# B! F
6.       - master
   
7. 
   1 ?, p9 W) O! e, e/ L2 d
8. jobs:
   + X' Y; r6 D6 }' L8 T: Q
9.   build:
   
10.     name: Build
    
11.       runs=on: ubuntu-latest
    
12. 
    . Q* g" E4 ~8 G4 r/ O1 O/ x0 m0 B
13.       steps:
    
14.         - name: Checkout repo
    
15.           uses: actions/checkout@v2
    
16. 
    
17.         - name: Setup Node
    + Z  S- Y8 f7 }  O# n
18.           uses: actions/setup-node@v1
    
19.           with:
    
20.             node-version: 16
    
21. 
    
22.         - name: Install dependencies
    
23.           uses: bahmutov/npm-install@v1
    
24. 
    
25.         - name: Build project
    . F9 t: t! J! ]/ Q; q9 w: H' v! p
26.           run: npm run build
    
27. 
      S" p6 B" k$ c- t, C
28.         - name: Upload production-ready build files
    
29.           uses: actions/upload artifact@v2
    , g' P4 h" L% b7 s' b% L. O
30.           with:
    
31.             name: production-files
    2 z' r% K# C: x. E2 y( h
32.             path: ./dist
    . S7 j. H0 S5 O) E, t. A6 A( ]  W
33. 
    4 f; o1 H6 M, B9 ]' |" L
34.   deploy:
    
35.     name: Deploy
    
36.     needs: build
    ' r, W2 u* R/ G7 H" V" O' ?
37.     runs-on: ubuntu-latest
    
38.     if: github.ref == 'refs/heads/master'
    ( K/ H. ~  {" ^% }  `, {
39. 
    0 ?9 ^  ~# P' T5 E$ h
40.     steps:
    
41.       - name: Download artifact
    
42.         uses: actions/download-artifact@v2
    
43.         with:
    
44.           name: production-files
    % y; @6 n! v$ z' h$ e" W7 P/ k# ^1 y
45.           path: ./dist
    
46. 
    * n9 a$ v; v0 ?( n+ o' H# _
47.       - name: Deploy to GitHub Pages
    ; r( _  u7 l/ V6 a
48.         uses: peaceiris/actions-gh-pages@v3
    % U- S2 u, N4 y8 Z$ S" j8 m
49.         with:
    . D# @8 g1 g9 t) v3 O8 |4 A; Q
50.           github_token: ${{ secrets.GITHUB_TOKEN }}
    1 z- F/ d8 g/ U, l: }  v
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"
   5 A) |; h, v! r6 O$ }/ X

复制代码

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

推送代码

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

1. git push origin master
   

复制代码

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

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

: e7 F% b4 O( o  R- z

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

部署 GitHub Pages

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

测试 GitHub Pages

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

6 z( F3 v( ?. W4 U. v7 u& V8 R

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

部署完成！

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

下一步

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

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