Docker環(huán)境運(yùn)行Vue項(xiàng)目全過程
1. 打包VUE工程
在vue工程根目錄下，執(zhí)行打包命令
npm run build
隨后將生成 dist文件夾，里面的內(nèi)容就是打包后的文件
2. 創(chuàng)建Nginx配置文件
在vue工程根目錄下，創(chuàng)建文件 default.conf，內(nèi)容如下：
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html/;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
}3. 創(chuàng)建Dockerfile
在vue工程根目錄下，創(chuàng)建文件 Dockerfile，內(nèi)容如下：
FROM nginx MAINTAINER fuhb RUN rm /etc/nginx/conf.d/default.conf ADD default.conf /etc/nginx/conf.d/ COPY dist/ /usr/share/nginx/html/
說明
- FROM nginx：該鏡像是基于nginx:latest鏡像構(gòu)建的
- MAINTAINER fuhb：添加說明
- RUN rm /etc/nginx/conf.d/default.conf：刪除nginx自帶的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/目錄下
4. 創(chuàng)建鏡像
把dist、default.conf、Dockerfile放在同一個(gè)目錄下，例如 /usr/local/docker/web/
執(zhí)行如下命令，注意最后有個(gè)點(diǎn)
docker build -t my-web .
執(zhí)行命令docker images，會(huì)發(fā)現(xiàn)生成了一份名為 my-web的鏡像
5. 創(chuàng)建容器
鏡像已經(jīng)有了，下一步就可以創(chuàng)建并運(yùn)行容器了，執(zhí)行如下命令
docker run -d --name my_web -p 10002:80 my-web
然后執(zhí)行 docker ps -a ，會(huì)發(fā)現(xiàn)容器成功創(chuàng)建并運(yùn)行了，此時(shí)可以通過10002端口號(hào)訪問VUE站點(diǎn)。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
docker-compose配置并部署redis服務(wù)的實(shí)現(xiàn)
本文主要介紹了docker-compose配置并部署redis服務(wù)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
淺談Docker Desktop for Linux和Docker Engine
本文主要介紹了Docker Desktop for Linux和Docker Engine區(qū)別,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
這篇文章主要介紹了Docker可視化管理工具DockerUI的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
使用Docker構(gòu)建一個(gè)Git鏡像使用clone倉庫
這篇文章主要介紹了使用Docker構(gòu)建一個(gè)Git鏡像使用clone倉庫，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
docker容器狀態(tài)轉(zhuǎn)換管理命令實(shí)例詳解
Docker容器只是一個(gè)運(yùn)行于宿主操作系統(tǒng)host?OS上的應(yīng)用進(jìn)程,所以你需要一個(gè)鏡像來運(yùn)行它,Docker鏡像以進(jìn)程的方式運(yùn)行時(shí)就叫做Docker容器,這篇文章主要給大家介紹了關(guān)于docker容器狀態(tài)轉(zhuǎn)換管理命令的相關(guān)資料,需要的朋友可以參考下2022-05-05
詳解如何使用Docker部署一個(gè)web項(xiàng)目并打包成鏡像文件
這篇文章主要介紹了詳解如何使用Docker部署一個(gè)web項(xiàng)目并打包成鏡像文件,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
今天在修改Docker內(nèi)部文件的時(shí)候,安裝vim居然失敗了,在執(zhí)行apt-get update時(shí)一直有幾個(gè)404,解決無果,最后放棄安裝vim,將文件拷貝出來修改,所以本文給大家分享一下如何修改Docker內(nèi)部文件的方法,需要的朋友可以參考下2024-01-01
Docker忽略文件是指在Docker鏡像構(gòu)建過程中,用于忽略指定文件或目錄的一種機(jī)制,本文主要介紹了Docker中忽略文件的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
docker實(shí)現(xiàn)重新打tag并刪除原tag的鏡像
這篇文章主要介紹了docker實(shí)現(xiàn)重新打tag并刪除原tag的鏡像，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Docker一行命令完成FTP服務(wù)搭建的實(shí)現(xiàn)
這篇文章主要介紹了Docker一行命令完成FTP服務(wù)搭建的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09