docker部署前端專案

1. 安裝docker nginx

# 檢視docker是否安裝

docker info

# docker 安裝nginx

docker pull nginx

2. 新建docker/niginx配置檔案

# 新建docker-web資料夾，新建dockerfile檔案, # 新建nginx資料夾,新建default.conf檔案,新建index.html檔案 mkdir docker-web cd docker-web mkdir dockerfile mkdir nginx cd nginx mkdir default.conf vi default.conf cd ../

# 新建docker執行指令碼

#default.conf檔案配置
server 
#error_page  404              /404.html;
# redirect server error pages to the static page /50x.html
#error_page   500 502 503 504  /50x.html;
location = /50x.html 
}

# dockerfile檔案配置引入nginx

from nginx

# /users/admin/workspace/code/docker-web/nginx nginx配置，前端頁面從宿主機拷貝至映象容器

# --name 容器命名

docker run \

-p 4004:80 \

-d --name vuenginxnew \

--mount type=bind,source=/users/admin/workspace/code/docker-web/nginx,target=/etc/nginx/conf.d \

--mount type=bind,source=/users/admin/workspace/code/docker-web/dist,target=/usr/share/nginx/html \

nginx

這樣就能每次修改了nginx配置或者重新構建了前端應用的時候，只需重啟容器docker restart dockerid就能立馬生效。此時我們再訪問 http://localhost:4004/就能看到我們的頁面更新。

# 生成映象 docker build -t vuenginxcontainer2 . # 啟動docker映象 # 檢視docker映象列表 docker images # 刪除docker映象 docker rm -f (dockerid) # 檢視正執行的docker映象 docker ps -n 5 # 關閉正執行的docker映象 docker stop (dockerid) # 檢視本地映象 docker image ls | grep vuenginxcontainer2 # 啟動docker容器中的ngnix docker run --name nginx -p 80:80 -d nginx # 進入docker映象nginx（容器）配置 docker exec -it nginx bash # 進入docker映象（容器）檢視nginx配置 docker exec -it vuenginxcontainer2 bash # docker熱更新dist下的**

docker run -p 4003:80 -v /users/admin/workspace/code/docker-web/dist:/usr/share/nginx/html -d dockervue3

# 編輯nginx配置 vim /usr/local/etc/nginx/nginx.conf nginx -s reload nginx -s reopen # 停止 nginx nginx -s stop # 有序退出 nginx nginx -s quit # 啟動nginx sudo nginx # 關閉nginx服務

sudo nginx -s stop

docker部署前端專案

前端專案部署 docker

Docker部署前端nuxtjs專案

如何使用docker部署前端專案

docker部署前端專案

前端專案部署 docker

Docker部署前端nuxtjs專案

如何使用docker部署前端專案

相關推薦