靜態網頁(靜態網頁的擴展名)

阿里云云開發平臺重磅推出開源應用中心，聚合最熱門的開源應用，讓你像安裝app一樣快速上線一個網站。面向新人和持續活躍的開發者用戶推出上線激勵加油包，最高100元無門檻代金券免費送，現在體驗還能夠領取年輕人的養生神器，桌面不銹鋼保溫杯！

聚合最熱門的開源應用

開源應用中心聚合了目前最熱門的前端開源應用模版，讓大家真正可以做到像安裝APP一樣來上線一個網站。目前已經支持最熱門的前端框架，包括Vue.js、React、Nuxt.js、Next.js、AntDesign等，還有內容管理平臺Hexo、Docusaurus、VuePress、Sapper等。使用部署開源模版非常適合您的以下場景：

個人學習：輕松創建個人主頁、博客等網站，邊部署邊學習。協同開發：創建信息管理系統、CMS等前端項目，多人協同維護開發。

云開發平臺同樣面向廣大的開源作者征集應用，對于熱門的應用我們能夠提供現金激勵、以及流量曝光等扶持。

開源應用一鍵同步一鍵部署

阿里云云開發平臺前端應用部署功能旨在為前端開發者改善工作環境，優化前端開發和部署體驗。同時還可以結合云開發平臺云原生的架構能力和主機應用的部署能力，讓前后端應用能夠更高效地協同。

操作簡單：無需購買服務器、配環境、手動上傳文件等，云開發平臺都可以幫你自動操作，包括在需要時隨時一鍵上線/下線。使用零成本: 支持GitHub和云效的Codeup倉庫，快速將倉庫的代碼進行構建部署。免費資源扶持: 免費提供臨時的測試域名，對于新用戶和持續活躍的用戶提供免費的云資源加油包。無數量限制: 沒有使用的repo數量和應用數量的限制, 不管是開源倉庫還是自己賬戶下的repo，每一個代碼repo都可以部署為一個靜態網站。簡單幾步使用云開發平臺上線靜態應用

1. 賬號準備工作

你需要一個阿里云賬號，并使用阿里云賬號登錄云開發平臺 (https://workbench.aliyun.com/)，按照提示創建團隊，點擊同意協議。沒有阿里云賬號就在登錄頁面注冊一個繼續登錄。擁有Github賬號 (https://github.com/)，沒有就注冊一個。為保證最好的使用體驗，請使用Chrome瀏覽器。未開通阿里云OSS的用戶，點擊鏈接 (https://workbench.aliyun.com/product/open?code=oss)開通OSS服務。OSS開通免費，有一定的免費額度，超過額度之后按量付費。

2. 創建應用

2.1 選擇應用中心任意模版創建應用

選擇應用中心任意模版創建應用。如果您之前沒有使用過云開發平臺，會出現云資源授權管理的選項，往下拉出現直至同意授權的字樣，點擊「同意授權」后出現授權成功，點擊進入「下一步」。綁定GitHub賬號。授權完成后選擇來源倉庫為GitHub，按照提示點擊去綁定，綁定GitHub帳號，登錄后并點擊Authorize AliyunWorkbench允許云開發平臺構建、發布你的GitHub代碼為可訪問的網站。 綁定完成后返回應用創建頁面，代碼倉庫按照默認「模板倉庫」以及默認主干分支不用操作，并點擊「下一步」。填寫應用信息完成創建。填寫必要的的應用信息完成創建（我們已提供默認配置），成功后進入到應用詳情和部署界面。首次登錄并沒有可選所屬生產線，點擊右側自動創建產品線即可。

2.2 使用自己的倉庫應用創建

選擇自己倉庫里需要部署的應用。除了可以使用應用中心的模版創建網站，云開發平臺也支持使用本地代碼或者開源代碼創建靜態網站。與通過模版中心的應用創建的區別在于，在綁定Gihutb之后選擇“自己的倉庫”，找到上一步自己創建的GitHub倉庫及master分支。然后在應用詳情頁面根據以上的步驟繼續填寫即可。設定部署配置。當部署的是您自己的代碼倉庫時，開發平臺需要您根據具體代碼進行簡單配置來部署成功：編寫build.sh：代碼從源碼，經過npm打包編譯等過程，到生成為純粹HTML/CSS/JS靜態文件的全過程的shell指令，需要被完整填寫到發布分支根路徑下的build.sh文件中，例如：

不知道如何操作？您也可直接點擊一次“部署”按鈕，之后，對默認生成的build.sh內容進行任意修改：

b. 填寫靜態文件相對目錄：在build.sh執行后，從代碼生成出的靜態文件所在的相對目錄，需要被填寫到“部署配置-資源路徑”中。

Tip：例如React應用（如圖），一般會填寫“./build”；Vue應用則一般為“./dist”。

c. 調整配置：當您完成上述步驟后，發現自己的代碼仍然部署錯誤時，需查看排查部署日志，對上面的build.sh和部署資源路徑進行修改。常見的幾種部署錯誤情況如下：

3. 在日常環境部署站點

一鍵進行應用部署。在應用詳情頁面點擊日常環境的「部署」按鈕進行一鍵部署，部署狀態變成綠色已部署以后可以點擊訪問部署網站查看效果。Dinosaurs網站日常環境部署好了。日常環境的測試域名也是可以訪問的，點擊訪問已部署網站按鈕會出現一個彈出，點擊彈出上的立即訪問就能夠訪問已經部署好的站點了。在部署完成后，可以繼續本地編碼，并將代碼push到應用的“基本信息”中對應的代碼倉庫內。

4. 配置自定義域名在線上環境上線

配置線上環境自定義域名。在功能開發驗證完成后要在線上環境進行部署，在線上環境的「部署配置」-「自定義域名」中填寫自己的域名。例如我們添加一個二級域名 company.workbench.fun 來綁定我們部署的前端應用。然后復制自定義域名下方的API網關地址對添加的二級域名進行CNAME配置。配置CNAME地址。復制好 API網關域名地址后，來到你自己的域名管理平臺（此示例中的域名管理是阿里云的域名管理控制臺，請去自己的域名控制臺操作）。添加記錄的「記錄類型」選擇「CNAME」，在「主機記錄」中輸入你要創建的二級域名，這里我們輸入「company」，在「記錄值」中粘貼我們之前復制的 API網關域名地址，「TTL」保留默認值或者設置一個你認為合適的值即可。在線上環境部署上線。回到云開發平臺的應用詳情頁面，按照部署的操作，點擊線上環境的「部署按鈕」，部署完成以后就在你自定義的域名進行了上線。CNAME 生效之后，我們輸入 company.workbench.fun（示例網址） 可以打開部署的頁面。至此，如何部署一個應用到線上環境，如何綁定自己的域名來訪問一個線上的應用就完成了，趕緊部署自己的應用到線上環境，用自己的域名玩起來吧 ；）

原文鏈接：https://developer.aliyun.com/article/829641?utm_content=g_1000314028

本文為阿里云原創內容，未經允許不得轉載。