【前端】docker打包镜像并上传到仓库

打包需要文件
1.项目dist包
2.dockerfile文件
3.nginx配置文件（因为我们项目是使用nginx作为服务器）

打包步骤：

1.开启docker
service docker start

2.打包镜像（注意 . 不能省略）
docker build -t 你需要的镜像名:标签名 .

3.虚拟机本地跑镜像验证（也可以忽略）
docker run -p 8080:80 -d 镜像id或者上面填的镜像名:标签名
这样就可以使用虚拟机ip + 端口地址8080访问了， 80端口是nginx默认export的端口

4.给镜像打标签
打标签的意思就是我们给同一个镜像起另一个名字，因为我们推到公司仓库的话是需要对应公司仓库的地址的
假设公司仓库的地址是www.abc.com
docker tag 镜像id或者上面填的镜像名:标签名 www.abc.com/project/web:latest
具体的路径还是看公司的要求~

5.登录仓库（如果前面有登陆过后面就可以省略这个步骤了！）
假设公司仓库的地址是www.abc.com
docker login www.abc.com
然后按要求输入账号密码就行

6.推送到仓库
要使用我们第四步打标签的新名字
docker push 新标签名

这样的话我们前端的任务就完成了hhh，下面就坐等后端在服务器上拉下来跑镜像了，一般来说后端会使用docker-compose方便跑容器，有兴趣的也可以自己了解一下

PS:额外的一些话…
1.关于虚拟机安装centOS7我十分推荐下面这篇文章，很好用~
https://www.cnblogs.com/hihtml5/p/8217062.html
2.dockerfile的基本配置文件如下

FROM nginx // 基础镜像
LABEL maintainer="[email protected]" // 这个对我们来说可能没啥用，应该是为了方便联系镜像作者的吧

// 将我们的nginx.conf配置文件放进nginx里面
RUN rm -rf /usr/share/nginx/html
COPY ./dist /usr/share/nginx/html
RUN rm -rf /etc/nginx/nginx.conf
COPY ./nginx.conf /etc/nginx/nginx.conf

3.vue2的nginx基本配置如下

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;


# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
    server_tokens off;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }

        location @router {
        	rewrite ^.*$ /index.html last;
        }

		// 开启gzip压缩
        gzip on;
        gzip_proxied any;
        gzip_comp_level 6;
        gzip_buffers 16 8k;
        gzip_types image/svg+xml text/plain text/xml text/css text/javascript application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf image/jpeg image/gif image/png image/x-icon;
    }
}

有需要的同学可以自己取用哈