使用docker打包前端项目详解

【注】强烈不建议使用windows使用docker，会出各种各样奇怪的错误，没有意义
本文中采用阿里云的linux服务器，打包和推送镜像到阿里云远端（本机是windows）

首先准备好你要打包的前端项目
图中的dist就是你打包的前端项目，然后，你需要编写两个文件，default.conf和Dockerfile
default.conf是nginx的配置文件

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;    # 这个非常重要，采用vue-router的时候，必须配置这个
  }
 
  #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   /usr/share/nginx/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;
  #}
}

直接复制即可，注意本文没有配置代理转发，有需要的可以自行配置
然后编写Dockerfile文件

server {
  listen       80;
 
  #charset koi8-r;
  access_log  /var/log/nginx/host.access.log;
 
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;    # 这个非常重要，采用vue-router的时候，必须配置这个
  }
 
  #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   /usr/share/nginx/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;
  #}
}

同样，直接复制即可，（路径后面再配置）
本机连接上linux环境，进行文件传输，我本机用的是finalshell
将文件放入此目录下对照nginx的配置

在linux上安装docker（安装过的跳过此步）
命令行上直接敲
yum -y install docker
等待安装完成后，启动docker
systemctl start docker

切到这个目录
执行构建镜像的命令
docker build -t html .
注意最后有一个点

等待完成后，docker images，查看镜像

会发现多了一条镜像

然后登录阿里云服务器，跟着步骤走，就能把镜像推送上去

下面附上一些docker常用的操作命令

启动镜像的方式
docker run -p 8079:8079 re…

登录方式
docker login --username=

查看本地的docker镜像
docker images

查看本地的容器
docker ps -a

删除本地的镜像
docker rmi 镜像ID

删除本地的容器
docker rm 容器ID

批量删除本地的镜像
docker rmi $(docker image ls -a -q)

批量删除本地的容器
docker rm $(docker container ls -a -q)

批量停止本地的容器
docker container stop $(docker container ls -a -q)

拉取远端镜像
docker pull re…

重新连接启动的容器
docker exec -it 容器id /bin/bash

停止启动的容器
docker kill 容器ID

启动容器
docker start 容器ID

导出docker容器
docker save REPOSITORY :TAG > plm.tar

导入docker容器
docker load -i plm.tar

后台运行
-d