现代应用程序部署工具 - Docker

Docker部署案例

在执行以下命令前，请确保已经安装Docker环境了

下边三个案例分别采用：替换dist、采用Dockerfile方式、采用Dockerfile+docker-compose的方式进行部署并运行项目，您可以自行选择自己想要部署的项目进行操作。

1. 部署nginx

• 控制台输入如下命令，docker run 通过nginx:alpine镜像创建一个新的容器并运行，容器名称为nginx_demo，容器设置成自动重启，映射容器80、443端口到主机80、443，绑定nginx相关配置等卷挂载路径。

  docker run -d \
  --name nginx_demo --restart always \
  -p 80:80 \
  -e "TZ=Asia/Shanghai" \
  -v /Users/xxx/nginx/home/nginx/nginx.conf:/etc/nginx/nginx.conf \
  -v /Users/xxx/nginx/home/nginx/logs:/var/log/nginx \
  -v /Users/xxx/nginx/home/nginx/html:/usr/share/nginx/html \
  nginx:alpine
  

  

  

  7fdd2f5f7e0874e619914632f819b0dfa5aa594fe3d2056bbd22b99da3e3d1be 就是我们的容器Id

• 容器运行后修改nginx.conf配置文件，配置文件如下：

 ```js
 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"';
   sendfile on;
 
   keepalive_timeout 65;
   
   server
     {
       listen 80;
       server_name host.docker.internal;
       index index.html;
 
       root  /usr/share/nginx/html/dist;  #dist上传的路径
       # 避免访问出现 404 错误
       location / {
         try_files $uri $uri/ @router;
         index  index.html;
       }
 
       location @router {
         rewrite ^.*$ /index.html last;
       }
     }
 }
 ```

• 构建打包->部署

  在前端项目中，安装依赖，执行打包命令生成dist文件夹，将打包好的dist文件夹拷贝到nginx目录下

 ```js
 npm install
 npm run build
 cp -r dist/* /Users/xxxx/home/nginx/html
 ```

• 运行结果

  执行完以上操作，我们可以直接访问本地 http://127.0.0.1:80 来查看结果

  

2. 采用Dockerfile方式部署前端项目

• 项目中新增Docker文件夹

  

• Dockerfile文件

  Dockerfile 分为四部分：基础镜像信息、维护者信息、镜像操作指令和容器启动时执行指令。

 ```js
 # 拉取nginx基础镜像
 FROM nginx:1.21.1
 
 # 维护者信息
 MAINTAINER xxxx
 
 # 将dist文件中的内容复制到 `/usr/share/nginx/html/dist` 这个目录下面
 COPY dist  /usr/share/nginx/html/dist
 # 用本地配置文件来替换nginx镜像里的默认配置
 COPY nginx/nginx.conf /etc/nginx/nginx.conf
 
 # 对外暴露的端口号
 EXPOSE 80
 
 # 启动nginx容器
 CMD ["nginx", "-g", "daemon off;"]
 ```

• 修改nginx.conf文件与上方 案例1 中的nginx.conf配置文件保持一致即可

• 构建打包-部署

  在前端项目中，安装依赖，打包生成dist文件夹，将dist文件夹复制到Docker文件夹中，进行docker build命令打包docker镜像，最后运行起来。

 ```js
 npm install
 npm run build
 cp -r dist Docker/
 cd Docker
 docker build -f Dockerfile -t [镜像名称] . --no-cache
 docker run -d -p 80:80 --restart=always --name [容器名称] [镜像名称]
 ```

  `d839a08958cdbf47747870f737da4e6e3b76668913781cd517a0f03d799973b6` 就是我们的容器Id 

• 运行结果

  执行完以上操作，我们可以直接访问本地 http://127.0.0.1:80 来查看结果

3. 采用DockerFile+DockerCompose方式部署项目

   Compose 定位是“defining and running complex applications with Docker”，前身是 Fig，兼容 Fig 的模板文件。Dockerfile可以让用户管理一个单独的应用容器；而 Compose 则允许用户在一个模板（YAML 格式）中定义一组相关联的应用容器（被称为一个 project，即项目）。

• 修改构建脚本

  将这条命令

 ```js
 docker run -d -p 80:80 --restart=always --name my_proect_container my_project:dev
 ```

  替换成: 

 ```js
 docker-compose up -d
 ```

• 项目中新增docker-compose.yml文件

 ```js
 services:
     my_project:
         ports:
             - 80:80
         restart: always
         container_name: my_proect_container
         image: my_project:dev
 ```

• 运行结果：

  执行完以上操作，我们同样可以直接访问本地 http://127.0.0.1:80 来查看结果