Docker容器部署前端Vue服務(wù)(小白教程)
需要工具
- Xftp
- Xshell
首先對(duì)前端項(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è)的指向?yàn)?nbsp;/usr/share/nginx/html/index.html
, 所以我們可以一會(huì)把構(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)建之后才會(huì)生成)下的所有文件復(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:后臺(tái)方式啟動(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解使用export/import導(dǎo)出和導(dǎo)入docker容器
本篇文章主要介紹了詳解使用export/import導(dǎo)出和導(dǎo)入docker容器,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07解決Mac下 docker 無(wú)法 ping 通宿主機(jī)的問題
這篇文章主要介紹了解決Mac下 docker 無(wú)法 ping 通宿主機(jī)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11Docker+K8S 集群環(huán)境搭建及分布式應(yīng)用部署
這篇文章主要介紹了Docker+K8S 集群環(huán)境搭建及分布式應(yīng)用部署,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07詳解復(fù)制備份docker容器數(shù)據(jù)的方法
這篇文章主要介紹了詳解復(fù)制備份docker容器數(shù)據(jù)的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03docker-compose.yml參數(shù)的用法(配置文件)
這篇文章主要介紹了docker-compose.yml參數(shù)的用法(配置文件),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11