前言

平時開發我會寫一些小demo，我自己覺得有用的會集中起來形成一個專案，本來想利用gitee的gitee page直接部署出來，但後面瞭解了下，它只支援官網之類的靜態頁面，無法與後臺資料互動，想要完整的服務還是得有自己的伺服器(我整了個輕量應用伺服器)，接下來我就以此專案為例子，不用敲一行程式碼，將其部署到雲端，並記錄下具體步驟。

效果

話不多說，先看結果。

• 瀏覽連結：http://xisite.top/
• 我做了個特效封面，有滑鼠滑動的漣漪效果，用的ripples.js。
  
• 具體內容就下面這些，有些是自己開發的，有些是學習過程中收集的，之前疫情視覺化的專案https://www.cnblogs.com/xi12/p/16690119.html 也在裡面。
  
  

伺服器

我自己的話，第一步肯定是買現成的雲伺服器，當然你要買物理裝置搭建的話，那你是大佬，下面的你就不用看了。我大概看了下騰訊，阿里，華為等等都是類似的，都可以，我選了阿里的，就以此為例子。

1. 直接進阿里雲官網，在產品裡面找到輕量應用伺服器。
   
   
2. 選擇伺服器範例，區域儘量選擇靠近自己位置的，應用映象為寶塔(一個伺服器管理應用)，沒有選到寶塔也無所謂，後面可以重置。
   
3. 購買完成後從這裡進入產品控制檯。
   
   我自己個人使用對機器效能沒有過多要求，買的是2核2g記憶體50g固態。
   
4. 點選"我的輕量"進入伺服器詳情，之前不是寶塔映象的可以點選系統重置，選中寶塔進行重置。
   
5. 在「應用詳情」中找到寶塔面板資訊。點選遠端連線的Workbench一鍵連線，在彈出的命令列介面中依此輸入這三條命令。獲取面板地址、使用者名稱、密碼。
   
6. 登入進入後，即可通過該寶塔面板控制管理你的伺服器。
   
   
   面板進不去的需要在防火牆中開放8888埠。
   

專案部署

上面伺服器相關的就處理完了，接下來是處理專案的部署。

1. 點選「網站」中的新增站點，輸入位址列的ip地址(自己有域名的也可以直接填寫域名，但需要解析)。
   
2. 點選「檔案」。站點新增成功後會在這個：/www/wwwroot/目錄下自動生成以你網站名為名的資料夾。
   
3. 將你專案打包後生成的dist檔案直接拖拽上傳到你的網站名資料夾下，我是純web前端專案，沒後臺的，這裡就不做後端部署說明。
   
4. 在瀏覽器中輸入你的ip地址或域名，是不是頁面已經出來了？沒出來的話需要在防火牆中開放80埠，同時點選：網站--設定--防盜鏈--允許空HTTP_REFERER請求。出來的仔細瀏覽你的頁面會發現使用了介面的地方會報跨域錯誤。你需要使用nginx進行反向代理。在「軟體商店」中找到nginx進行安裝。
   
5. 安裝完成後，點選：網站--設定--新增反向代理。
   

域名

有了ip，為什麼還要域名呢？其實使用ip完全是可以存取使用的，但為了方便人們記憶使用方便所以才出現了域名。一般的頂級域名比較貴，也就知名度比較高，利於seo優化，自己使用的話選一個便宜的也無所謂，我就用了top。

證書

在使用chrome或者edge存取你自己的頁面時，相信你已經發現了，百度、阿里、騰訊之類的網站在位址列有個小鎖的圖示，但自己的卻是個感嘆號，標記了不安全。把地址拷出來，會發現他們都是https開頭的，自己的卻是http開頭的，這是由於沒有證書的原因，影響到的就是網站安全性，對於自己的網站要求不高的可以不用管，畢竟我自己私人的玩意兒不值幾個錢，沒人會搞你。但想要證書的也可以自己去買一般比較貴，有免費的，但安全性不高。

結語

此文章僅做自己釋出專案的一個記錄，可能還有其他紕漏的地方請見諒。