Docker Nginx映象部署 Vue 專案

2021-09-28 18:23:52 字數 2541 閱讀 2305

@docker + nginx 映象部署 vue 專案

進入vue專案目錄,執行命令

yarn build / npm run build
生成dist資料夾

vi dockerfile
// an highlighted block

#匯入nginx映象

from nginx

maintainer soapy #把當前打包工程的html複製到虛擬位址

copy dist/ /usr/share/nginx/html/

#使用自定義nginx.conf配置埠和監聽,如果後面啟動容器使用掛載方式可以不用執行如下兩個命令

run rm /etc/nginx/conf.d/default.conf

add nginx/default.conf /etc/nginx/conf.d/

run /bin/bash -c 'echo init ok!!!'

nginx的主配置在容器的/etc/nginx/nginx.conf,該檔案又會include配置檔案/etc/nginx/conf.d/default.conf,注意這些目錄都是容器的目錄,不是伺服器的目錄。

新建nginx/default.conf

vi 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

location /api

}

打包前專案目錄下應該有這幾個檔案(夾):

nginx/default.conf, dist, dockerfile

執行命令生成映象:

docker build -t vue-demo .
別忘了末尾的小點點

docker images
docker run -d -p 8080:8000 vue-demo
docker run -d -v ~/myworkdir/test3/vue-demo/nginx/default.conf:/etc/nginx/conf.d/default.conf -p 8090:8000 vue-demo
命令中的-d意為後台執行,-p 為埠號,前半部分為外網訪問的埠,後半部分為 nginx 反向**尋找的內部埠;-v ~/myworkdir/test3/vue-demo/nginx/default.conf:/etc/nginx/conf.d/default.conf 將我們自己建立的 nginx.conf 掛載到容器的 /etc/nginx/conf.d/default.conf。

docker ps
這條命令等價於docker container ls,加上 -a 則可顯示全部

如果遇到程式崩潰或者映象啟動失敗

docker logs 'container id'
使用 ps 命令可以找到到 container id

進入容器:

docker exec -it /bin/bash
執行exit命令就可以退出容器

查詢存在的容器:

docker ps -a
刪除容器:

docker -rm  containerid
強制刪除容器:

docker -rm -f  containerid
不能夠刪除乙個正在執行的容器,會報錯。需要先停止容器。

檢視映象:

docker images
刪除映象:

docker -rmi  imageid
強制刪除映象:

docker -rmi -f  imageid
刪除所有停止的容器:

docker container prune
刪除所有不使用的映象:

docker image prune --force --all或者docker image prune -f -a
停止、啟動、殺死、重啟乙個容器:

docker stop name或者id  

docker start name或者id

docker kill name或者id

docker restart name或者id

CentOS7 Docker Nginx部署及執行

網上找了一些資料部署,出現不一樣的問題,現在總結一下自己的部署流程 1 資源準備 dockerfile檔案 ported by adam miller from originally written for fedora dockerfiles by scollier from centos cen...

使用docker nginx部署vue專案

第一次用docker部署前端專案,做個筆記 打包vue專案獲得dist資料夾 寫dockerfile,內容如下from hub.c.163.com library nginx 基於nginx maintainer sorel 維護者資訊 copy dist usr share nginx html ...

嘗試 Docker Nginx 部署單頁應用

當我們開發乙個單頁面應用時,執行完構建後 npm run build會生成乙個 index.html 在 dist 目錄,那怎麼把這個 index.html 部署到伺服器上呢?挑幾點配置講講,先是 gzip 壓縮資源,以節省頻寬和提高瀏覽器載入速度 雖然 webpack 已經支援在構建時就生成 gz...