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

聚合最熱門的開源應(yīng)用

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

• 個人學(xué)習(xí)：輕松創(chuàng)建個人主頁、博客等網(wǎng)站，邊部署邊學(xué)習(xí)。
• 協(xié)同開發(fā)：創(chuàng)建信息管理系統(tǒng)、CMS等前端項目，多人協(xié)同維護(hù)開發(fā)。

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

開源應(yīng)用一鍵同步一鍵部署

阿里云云開發(fā)平臺前端應(yīng)用部署功能旨在為前端開發(fā)者改善工作環(huán)境，優(yōu)化前端開發(fā)和部署體驗。同時還可以結(jié)合云開發(fā)平臺云原生的架構(gòu)能力和主機應(yīng)用的部署能力，讓前后端應(yīng)用能夠更高效地協(xié)同。

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

簡單幾步使用云開發(fā)平臺上線靜態(tài)應(yīng)用

1. 賬號準(zhǔn)備工作

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

2. 創(chuàng)建應(yīng)用

2.1 選擇應(yīng)用中心任意模版創(chuàng)建應(yīng)用

• 選擇應(yīng)用中心任意模版創(chuàng)建應(yīng)用。如果您之前沒有使用過云開發(fā)平臺，會出現(xiàn)云資源授權(quán)管理的選項，往下拉出現(xiàn)直至同意授權(quán)的字樣，點擊「同意授權(quán)」后出現(xiàn)授權(quán)成功，點擊進(jìn)入「下一步」。

• 綁定GitHub賬號。授權(quán)完成后選擇來源倉庫為GitHub，按照提示點擊去綁定，綁定GitHub帳號，登錄后并點擊Authorize AliyunWorkbench允許云開發(fā)平臺構(gòu)建、發(fā)布你的GitHub代碼為可訪問的網(wǎng)站。 綁定完成后返回應(yīng)用創(chuàng)建頁面，代碼倉庫按照默認(rèn)「模板倉庫」以及默認(rèn)主干分支不用操作，并點擊「下一步」。

• 填寫應(yīng)用信息完成創(chuàng)建。填寫必要的的應(yīng)用信息完成創(chuàng)建（我們已提供默認(rèn)配置），成功后進(jìn)入到應(yīng)用詳情和部署界面。首次登錄并沒有可選所屬生產(chǎn)線，點擊右側(cè)自動創(chuàng)建產(chǎn)品線即可。

2.2 使用自己的倉庫應(yīng)用創(chuàng)建

• 選擇自己倉庫里需要部署的應(yīng)用。除了可以使用應(yīng)用中心的模版創(chuàng)建網(wǎng)站，云開發(fā)平臺也支持使用本地代碼或者開源代碼創(chuàng)建靜態(tài)網(wǎng)站。與通過模版中心的應(yīng)用創(chuàng)建的區(qū)別在于，在綁定Gihutb之后選擇“自己的倉庫”，找到上一步自己創(chuàng)建的GitHub倉庫及master分支。然后在應(yīng)用詳情頁面根據(jù)以上的步驟繼續(xù)填寫即可。

• 設(shè)定部署配置。當(dāng)部署的是您自己的代碼倉庫時，開發(fā)平臺需要您根據(jù)具體代碼進(jìn)行簡單配置來部署成功：

1. 編寫build.sh：代碼從源碼，經(jīng)過npm打包編譯等過程，到生成為純粹HTML/CSS/JS靜態(tài)文件的全過程的shell指令，需要被完整填寫到發(fā)布分支根路徑下的build.sh文件中，例如：

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

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

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

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

3. 在日常環(huán)境部署站點

• 一鍵進(jìn)行應(yīng)用部署。在應(yīng)用詳情頁面點擊日常環(huán)境的「部署」按鈕進(jìn)行一鍵部署，部署狀態(tài)變成綠色已部署以后可以點擊訪問部署網(wǎng)站查看效果。

• Dinosaurs網(wǎng)站日常環(huán)境部署好了。日常環(huán)境的測試域名也是可以訪問的，點擊訪問已部署網(wǎng)站按鈕會出現(xiàn)一個彈出，點擊彈出上的立即訪問就能夠訪問已經(jīng)部署好的站點了。在部署完成后，可以繼續(xù)本地編碼，并將代碼push到應(yīng)用的“基本信息”中對應(yīng)的代碼倉庫內(nèi)。

4. 配置自定義域名在線上環(huán)境上線

• 配置線上環(huán)境自定義域名。在功能開發(fā)驗證完成后要在線上環(huán)境進(jìn)行部署，在線上環(huán)境的「部署配置」-「自定義域名」中填寫自己的域名。例如我們添加一個二級域名 company.workbench.fun 來綁定我們部署的前端應(yīng)用。然后復(fù)制自定義域名下方的API網(wǎng)關(guān)地址對添加的二級域名進(jìn)行CNAME配置。

• 配置CNAME地址。復(fù)制好 API網(wǎng)關(guān)域名地址后，來到你自己的域名管理平臺（此示例中的域名管理是阿里云的域名管理控制臺，請去自己的域名控制臺操作）。添加記錄的「記錄類型」選擇「CNAME」，在「主機記錄」中輸入你要創(chuàng)建的二級域名，這里我們輸入「company」，在「記錄值」中粘貼我們之前復(fù)制的 API網(wǎng)關(guān)域名地址，「TTL」保留默認(rèn)值或者設(shè)置一個你認(rèn)為合適的值即可。

• 在線上環(huán)境部署上線。回到云開發(fā)平臺的應(yīng)用詳情頁面，按照部署的操作，點擊線上環(huán)境的「部署按鈕」，部署完成以后就在你自定義的域名進(jìn)行了上線。CNAME 生效之后，我們輸入 company.workbench.fun（示例網(wǎng)址） 可以打開部署的頁面。至此，如何部署一個應(yīng)用到線上環(huán)境，如何綁定自己的域名來訪問一個線上的應(yīng)用就完成了，趕緊部署自己的應(yīng)用到線上環(huán)境，用自己的域名玩起來吧 ；）

審核編輯：符乾江