docker+daocloud实现前端项目自动构建部署

项目的自动化部署在大公司或独角兽中用得比较多,相比来进行手动部署项目来讲会更加高效。那么本文结合以前学习的docker知识点以及nginx来简单实现VueJs项目的自动部署,固然针对其余项目也相似。

运行环境

  1. 首先须要在服务器上进行docker、nginx、node等的安装。便于进行后续的操做。
  2. 经过docker拉取nginx镜像,命令docker pull nginx

经过vue-cli初始化一个项目

能够经过vue init webpack 项目名称初始化一个项目,这里假设项目名称是docker-vue,而后在该项目的根目录新建一个Dockerfile文件,大体内容以下:html

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文件,内容以下:vue

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的基本配置操做了node

daocloud.io基本配置操做

若无帐号,能够先进行注册daocloud.io
接下来的操做分为:webpack

  • 建立项目
  • 集群管理
  • 建立镜像仓库

建立项目

建立项目
这里须要添加项目名称,设置代码源(能够是github、gitlab)等,而后选择你所须要构建的项目,我这里选择了我本身的github仓库docker-vue,而后点击开始建立就行。
项目列表nginx

集群管理

集群管理的主要目的是为了连接远程服务器,并经过命令进行daocloud.io镜像的建立。
新建主机
选择新建主机
新建主机2git

因为我本身是购买了阿里云服务器了,系统是ubuntu的,因此就选择了这样的配置,而后在服务器上运行:github

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

来构建一个docker镜像,如:web

查看镜像
主机建立成功,以下图所示:vue-cli

主机建立成功

建立镜像仓库

进入【镜像仓库】选择刚才手动构建出来的镜像,并部署最新版本到自由主机或者云端测试环境docker

部署
建立应用
而后在进行下面的应用设置:

应用设置

部署完成

部署完成后,可经过服务器ip+刚才设置的容器端口号进行访问了。
访问
这样咱们就完成了大部分的操做了,能够经过查看下docker的容器,就能够看到咱们刚才建立镜像仓库成功后,就自动建立了一个容器了:
自动建立了一个容器

相关文章
相关标签/搜索