docker构建前端项目的镜像 多种示例 写法

 本地编译后构建

  

   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      FROM nginx:latest
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      COPY dist /usr/share/nginx/html
     
    
  
 

示例一

  

   

    

     

    
    

     

      FROM node:latest as builder
     
    
   

    

     

    
    

     

      WORKDIR /app
     
    
   

    

     

    
    

     

      COPY package.json .
     
    
   

    

     

    
    

     

      RUN npm install --registry=http://registry.npm.taobao.org
     
    
   

    

     

    
    

     

      COPY . .
     
    
   

    

     

    
    

     

      RUN npm run build 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      FROM nginx:latest
     
    
   

    

     

    
    

     

      COPY nginx.conf /etc/nginx
     
    
   

    

     

    
    

     

      COPY --from=builder /app/build /usr/share/nginx/html
     
    
  
 

示例二

  

   

    

     

    
    

     

      FROM node:10-alpine
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      ENV PROJECT_ENV production
     
    
   

    

     

    
    

     

      ENV NODE_ENV production
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      # http-server 不变动也可以利用缓存
     
    
   

    

     

    
    

     

      RUN npm install -g http-server
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      WORKDIR /code
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      ADD package.json /code
     
    
   

    

     

    
    

     

      RUN npm install --production
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      ADD . /code
     
    
   

    

     

    
    

     

      RUN npm run build
     
    
   

    

     

    
    

     

      EXPOSE 80
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      CMD http-server ./public -p 80
     
    
  
 

  
 
 

示例三

  

   

    

     

    
    

     

      FROM node:10-alpine as builder
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      ENV PROJECT_ENV production
     
    
   

    

     

    
    

     

      ENV NODE_ENV production
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      # http-server 不变动也可以利用缓存
     
    
   

    

     

    
    

     

      WORKDIR /code
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      ADD package.json /code
     
    
   

    

     

    
    

     

      RUN npm install --production
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      ADD . /code
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      # npm run uploadOss 是把静态资源上传至 oss 上的脚本文件
     
    
   

    

     

    
    

     

      RUN npm run build && npm run uploadOss
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      # 选择更小体积的基础镜像
     
    
   

    

     

    
    

     

      FROM nginx:10-alpine
     
    
   

    

     

    
    

     

      COPY --from=builder code/public/index.html code/public/favicon.ico /usr/share/nginx/html/
     
    
   

    

     

    
    

     

      COPY --from=builder code/public/static /usr/share/nginx/html/static
     
    
  
 

  
 
 

示例四

  

   

    

     

    
    

     

      # node镜像仅仅是用来打包文件
     
    
   

    

     

    
    

     

      FROM node:alpine as builder
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      ENV PROJECT_ENV production
     
    
   

    

     

    
    

     

      ENV NODE_ENV production
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      COPY package*.json /app/
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      WORKDIR /app
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      RUN npm install --registry=https://registry.npm.taobao.org
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      COPY . /app
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      RUN npm run build
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      # 选择更小体积的基础镜像
     
    
   

    

     

    
    

     

      FROM nginx:alpine
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      COPY nginx.conf /etc/nginx/conf.d/default.conf
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      COPY --from=builder /app/build /app/build
     
    
  
 

  
 
 

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/106768149