本文主要介紹了騰訊云服務(wù)器部署前后分離項(xiàng)目之前端部署，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

騰訊云服務(wù)器部署前后分離項(xiàng)目之前端部署

使用XShell連接騰訊云遠(yuǎn)程服務(wù)器

在這里插入圖片描述

使用docker命令獲取Nginx鏡像

這里使用Nginx來(lái)作為前端的開(kāi)發(fā)環(huán)境

docker pull nginx

查看鏡像是否獲取成功

docker images

在這里插入圖片描述

編寫Dockerfile文件

FROM nginx
COPY ./dist/ /usr/share/nginx/html/

使用Xftp將Dockerfile和Vue等打包好的前端項(xiàng)目放到自己想要放置的位置

使用xftp連接遠(yuǎn)程騰訊云服務(wù)器同Xshell

在這里插入圖片描述

使用Xshell進(jìn)入到Xftp上傳文件的根目錄

在這里插入圖片描述

使用Xshell執(zhí)行docker命令制作docker鏡像，注意后面還有個(gè)”空格+."

#iname是你給將要?jiǎng)?chuàng)建的鏡像進(jìn)行所命的名
docker build -t iname .

這里我的鏡像名字叫hncj-web

在這里插入圖片描述

使用Xshell執(zhí)行docker命令用剛才創(chuàng)建的鏡像映射出一個(gè)新的容器

#cname是給將要?jiǎng)?chuàng)建的容器的命名，iname是容器所映射的鏡像名字
#8080是外部方位的接口，8081是容器內(nèi)的接口
 docker run -d --restart=always --name cname -p 8080:8081 iname

這里我的容器名字叫hncj-web

在這里插入圖片描述

使用你服務(wù)器的外網(wǎng)IP加你所設(shè)置的端口號(hào)訪問(wèn)

這是我自己的項(xiàng)目運(yùn)行界面

在這里插入圖片描述

到此這篇關(guān)于騰訊云服務(wù)器部署前后分離項(xiàng)目之前端部署的文章就介紹到這了,更多相關(guān)騰訊云服務(wù)器部署前后分離項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: