docker的安装和使用

1.新建一个项目 比如vue init vue@latest完事之后运行打包到build目录下

2.在项目根目录下通过执行命令
touch Dockerfile
docker的安装和使用_第1张图片
3.拉取nginx镜像
首先打开你的Docker,默认会启动。控制台拉取 Nginx 镜像:运行

docker pull nginx

docker的安装和使用_第2张图片
4.在根目录创建Nginx配置文件

touch default.conf

写入:

server {
    listen       80;  // 配置监听端口 在启容器的时候端口号需要对应这个80(左边的)
    server_name  localhost;  //配置域名

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

    location / {
        root   /usr/share/nginx/html; //当没一个server里面没有其他的路径可以访问时 会默认访问该配置目录下的文件
        index  index.html index.htm; // 首页定义默认访问的是哪个文件 如果index.html没有找到就会去找index.htm
    }

    error_page   500 502 503 504 404  /50x.html;  // 报错页面 
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

5.配置镜像
打开Dockerfile文件,写入:

FROM nginx  
COPY dist/ /usr/share/nginx/html/  
COPY default.conf /etc/nginx/conf.d/default.conf  

解释一些对应代码的大概意思:

  1. FROM nginx 指定该镜像是基于 nginx:latest 镜像而构建的;

  2. COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下 dist 文件夹中的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下;

  3. COPY default.conf /etc/nginx/conf.d/default.conf 将 default.conf 复制到 etc/nginx/conf.d/default.conf,用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。

6.构建镜像

docker build -t vue2.0-system .

docker的安装和使用_第3张图片
出现上面的信息表示构建成功
-t 参数给镜像命名 vue2.0-system
. 是基于当前dockerfile目录来构建的镜像

运行docker image ls | grep docker-demo-vue查看镜像,可以看到我们构建镜像的大小
在这里插入图片描述
7.运行容器
docker run -d -p 3000:80 --name docker-vue vue2.0-system
在这里插入图片描述
命令说明:
-d 设置容器在后台运行
-p 表示端口映射,把本机的 3000 端口映射到 container 的 80 端口(这样外网就能通过本机的 3000 端口访问了。
–name 设置容器名 docker-vue
vue2.0-system 是我们上面构建的镜像名字
可以运行docker ps -a 查看容器id:

8.访问项目
我们打开http://localhost:3000/,就可以在浏览器中看到对应的页面,跟我们前面创建项目的时候看到的界面是一样的
也可以使用curl -v -i localhost:3000 去查看对应的静态文件
docker的安装和使用_第4张图片

docker的发布流程

// 1.查看目前已经在运行的容器有哪些
docker ps 
docker ps -a 查看全部的容器

// 2. 停掉某一个容器
docker stop 容器ID

// 3.删除容器
docker rm 容器ID

// 4. 查看已经运行的镜像
docker images
docker images -a   // 查看全部镜像

// 5. 删除镜像
docker rmi 镜像id

// 6. 在创建镜像 注意后面的点 .    创建之后查看  docker images
docker build -t  my-vue . 

// 7.创建容器
docker run -d -it --add-host="jeecg-boot-system:127.0.0.1" -p 80:80 jeecg-boot-ui

// 8. 查看容器是否启用成功
docker ps  / docker container ls
或者docker ps -a
或者 docker logs -f  容器ID 查看是否运行

// 9.docker stats 查看容器资源占用
docker stats 容器名
// 查看容器是否运行成功
 wget 172.17.0.2:80
// 10.检验发布的网址是否能够走通
 telnet  47.109.73.xxx   

docker的安装和使用_第5张图片
作为一名前端工程,掌握基本的前端打包发布流程很有必要

这里解释一下 创建容器的这个指令的意思
docker run -d -it --add-host=“jeecg-boot-system:127.0.0.1” -p 80:80 jeecg-boot-ui

  1. -d: 后台运行容器,并返回容器ID;
  2. -it:可交互式、赋予 tty 的方式
  3. -p:host-port:container-port:宿主机与容器端口映射,方便容器对外提供服务, 一般发布都是以80为主,因为80可以省略,如果是其他端口,在访问浏览器的时候就需要带上端口号了
  4. –add-host 就是配置host,部署在docker环境的项目,需要通过域名访问外部一些资源,但因为没有配置dns解析,因此需要通过配置hosts来进行访问,所以需要配置host

启动 nginx 容器,并在本地 8888 端口进行访问 命令:
docker run --rm -it --name nginx -p 8888:80 nginx:alpine

–rm:当停止容器时自动清除容器

你可能感兴趣的:(docker,容器,前端)