新手建站就用這個(gè)方法，無(wú)需購(gòu)買服務(wù)器10分鐘快速部署你的靜態(tài)網(wǎng)頁(yè)

時(shí)間：2023-10-12 13:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-12 13:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

新手建站就用這個(gè)方法，無(wú)需購(gòu)買服務(wù)器10分鐘快速部署你的靜態(tài)網(wǎng)頁(yè)：阿里云云開發(fā)平臺(tái)重磅推出開源應(yīng)用中心，聚合最熱門的開源應(yīng)用，讓你像安裝app一樣快速上線一個(gè)網(wǎng)站。面向新人和持續(xù)活躍的開發(fā)者用戶推出上線激勵(lì)加油包，最高100元無(wú)門檻代金券免費(fèi)送，現(xiàn)在體驗(yàn)還能夠領(lǐng)取年輕人的養(yǎng)生神器，桌面不銹鋼保溫杯！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

原文鏈接

本文為阿里云原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。