1 、基本介紹

? ?隨著技術(shù)的發(fā)展，前端分離以及容器技術(shù)的普及，使用docker以及nginx部署vue越來越便捷。

2 、具體實現(xiàn)步驟

2.1 實現(xiàn)步驟?

2.1.1 編寫docker file

? ?在vue 項目中新建Dockerfile 文件，如下圖

然后編寫一個簡單Dockerfile文件，其中"EXPOSE? 8999"? 表示nginx 容器運行時監(jiān)聽的端口

2.1.2? 編寫nginx? 配置文件

? ? ?配置nginx 文件即可，此例子給出一個最簡單的例子

? ??

2.1.3? 打包vue項目

? ?在本地項目運行npm run build 即可，當(dāng)然本地要nodes.js?

2.1.4 安裝docker，并且下載nginx 鏡像

? ? 在目標(biāo)服務(wù)器安裝docker，下載docker 安裝，下載網(wǎng)址：https://download.docker.com

下載后使用tar 名利解壓安裝即可，使用docker -v 驗證是否安裝成功

搜索nginx 的docker 鏡像

下載nginx docker 鏡像

2.1.5構(gòu)建vue項目鏡像，?運行docker? run 啟動部署項目

使用docker build ?-t project-test? ，命令運行鏡像。使用docker run 執(zhí)行鏡像 ，執(zhí)行 的命令

docker run -d -p 8999:80 --name project-test -v ?/usr/localdata/web2-dist/dist:/usr/share/nginx/html -v /usr/local/data/web2/nginx.conf:/etc/nginx/nginx.conf project-test

其中/usr/localdata/web2-dist 為上傳發(fā)布vue項目的包的路徑,/usr/local/data/web2/nginx.conf為nginx 配置文件，通過docker 目錄掛載的方式將vue 發(fā)布容器中。

3 總結(jié)