使用docker-compose部署一个前端项目

一、简单的部署步骤

• 1、在项目的根目录下创建一个Dockerfile的文件

  FROM node:14
  
  # 使用的目录
  WORKDIR /app
  # 拷贝依赖包的文件
  COPY package.json .
  
  RUN npm install
  
  # 将当前目录下全部文件拷贝到工作目录上
  COPY . .
  
  RUN npm run build
  
  FROM nginx:alpine
  
  # 将打包后的dist目录下全部文件拷贝到nginx的html/目录下
  COPY ./dist/ /usr/share/nginx/html/
  # 删除nginx中之前的配置
  RUN rm /etc/nginx/conf.d/default.conf
  # 拷贝当前的文件到nginx中
  COPY nginx.conf /etc/nginx/nginx.conf
  COPY default.conf.template /etc/nginx/conf.d
  
  # 启动nginx
  CMD /bin/sh -c "envsubst '80' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf" && nginx -g 'daemon off;'
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26

• 2、根目录下创建一个nginx.conf文件

  error_log stderr;
  
  pid /var/run/nginx.pid;
  
  events {
    worker_connections 1024;
  }
  
  http {
    access_log /dev/stdout;
    server_tokens off;
  
    include /etc/nginx/mime.types;
    include /etc/nginx/conf.d/*.conf;
  }
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

• 3、根目录下创建一个default.conf.template文件用于配置nginx的配置文件

  server {
  
    listen 80 default_server;
  
    location ^~ / {
      root   /usr/share/nginx/html;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
    }
  
    location @router {
      rewrite ^.*$ /index.html last; # 关键一句 
    }
  
  
    location ~* \.(?:manifest|appcache|html?|xml|json)$ {
  
      root   /usr/share/nginx/html;
  
      if ($request_uri ~* .*[.](manifest|appcache|xml|json)$) {
        add_header Cache-Control "public, max-age=2592000";
      }
  
      if ($request_filename ~* ^.*[.](html|htm)$) {
        add_header Cache-Control "public, no-cache";
      }
  
      expires -1;
    }
  
    location ~* \.(?:js|css|map|jpg|png|svg|ico)$ {
      root   /usr/share/nginx/html;
      try_files $uri =404;
  
      expires 1y;
      access_log off;
  
      add_header Cache-Control "public";
    }
  
    location ~ ^.+\..+$ {
      root   /usr/share/nginx/html;
      try_files $uri =404;
  
      include /etc/nginx/mime.types;
    }
  
    error_page 500 502 503 504 /50x.html;
  
    location = /50x.html {
      root  /usr/share/nginx/html;
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53

• 4、根目录下创建一个docker-compose.yml的文件

  version: '3'
  services:
    nginx-vue:
      platform: linux/amd64
      container_name: hospital-front
      build:
        context: .
        dockerfile: Dockerfile
      ports:
        - 80:80
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

• 5、直接运行

  docker-compose up
  1

三、分阶段构建

• 1、修改Dockerfile文件

  FROM node:14 as builder
  
  WORKDIR /app
  COPY package.json .
  RUN npm install
  
  COPY . .
  
  RUN npm run build
  
  # 二次构建
  FROM nginx:alpine
  
  COPY --from=builder /app/dist/ /usr/share/nginx/html/
  # COPY ./dist/ /usr/share/nginx/html/
  RUN rm /etc/nginx/conf.d/default.conf
  
  COPY nginx.conf /etc/nginx/nginx.conf
  COPY default.conf.template /etc/nginx/conf.d
  
  CMD /bin/sh -c "envsubst '80' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf" && nginx -g 'daemon off;'
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21