手把手教你用docker部署一个vue项目

6,504 阅读2分钟

1、介绍docker介绍

1.1 docker由来

一帮年轻人创业,创办了一家公司,2010年的专门做PAAS平台。

到了2013年的时候,像亚马逊、微软、Google都开始做PAAS平台。

2013年,将公司内的核心技术对外开源,核心技术就是Docker。

到了2014年的时候,得到了C轮融资,$4000W

到了2015年的时候,得到了D轮融资,$9500W

全神贯注的维护Docker。

所罗门主要作者之一。

1.2 docker的思想

1.集装箱:

    1.会将所有需要的内容放到不同的集装箱中,谁需要这些环境就直接拿到这个集装箱就可以了

2.标准化:

    1.运输的标准化:Docker有一个码头,所有上传的集装箱都放在了这个码头上,当谁需要某一个环境,就直接指派大海豚去搬运这个集装箱就可以了。
    2.命令的标准化:Docker提供了一系列的命令,帮助我们去获取集装箱等等操作。
    3.提供了REST的API:衍生出了很多图形化界面,Rancher。

3.隔离性:

    1.Docker在运行集装箱内的内容时,会在LInux的内核中,单独的开辟一片空间,这片空间不会影响到其他程序。
-   注册中心。(超级码头,上面放的就是集装箱)
-   镜像。(集装箱)
-   容器。(运行起来的镜像)

2、docker的基本操作

2.1 下载关于Docker的依赖环境

yum -y install yum-utils device-mapper-persistent-data lvm2

2.2 设置一下下载Docker的镜像源

yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

2.3 安装Docker

yum makecache fast
yum -y install docker-ce

2.4 启动,并设置为开机自动启动,测试

# 启动Docker服务
systemctl start docker

# 设置开机自动启动
systemctl enable docker 

# 测试 
docker run hello-world

2.5 注意事项

## 如果服务器已安装dokcer,先卸载在安装
$ sudo yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-selinux \
                  docker-engine-selinux \
                  docker-engine

3、Docker的中央仓库

1.  Docker官方的中央仓库:这个仓库是镜像最全的,但是下载速度很慢。[https://hub.docker.com](https://hub.docker.com/)
1.  国内的镜像网站:网易蜂巢、daoCloud...

​ <https://c.163yun.com/hub#/home>

​ [http://hub.daocloud.io](http://hub.daocloud.io/) (推荐使用)

3.  在公司内部会采用私服的方式拉取镜像。(添加配置)
# 需要在/etc/docker/daemon.json
{
	"registry-mirrors":["https://registry.docker-cn.com"],
    "insecure-registries":["ip:port"]
}
# 重启两个服务
systemctl daemon-reload
systemctl restart docker

4、镜像操作

4.1 拉取镜像到本地

# 拉取镜像到本地
docker pull 镜像名称[:tag]
# 举个例子
docker pull tomcat daocloud.io/library/tomcat:8.5.15-jre8

4.2 查看全部本地的镜像

docker images

4.3 删除本地镜像

docker rmi 镜像的标识

4.4 镜像的导入导出(不规范)

# 将本地的镜像导出
docker save -o 导出的路径 镜像id
# 加载本地的镜像文件
docker load -i 镜像文件
# 修改镜像名称
docker tag 镜像id 新镜像名称:版本

5、容器的操作

5.1 运行容器

# 简单操作
docker run 镜像的标识|镜像名称[:tag]
# 常用的参数
docker run -d -p 宿主机端口:容器端口 --name 容器名称 镜像的标识|镜像名称[:tag]
# -d:代表后台运行容器
# -p 宿主机端口:容器端口:为了映射当前Linux端口和容器端口
# --name 容器名称:指定容器的名称
docker run --name=mynginx -d --restart=always -p 88:80 nginx

5.2 查看正在运行的容器

docker ps [-qa]
# -a:查看全部的容器,包括没有运行
# -p:只查看容器得到标识

5.3 查看容器的日志

docker logs -f 容器id
# -f:可以滚动查看日志的最后几行

5.4 进入到容器内部

docker exec -it 容器id bash

5.5 删除容器(删除容器前,需要停止容器)

# 停止指定的容器
docker stop 容器id
# 停止全部容器
docker stop $(docker pa -qa)
# 删除指定的容器
docker rm 容器id
# 删除全部容器
docker rm $(docker pa -qa)

5.6 启动容器

docker start 容器id

6、docker部署vue项目

6.1 编写nginx.conf配置


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  192.168.3.85;
		
		gzip on;
		gzip_min_length 1k;
		gzip_comp_level 9;
		gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
		gzip_vary on;
		gzip_disable "MSIE [1-6]\.";

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

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

        #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;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

6.2 编写Dockerfile文件

FROM nginx:latest
# 定义作者
MAINTAINER wangsh<1057718341@qq.com>

#删除目录下的default.conf文件
#RUN rm /etc/nginx/conf.d/default.conf
#设置时区
RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' >/etc/timezone

#将本地nginx.conf配置覆盖nginx配置
COPY nginx.conf /etc/nginx/nginx.conf
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/daison-web/
#声名端口
EXPOSE 80

RUN echo 'web project build  success!!'

6.3 打包vue项目

# 先将vue项目进行打包
npm run build

# 将生成的dist和nginx.confDockerfile进行压缩打包

6.4 上传服务器

# 安装lrzsz
npm install lrzsz

# 在home文件夹下面创建web文件夹
mkdir web

# 从压缩的文件上传到/home/web
rz

# 解压文件
unzip app.zip

# 打包生成
docker build -t test:v1 .

# 启用容器
sudo docker run -dit --name demo -p 8888:80 --restart=always --privileged=true demo:v1

docker run -di -v /home/web/nginx.conf:/etc/nginx/nginx.conf --name=demo -p 8099:80 demo:v1.0

7、docker-compose部署vue项目

7.1 compose介绍

Compose是一个用来定义和运行复杂应用的Docker工具。一个使用Docker容器的应用,通常由多个容器组成。使用Docker Compose不再需要使用shell脚本来启动容器。 
Compose 通过一个配置文件来管理多个Docker容器,在配置文件中,所有的容器通过services来定义,然后使用docker-compose脚本来启动,停止和重启应用,和应用中的服务以及所有依赖服务的容器,非常适合组合使用多个容器进行开发的场景。

7.1 下载docker-compose

# github地址
https://github.com/docker/compose

# 下载最新版的docker-compose文件
sudo curl -L https://github.com/docker/compose/releases/download/v1.16.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

# 若github访问太慢,可以用daocloud下载
sudo curl -L https://get.daocloud.io/docker/compose/releases/download/v1.25.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

## pip安装
sudo pip install docker-compose

7.2 添加可执行权限

sudo chmod +x /usr/local/bin/docker-compose

7.3 测试安装结果

$ docker-compose --version
 
docker-compose version 1.16.1, build 1719ceb