前后分離的項目兔沃，前端工程師就會面臨一個問題：如何部署前端項目玛迄？。
因為我用的是vue宁舰，就在此基礎(chǔ)上談?wù)勎业牟渴鸱桨浮?/h4>
首先想到的就是將項目打包后用nginx發(fā)布出來就好了蝶防。
首先想到的就是將項目打包后用nginx發(fā)布出來就好了蝶防。
為什么不直接npm run dev？且不說性能問題明吩，關(guān)鍵是在window上開發(fā)的代碼放到linux上不一定能跑起來啊。npm install? 不存在的殷费，因為我要部署的環(huán)境基本都是內(nèi)網(wǎng)印荔。
也是因為部署環(huán)境基本是內(nèi)網(wǎng)低葫，也沒有考慮直接在服務(wù)器上安裝nginx的方案。（關(guān)間是太懶仍律，不想換一個地方就安裝一次nginx昂傩）。所以看上了咋們這后端已經(jīng)‘如日中天’的docker水泉。
好了善涨， 廢話不多說了。直接來吧
準(zhǔn)備工作
os: centos 7
docker-ce（-ce就是社區(qū)版草则，不要錢~ ~）钢拧。
安裝docker
yum install docker
一般就安裝完成了，就是這個easy有木有炕横。(內(nèi)網(wǎng)環(huán)境的docker以后再來說源内，主要是后端小伙伴已經(jīng)吧docker裝上啦~)
啟動一下服務(wù)
systemctl start docker
安裝nginx鏡像
docker pull nginx
然后查看一下你的鏡像
docker images
好了， 現(xiàn)在你的服務(wù)器上就有了一個nginx的docker鏡像份殿。
部署項目
把你的項目打開膜钓，ls一下啦。
項目怎么來的就不說了卿嘲，你會發(fā)現(xiàn)你項目里少了兩個東西颂斜，一個是Dockerfile,另一個是dist。
Dockerfile沒有的話好辦拾枣，直接創(chuàng)建一個
vi Dockerfile
進去過后填入下面的內(nèi)容
FROM nginx:latest
MAINTAINER xx
COPY dist/ /usr/share/nginx/html/
第一行寫的是設(shè)置基礎(chǔ)鏡像沃疮，也就是我們剛剛pull下來的nginx鏡像，
第二行是寫一個作者放前，寫上自己的郵箱就好滴啦忿磅，
第三行的意思就是將dist文件夾下面的內(nèi)容拷貝到/usr/share/nginx/html/這個目錄下。
這個目錄是不是很眼熟凭语？這個路徑就是nginx一般的項目地址路徑葱她。還記得nginx的測試頁面在哪兒嗎,就是這個路徑下的index.html啦。
沒有dist文件夾怎么辦似扔？更簡單啦吨些，vue項目下npm run build一下下啦。一般來說炒辉，項目成熟了部署的時候就不帶源碼了豪墅，直接帶這個文件夾到地方部署就好了嘛。
好了 準(zhǔn)備開始創(chuàng)建自己的鏡像了
在Dockerfile的目錄下執(zhí)行
docker build -t xxx .
xxx 是你鏡像的名字黔寇。 特別注意后頁面那個點不能省略
然后在docker images 一下偶器，你就能看到自己創(chuàng)建的鏡像了。
然后執(zhí)行命令創(chuàng)建容器
docker run -d --name xx -p 8848:80 xxx
-d：代表后臺啟動
--name xx：這是創(chuàng)建的容器名稱
-p 8848:80: 是將nginx的80映射到你服務(wù)器的8848端口(注意你服務(wù)器的端口是否開放8848，其他端口也可以)
xxx：是剛剛創(chuàng)建的鏡像名稱
然后執(zhí)行docker ps
然后就能看到你創(chuàng)建的容器了屏轰。
最后打開瀏覽器輸入你的服務(wù)器ip端口號就行了
基本的部署就完成啦颊郎。
當(dāng)然還有很多坑和技巧，比如每次更新了項目如何讓容器里的內(nèi)容也更新等等霎苗。今天就不說了姆吭，下次再詳細記錄。
