docker本地部署前端项目

前言

本文将带领你感受使用docker部署前端项目的过程，不包含docker基本知识，若需学习docker基本知识，移步yeasy.gitbook.io/docker_prac…

Docker 的组成

docker 作为一个工具，它的三件套是：

• Dockerfile
• image（镜像）
• container（容器）

Dockerfile 是一个文本文件，其内包含了一条条的 指令(Instruction)，每一条指令构建一层，因此每一条指令的内容，就是描述该层应当如何构建。

docker 常用指令

容器管理

• docker run <image>：运行一个新的容器
• docker start <container>：启动一个已停止的容器
• docker stop <container>：停止一个正在运行的容器
• docker restart <container>：重启一个容器
• docker rm <container>：删除一个容器
• docker ps：列出当前正在运行的容器
• docker ps -a：列出所有容器，包括停止的容器

镜像管理

• docker images：列出本地的镜像
• docker pull <image>：下载一个镜像
• docker push <image>：将一个镜像推送到远程仓库
• docker build -t <image> <path>：根据 Dockerfile 构建一个镜像
• docker rmi <image>：删除一个本地的镜像

日志和输出

• docker logs <container>：查看容器的日志
• docker exec -it <container> <command>：在正在运行的容器中执行命令
• docker cp <container>:<path> <local_path>：将容器中的文件复制到本地

网络和端口

• docker network ls：列出 Docker 网络
• docker network create <network>：创建一个新的 Docker 网络
• docker network connect <network> <container>：将容器连接到指定的网络
• docker port <container>：显示容器的端口映射

数据管理

• docker volume ls：列出 Docker 卷
• docker volume create <volume>：创建一个新的 Docker 卷
• docker volume inspect <volume>：查看卷的详细信息
• docker volume rm <volume>：删除一个 Docker 卷

其他常用指令：

• docker info：显示系统信息
• docker logs <container>：获取容器的 log 信息
• docker inspect <container>：显示一个容器的具体配置信息

安装 Docker ---windows为例

安装之前

在安装之前，我们实现需要将Windows的某些设置开启一下。Windows中的Docker它可以依赖于两种环境，分别是：Hyper-V、WSL。第一种是一个虚拟环境，也就是虚拟机，第二中是Windows的Linux子系统(系统要求不低于Window10的2021版本),因此我们在 Windows 上需要开启 WSL 功能 即可

安装Linux子系统

# 下载或者更新
wsl --update
# 重新启动
wsl --shutdown

管理员运行PowerShell或CMD，运行开头的两段命令，如果没安装过子系统，他会帮你安装，也会自动更新

WSL还有好处就是，你学习Linux时候，不需要安装虚拟机了，以前用VM也就是vmware workstation虚拟机来玩Linux，老占资源了。

安装DockerDesktop

进入docker官网docs.docker.com/desktop/ins…

下载下来后安装即可，进入软件，注册一个账号即可使用

配置DockerDesktop

我们需要开启至少这两个选项，其他默认或者开启，作用请自己翻译。

这两个选项分别是开启远程连接(当然，是内网)，第二个是说使用WSL来当作Docker的运行系统，不开启就是使用虚拟机了。

然后我们配置一下镜像源，国外的官方源太慢了。

使用Docker部署前端项目

进入vue项目

添加基础 nginx.conf（根据各自项目配置）

# 全局配置
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;

# 事件模块配置
events {
  use epoll; # 多路复用
  worker_connections 1024;
}

# HTTP模块配置
http {
  # MIME类型配置
  include /etc/nginx/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 /var/log/nginx/access.log main;

  # Gzip压缩配置
  gzip on;
  gzip_comp_level 6;
  gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

  # 服务器配置
  server {
      listen 80;
      server_name localhost;

      # 根目录配置
      root /usr/share/nginx/html;
      index index.html;

      # 其他路由配置
      location / {
          try_files $uri $uri/ /index.html;
      }

      # 静态文件缓存配置
      location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
          expires 1d;
      }
  }
}

添加 基本 Dockfile

FROM nginx:stable-alpine3.17

COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

拉取镜像

这一步如果没有指定镜像源，默认从 docker hub 上拉取

docker pull nginx:stable-alpine3.17

此时你的docker镜像中就有了nginx镜像

构建镜像

docker build -t docker-first-demo:v1 .     

• -t 指定 image 的名字（docker-first-demo），后面可以用冒号指定标签（v1），默认是 latest
• . 表示 Dokcerfile 文件所在路径，docker 会在这个目录下找到 Dockfile，然后以此来构建镜像（这里表示当前路径）

查看构建镜像列表

构建完成，通过指令 docker images 可以看到 docker-first-demo:v1 镜像已经在 image 的列表中了。

或者到Docker Desktop查看

启动容器

镜像完毕后，使用这个镜像来启动容器：

docker run -d --name my-web-1 -p 8080:80 docker-first-demo:v1

-d 参数表示以后台模式运行容器，即容器将在后台运行而不阻塞终端。

--name my-web-1 参数指定容器的名称为 my-web-1，这个名称可以用来唯一标识容器。

-p 8080:80 参数将容器的 80 端口映射到主机的 8080 端口，这样可以通过主机的 8080 端口访问容器中的应用程序。（类似的 -v 参数也是左边是主机、右边是容器环境）

docker-first-demo:v1 是要运行的容器镜像的名称和标签。

查看容器

命令

docker ps

Docker Desktop

查看本地部署项目

http://localhost:8080 

有的时候，想要查看容器的日志，比如看看为什么没有运行起来、为什么报错了、谁来访问过了等等。用这个指令：

docker logs my-web-1 # 用容器名称
docker logs 76896730df4f # 或用容器id