如何通过Docker部署Vue项目？

由于前端部署，需要通过Docker进行部署。整理了Docker搭建、部署教程。

Docker环境搭建

Docker下载 通过Docker官网进行下载www.docker.com/products/do…

Docker安装

1. 使用默认配置安装
2. 跳过角色选择
3. 不需要登录

Docker代理配置

进入设置页面中的Docker Engine，修改registry-mirrors,点击apply-restart即可

"registry-mirrors": [
   "https://dockerproxy.com",
   "https://hub-mirror.c.163.com",
   "https://mirror.baidubce.com",
   "https://ccr.ccs.tencentyun.com"
 ]

现在执行docker info,可以查看到docker的一些信息，说明已经安装成功了。下面就对Vue项目进行配置

Vue项目配置

根目录添加Dockerfile文件

touch nginx.conf

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  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;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

以上代码是对nginx的配置，比较重要的是，设置容器访问根目录：root /app

touch Dockerfile

.
├── README.md
├── dist
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── src
├── Dockerfile
└── vite.config.js

在Dockerfile文件内，添加以下内容

# Dockerfile
FROM nginx  
RUN mkdir /app 
COPY ./dist/ /app
COPY nginx.conf /etc/nginx/nginx.conf

以上表示内容为，下载 nginx，在容器的根目录创建app文件夹，将本地打包的dist文件夹内容复制到app文件夹下，最后再将nginx的配置复制到ngnix的指定目录

构建容器镜像

 docker build -t getting-started .

容器化部署

在容器镜像里面，可以看到刚构建的getting-started，点击该镜像配置端口号。

点击连接，可以访问刚部署的页面

Docker 常用命令

镜像构建脚本

docker build -t [镜像的名字及标签，通常 name:tag] -f [指定要使用的Dockerfile路径]  [ContextPath]

Docker 常用命令，基本都在GUI上操作，命令使用的不多

1. 查看docker信息：docker info
2. 启动docker服务：docker start
3. 列出安装的镜像文件：docker images
4. 删除镜像文件：docker rmi
5. 下载官方提供的docker镜像：docker pull
6. 运行镜像生成一个实例：docker run
7. 终止实例的运行：docker stop
8. 列出所有实例：docker ps -a
9. 删除实例：docker rm
10. 启动一个已经建立的实例：docker start

Dockerfile 常用指令

1. FROM：指定基础镜像，后续的指令将在该镜像上执行。
2. RUN：在镜像上执行 Linux 命令，并形成一个新的层。
3. CMD：指定启动镜像容器时的默认行为，一个 Dockerfile 中只能有一个 CMD 指令。
4. ENTRYPOINT：指定容器启动后执行的命令，可以覆盖 CMD 指令中的命令。
5. ENV：设置环境变量。
6. COPY：将文件系统中的文件复制到镜像中。
7. WORKDIR：设置工作目录。
8. EXPOSE：设置向外暴露的端口。
9. VOLUME：设置容器与外界映射的目录。

其他

.dockerignore文件

.dockerignore 文件的作用是用于在构建 Docker 镜像时排除不需要包含在镜像中的文件和目录。它与 .gitignore 文件类似，是一个配置文件，列出了需要被排除的文件或目录。

使用 .dockerignore 文件可以减小镜像的体积、缩短构建时间，并避免将不必要的敏感信息打包进 Docker 镜像，提高安全性。例如，如果你的项目中包含一些敏感信息，如密码、密钥等，你可以将这些文件添加到 .dockerignore 文件中，以确保它们不会被包含在 Docker 镜像中。

.dockerignore 文件需要与 Dockerfile 文件处于同一个目录下，并且使用通配符或正则表达式来指定需要排除的文件或文件夹。只有在构建镜像时才会使用 .dockerignore 文件，对于容器的运行没有影响。可以通过构建命令来查看 .dockerignore 文件是否生效。