vue+nginx+docker 的前端項目部署方案

在項目目錄創建Dockerfile

vi Dockerfile

進去過后填入下面的內容

FROM nginx:latest
MAINTAINER xx
COPY dist/ /usr/share/nginx/html/ 

第一行寫的是設置基礎鏡像，也就是我們剛剛pull下來的nginx鏡像，
第二行是寫一個作者，寫上自己的郵箱就好滴啦，
第三行的意思就是將dist文件夾下面的內容拷貝到/usr/share/nginx/html/這個目錄下。
這個目錄是不是很眼熟？這個路徑就是nginx一般的項目地址路徑。還記得nginx的測試頁面在哪兒嗎,就是這個路徑下的index.html啦。

沒有dist文件夾怎么辦？更簡單啦，vue項目下npm run build一下下啦。一般來說，項目成熟了部署的時候就不帶源碼了，直接帶這個文件夾到地方部署就好了嘛。

好了 准備開始創建自己的鏡像了

在Dockerfile的目錄下執行

 docker build -t xxx .

xxx 是你鏡像的名字。 特別注意后頁面那個點不能省略

然后在docker images 一下，你就能看到自己創建的鏡像了。
然后執行命令創建容器

docker run -d --name xx -p 8848:80 xxx

-d：代表后台啟動
--name xx：這是創建的容器名稱
-p 8848:80: 是將nginx的80映射到你服務器的8848端口(注意你服務器的端口是否開放8848，其他端口也可以)
xxx：是剛剛創建的鏡像名稱

然后執行docker ps

然后就能看到你創建的容器了。
最后打開瀏覽器輸入你的服務器ip端口號就行了