前些天發(fā)現(xiàn)了一個(gè)巨牛的人工智能學(xué)習(xí)網(wǎng)站，通俗易懂，風(fēng)趣幽默，忍不住分享一下給大家。點(diǎn)擊跳轉(zhuǎn)到教程。

1.安裝好 nginx 。

2. 把 vue 項(xiàng)目的源碼克隆到確定目錄下。用 git 管理，所以直接 git clone 到既定目錄就行了。

?如我的目錄是：/root/jiangyu/projects/gentle_vue/gentle_vue_code 。

3. 項(xiàng)目打包：

npm run build?

會(huì)自動(dòng)生成 dist 文件夾 。

4. 在任意目錄下新建文件? dockerfile 。內(nèi)容如下：

# 設(shè)置基礎(chǔ)鏡像 FROM nginx # 定義作者 MAINTAINER jiangyu # 將dist文件中的內(nèi)容復(fù)制到 /usr/share/nginx/html/ 這個(gè)目錄下面 COPY dist/ /usr/share/nginx/html/

5. 構(gòu)建鏡像：? ?

# -t 是給鏡像取名。 # 最后有一個(gè)點(diǎn) “.”，表示使用當(dāng)前路徑下的 dockerfile 文件，也可以指定使用其它路徑的。 docker build -t gentle-vue .

查看新生成的鏡像：

docker images

?

6.啟動(dòng)容器：

# -p ：配置端口映射，格式是外部訪(fǎng)問(wèn)端口：容器內(nèi)端口 # -d ：后臺(tái)運(yùn)行 # --name : 給容器取名 # 最后有 2 個(gè) gentle-vue,前面一個(gè)是給容器取的名字，后面一個(gè)是使用的鏡像的名字docker run -p 3000:80 -d --name gentle-vue gentle-vue

查看是否運(yùn)行成功：

7. 瀏覽器訪(fǎng)問(wèn)：http://服務(wù)器IP:3000/#/

這就是我項(xiàng)目的測(cè)試頁(yè)面。 OK 了。

?

--------------------------

2018.11.28 后記：

每次修改都要重新 部署太麻煩 ，于是寫(xiě)了個(gè)很簡(jiǎn)單的腳本，運(yùn)行就部署：

腳本內(nèi)容只是把以上命令整合到一起執(zhí)行：

# 備份原代碼 tar -zcvf gentle-vue.tar ./gentle-vue# 刪除原代碼文件夾 rm -rf gentle-vue# 拉取代碼 git clone https://gitee.com/FJ_WoMenDeShiJie/gentle-vue.git echo -e "\033[32m\n代碼拉取\n\033[0m"# 拷貝 node_modules cp ./node.tar ./gentle-vue# build 打包 vue 項(xiàng)目，生成 dist 文件夾 cd ./gentle-vue tar -zxvf node.tar npm run build echo -e "\033[32m\nvue項(xiàng)目打包完成\n\033[0m"# 刪除原鏡像 docker rmi gentle-vue &> /dev/null echo -e "\033[32m\n刪除原鏡像文件\n\033[0m"# 拷貝 dockerfile 到工程目錄下 cp ../dockerfile ./# 構(gòu)建鏡像 docker build -t gentle-vue . echo -e "\033[32m\n新鏡像構(gòu)建成功\n\033[0m"# 刪除原容器 docker rm -f gentle-vue# 啟動(dòng)容器 docker run -p 3000:80 -d --name gentle-vue gentle-vue echo -e "\033[32m\n前端工程部署完成\n\033[0m"

這樣部署就方便多了。

另后端工程部署方式見(jiàn)：Docker 部署應(yīng)用、jar 工程 docker 方式部署

總結(jié)

以上是生活随笔為你收集整理的Docker 方式 部署 vue 项目 （docker + vue + nginx）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。