使用腾讯云托管部署前端项目
背景介紹
最近騰訊云和微信團隊聯合推出的后端上云新姿勢——微信云托管!可以使用開源模版,也可以直接使用Git項目來進行項目構建部署。并且是免運維的,無需服務器,1分鐘部署小程序/公眾號/網站服務端。周末抽時間體驗了一下,下面以部署一個前端項目為例,來簡單展示一下云托管的使用方法。目前云托管是免費額度,大家可放心體驗。
使用項目
雖然云托管主推的是后端上云,但其實只要構建出容器就可以。本次演示使用的項目是
https://gitee.com/alone_snake/vitepro,該項目托管在gitee上,是一個公開項目。
這是一個使用vite構建的前端項目模版,項目根目錄下有Dockerfile。內容為
FROM node:12.21.0-alpine as builder WORKDIR /app COPY package.json . RUN yarn COPY . . RUN yarn build FROM nginx:latest COPY --from=builder /app/dist /usr/share/nginx/html項目需要使用Nodejs來編譯構建,最后將編譯出的靜態文件(存放在dist目錄)都拷貝到nginx鏡像的/usr/share/nginx/html目錄
云托管操作流程
很多同學搞不清楚云托管與云開發的關系,這里我根據官方的文檔來給大家講解一下,
云開發是指微信團隊聯合騰訊云推出的專業的小程序開發服務,只針對小程序,但也有一部分是支持公眾號玩耶開發的,開發者無需搭建服務器,可免鑒權直接使用平臺提供的 API 進行業務開發,開發者可以直接使用官方提供的api來操作云數據庫中的數據。
云托管是講項目的部署,運維給管理起來,屬于項目開發流程之后的,項目開發完,需要部署,運維這時可以使用云托管。
登錄
多的不說了,因為這是實踐課,
要使用云托管,首先需要登錄云托管的
微信云托管登錄地址 https://cloud.weixin.qq.com/cloudrun/qrLogin?nextpage=console&act=tap_banner_freetry_notLogin
使用個人微信掃描,然后選擇微信下的小程序或公眾號。
第一次登錄后可以直接選擇模版進行部署。
開發者可以選擇自己需要的模版進行體驗。
選擇Spirng boot模版進行部署
部署完成后就會出現部署后的信息, 包括服務訪問的公網域名地址,數據庫,代碼源
以上是基于官方提供的模版來進行部署體驗。下面使用自己開發的前端項目來部署。
創建服務
進入收入,點擊服務管理,點擊創建服務
輸入服務名稱,開啟公網訪問
創建服務名稱后,需要選擇代碼,這里可以綁定Github,或GitLab
一共有五種方式,GitHub,GitLab, Gitee,手動上傳代碼,拉取鏡像。
前三種都需要登錄平臺進行授權,這種方式可以使用webhook,提交代碼后就能立即構建,通過運行流水線,部署一個新的版本。
以下是Gitee的授權
授權后,在代碼倉庫處就能夠選擇自己賬號下的所有項目
然后要部署服務的分支和容器暴露的端口。這里需要注意一點的是,選擇的項目需要都已經容器化了,意思就是項目中有Dockerfile,能夠構建出鏡像。如果滿足以上條件,則是無法進行部署的。
高級設置中可以設置一些構建時的環境變量,也可以指定Dockerfile的名稱。
填寫完成后,點擊發布。
進入部署環境。
根據所打印的日志可以推斷出一下內容,
整個流水是在Jenkins運行的
檢出代碼
登錄騰訊的鏡像倉庫
開始構建鏡像
構建完成后 推送 Docker 鏡像到 TCR
開始部署服務
部署完成后,點擊服務首頁的公網訪問就可以訪問到部署的頁面。
如下
CI/CD
修改項目部分代碼,推送到Gitee,默認將代碼推送到master分支就會自動觸發流水線。
點擊版本的詳情可以查看構建部署的日志。
其中版本列表的備注就是本次提交的信息。
其他功能
可以查看服務的日志
可以云端調試,相當于一個簡陋的在線postman。
服務監控,主要用于后端
可以為一個項目配置多個環境
設置自定義域名,只需要綁定域名,并將綁定的CNAME記錄添加到域名解析中。
云托管的底層還是K8s,容器編排,Jenkins。
最后希望大家都能用的愉快。
總結
以上是生活随笔為你收集整理的使用腾讯云托管部署前端项目的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 光栅立体画
- 下一篇: 小程序云开发前端显示云存储的图片