docker+daocloud實現前端項目(Vuejs)自動部署

項目的自動化部署在大公司或獨角獸中用得比較多,相比來進行手動部署項目來說會更加高效。那麼本文結合之前學習的docker知識點以及nginx來簡單實現VueJs項目的自動部署,當然針對其他項目也類似。

運行環境

  1. 首先需要在服務器上進行docker、nginx、node等的安裝。便於進行後續的操作。
  2. 通過docker拉取nginx鏡像,命令docker pull nginx

通過vue-cli初始化一個項目

可以通過vue init webpack 項目名稱初始化一個項目,這裏假設項目名稱是docker-vue,然後在該項目的根目錄新建一個Dockerfile文件,大致內容如下:

FROM nginx:latest
#把當前打包工程的html複製到虛擬地址
COPY dist/ /usr/share/nginx/html/
#使用自定義nginx.conf配置端口和監聽
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/

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

並新建一個default.conf文件,內容如下:

server {

項目中定義的端口號

listen       8080;
server_name  localhost;

#charset koi8-r;
#access_log  /var/log/nginx/log/host.access.log  main;

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
}

#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 {
    root   html;
}
}

項目目錄瀏覽
自此,基本工作已完成,接下來就是對於daocloud.io的基本配置操作了

daocloud.io基本配置操作

若無賬號,可以先進行註冊daocloud.io
接下來的操作分爲:

  • 創建項目
  • 集羣管理
  • 創建鏡像倉庫

創建項目

創建項目
這裏需要添加項目名稱,設置代碼源(可以是github、gitlab)等,然後選擇你所需要構建的項目,我這裏選擇了我自己的github倉庫docker-vue,然後點擊開始創建就行。
項目列表

集羣管理

集羣管理的主要目的是爲了鏈接遠程服務器,並通過命令進行daocloud.io鏡像的創建。
新建主機
選擇新建主機
新建主機2

由於我自己是購買了阿里雲服務器了,系統是ubuntu的,所以就選擇了這樣的配置,然後在服務器上運行:

curl -sSL https://get.daocloud.io/daomonit/install.sh | sh -s e2fa03ebead51076411388c26dff2257dae89768 

來構建一個docker鏡像,如:

查看鏡像
主機創建成功,如下圖所示:

主機創建成功

創建鏡像倉庫

進入【鏡像倉庫】選擇剛纔手動構建出來的鏡像,並部署最新版本到自由主機或者雲端測試環境

部署
創建應用
然後在進行下面的應用設置:

應用設置

部署完成

部署完成後,可通過服務器ip+剛纔設置的容器端口號進行訪問了。
訪問
這樣我們就完成了大部分的操作了,可以通過查看下docker的容器,就可以看到我們剛纔創建鏡像倉庫成功後,就自動創建了一個容器了:
自動創建了一個容器

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章