Docker容器部署前端Vue服務(wù)(小白教程)
需要工具
- Xftp
- Xshell
首先對前端項(xiàng)目進(jìn)行打包：npm run build
打包完成
在項(xiàng)目中生成dist文件：
通過Xshell在/home目錄下創(chuàng)建項(xiàng)目文件夾
mkdir xxxx（文件名）
通過Xftp將打包的dist文件上傳到服務(wù)器的項(xiàng)目文件夾下；
利用Xshell在拉起nginx鏡像
docker pull nginx
在項(xiàng)目文件夾下編寫nginx config配置文件
vim default.conf
default.conf內(nèi)容如下：
server {
listen 80;
server_name localhost; # 修改為docker服務(wù)宿主機(jī)的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}該配置文件定義了首頁的指向?yàn)?nbsp;/usr/share/nginx/html/index.html, 所以我們可以一會把構(gòu)建出來的index.html文件和相關(guān)的靜態(tài)資源放到/usr/share/nginx/html目錄下。
在項(xiàng)目文件夾下編寫Dockerfile文件
vim Dockerfile
Dockerfile內(nèi)容如下：
FROM nginx MAINTAINER zouzou RUN rm /etc/nginx/conf.d/default.conf ADD default.conf /etc/nginx/conf.d/ COPY dist/ /usr/share/nginx/html/
Dockerfile內(nèi)容解釋
FROM nginx：該鏡像是基于nginx:latest鏡像構(gòu)建的 MAINTAINER zouzou：添加說明 RUN rm /etc/nginx/conf.d/default.conf：刪除目錄下的default.conf文件 ADD default.conf /etc/nginx/conf.d/：將default.conf復(fù)制到/etc/nginx/conf.d/下，用本地的default.conf配置來替換nginx鏡像里的默認(rèn)配置 COPY dist/ /usr/share/nginx/html/：將項(xiàng)目根目錄下dist文件夾（構(gòu)建之后才會生成）下的所有文件復(fù)制到鏡像/usr/share/nginx/html/目錄下
如下三個(gè)文件保持在同一目錄 
構(gòu)建docker鏡像
docker build -t xxxx .
注意不要少了最后的“.”(點(diǎn)) -t是給鏡像命名，.(點(diǎn))是基于當(dāng)前目錄的Dockerfile來構(gòu)建鏡像
查看剛剛構(gòu)建的鏡像
docker images | grep xxxx
啟動(dòng)docker容器
docker run -d -p 9090:80 --name test xxxx
解釋：
- docker run：基于鏡像啟動(dòng)一個(gè)容器
- -d：后臺方式啟動(dòng)
- -p 9090:80: 端口映射，將宿主機(jī)的9090端口映射到容器的80端口
- --name：容器名，我起的叫test
- xxxx：要啟動(dòng)的鏡像名稱
查看啟動(dòng)的容器
docker ps
訪問
現(xiàn)在我們已經(jīng)啟動(dòng)了，訪問宿主機(jī)的地址:9090就可以看到我們部署的網(wǎng)站了
到此這篇關(guān)于Docker容器部署前端Vue服務(wù)(小白教程)的文章就介紹到這了,更多相關(guān)Docker容器部署Vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用docker在linux環(huán)境中部署springboot包的教程
這篇文章主要介紹了使用docker在linux環(huán)境中部署springboot包,本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-03
這篇文章主要介紹了docker如何安裝啟動(dòng)mysql8.x問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了Docker數(shù)據(jù)卷和容器編排的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Docker私有倉庫Registry部署的實(shí)現(xiàn)
這篇文章主要介紹了Docker私有倉庫Registry部署的實(shí)現(xiàn)，私有倉庫最常用的就是Registry、Harbor兩種，本文詳細(xì)介紹如何搭建registry私有倉庫，感興趣的可以了解一下2020-06-06
Docker部署Jenkins持續(xù)集成(CI)工具的實(shí)現(xiàn)
Jenkins 是一個(gè)流行的開源自動(dòng)化工具,廣泛應(yīng)用于持續(xù)集成（CI）和持續(xù)交付（CD）的環(huán)境中,本文介紹了使用Docker部署Jenkins,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
Windows遠(yuǎn)程連接Docker服務(wù)的操作方法
本文介紹了在Windows系統(tǒng)下如何通過配置遠(yuǎn)程連接到Docker服務(wù)端,實(shí)現(xiàn)Docker客戶端遠(yuǎn)程訪問和管理Docker容器,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-11-11
本文主要介紹了Dockerfile制作鏡像的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
Docker部署Tomcat并開放8082端口的實(shí)現(xiàn)步驟
本文主要介紹了Docker部署Tomcat并開放8082端口的實(shí)現(xiàn)步驟,首先安裝docker環(huán)境,創(chuàng)建tomcat鏡像,隨后開放端口,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
Docker 打包 K8s鏡像的應(yīng)用實(shí)例
文章介紹了如何使用Docker打包和部署Kubernetes鏡像,包括準(zhǔn)備工作、創(chuàng)建Dockerfile、構(gòu)建鏡像、測試運(yùn)行、推送鏡像、Kubernetes部署文件示例、部署到Kubernetes等步驟,并提供了注意事項(xiàng)和最佳實(shí)踐,感興趣的朋友一起看看吧2025-03-03
Docker實(shí)現(xiàn)掛載有多種方式,下面給大家分享Docker實(shí)現(xiàn)掛載常見方式,感興趣的朋友跟隨小編一起看看吧2023-11-11