1.前端镜像构建记录

1. dockerfile

# 第一阶段
FROM node:latest AS build
ARG COSTAR_ENV
ENV COSTAR_ENV=${COSTAR_ENV}
COPY . .RUN npm config set registry https://registry.npm.taobao.org/ && \npm install && \npm run dev_build && \mv dist web_portal && \cp -r web_portal /www/# 第二阶段
FROM nginx:latest
ARG COSTAR_ENV
ENV COSTAR_ENV=${COSTAR_ENV}
# 删除默认的nginx配置default.conf nginx.conf
RUN rm /etc/nginx/conf.d/default.conf && rm /etc/nginx/nginx.conf
COPY ./config/nginx/nginx.conf /etc/nginx/
COPY ./config/nginx/web_portal.conf /etc/nginx/sites-enabled/
COPY --from=build /www /www/web_portal/

其中nginx.conf要增加一句，由于默认文件没有，所以先删除（rm /etc/nginx/nginx.conf），然后将自己写好的COPY进去（COPY ./config/nginx/nginx.conf /etc/nginx/）：

2.web_portal.conf

/etc/nginx/sites-enabled/web_portal.conf

##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# https://www.nginx.com/resources/wiki/start/
# https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/
# https://wiki.debian.org/Nginx/DirectoryStructure
#
# In most cases, administrators will remove this file from sites-enabled/ and
# leave it as reference inside of sites-available where it will continue to be
# updated by the nginx packaging team.
#
# This file will automatically load configuration files provided by other
# applications, such as Drupal or Wordpress. These applications will be made
# available underneath a path with that package name, such as /drupal8.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
### Default server configuration
#
server {# 注意：这里写自己前端的端口！！！！！！！！！！！！！listen 6060;server_name localhost;# SSL configuration## listen 443 ssl default_server;# listen [::]:443 ssl default_server;## Note: You should disable gzip for SSL traffic.# See: https://bugs.debian.org/773332## Read up on ssl_ciphers to ensure a secure configuration.# See: https://bugs.debian.org/765782## Self signed certs generated by the ssl-cert package# Don't use them in a production server!## include snippets/snakeoil.conf;root /www/web_portal;location = /50x.html {root   html;}# Add index.php to the list if you are using PHPindex index.html index.htm index.nginx-debian.html;#location ~ \.php$ {#   include snippets/fastcgi-php.conf;##    # With php-fpm (or other unix sockets):#    fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;#    # With php-cgi (or other tcp sockets):# fastcgi_pass 127.0.0.1:9000;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {#  deny all;#}location / {try_files $uri $uri/ /index.html;}
}# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#   listen 80;
#   listen [::]:80;
#
#   server_name example.com;
#
#   root /var/www/example.com;
#   index index.html;
#
#   location / {
#       try_files $uri $uri/ =404;
#   }
#}

3.nginx.conf

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;events {worker_connections 768;# multi_accept on;
}http {### Basic Settings##sendfile on;tcp_nopush on;tcp_nodelay on;keepalive_timeout 65;types_hash_max_size 2048;# server_tokens off;# server_names_hash_bucket_size 64;# server_name_in_redirect off;include /etc/nginx/mime.types;default_type application/octet-stream;### SSL Settings##ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLEssl_prefer_server_ciphers on;### Logging Settings##access_log /var/log/nginx/access.log;error_log /var/log/nginx/error.log;### Gzip Settings##gzip on;# gzip_vary on;# gzip_proxied any;# gzip_comp_level 6;# gzip_buffers 16 8k;# gzip_http_version 1.1;# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;### Virtual Host Configs##include /etc/nginx/conf.d/*.conf;include /etc/nginx/sites-enabled/*;
}#mail {
#   # See sample authentication script at:
#   # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#   # auth_http localhost/auth.php;
#   # pop3_capabilities "TOP" "USER";
#   # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#   server {
#       listen     localhost:110;
#       protocol   pop3;
#       proxy      on;
#   }
#
#   server {
#       listen     localhost:143;
#       protocol   imap;
#       proxy      on;
#   }
#}

2. Dockerfile 指令 COPY 拷贝文件夹

转载于https://www.iszy.cc/posts/13/

尤其要注意拷贝的时候，拷贝的文件夹的状态，可能拷贝过去后，进拷贝的文件里的内容，而没有拷贝文件夹本身。

背景说明

今天在通过 dockerfile 将文件夹拷贝到镜像的时候发现，是把文件夹下的内容拷贝进去了。

dockerfile 如下：

FROM node:alpine
WORKDIR /usr/src/app
COPY dist node_modules package.json ./
EXPOSE 3000
CMD ["yarn", "start:prod"]

我是想把 dist 和 node_modules 两个文件夹都拷贝到镜像中，又不想用多条 COPY 来分别拷贝，那样会多一个 layer。结果发现 dist 和 node_modules 两个文件夹本身没有被拷贝进镜像，而是把文件夹下的内容分别拷贝进的镜像。

经过测试发现：

ADD 命令和 COPY 命令在复制文件时行为一致
COPY/ADD 命令的源如果是文件夹，复制的是文件夹的内容而不是其本身
使用 * 匹配所有文件，如果遇到文件夹也会保持上述逻辑，即仅复制内容

这个逻辑很诡异，和我们的一般预期不符。

我发现在六年前就已经有人问过类似的问题了，看来也没啥要改的意思。

实现方法

下面列举几个事项方式，大家可以参考着使用。

单个文件夹复制，指定目标目录

一种方法就是一次复制一个文件夹，然后 COPY 的时候要指定到镜像中的具体目录，比如把上面的 dockerfile 改成这样：

FROM node:alpine
WORKDIR /usr/src/app
COPY dist ./dist
COPY node_modules ./node_modules
COPY package.json ./
EXPOSE 3000
CMD ["yarn", "start:prod"]

放到另一个文件夹中统一复制

上面那种写法很麻烦，还会增加 layer 数。这边想了一个变相的方法，不是很优雅。

就是将需要拷贝的文件夹都放到一个统一的文件夹中，然后在 dockerfile 中拷贝这个文件夹，文件夹下的目录结构就能够得到保持。

mkdir dockerPackages && mv dist node_modules dockerPackages
FROM node:alpine
WORKDIR /usr/src/app
COPY dockerPackages package.json ./
EXPOSE 3000
CMD ["yarn", "start:prod"]

利用 .dockerignore 文件

我们上面的写法其实就是像完成一件事，那就是仅把部分内容拷贝进镜像，然后忽略其他内容。这样，我们就可以利用 .dockerignore 文件，来更加优雅地实现。先忽略所有文件，然后将我们需要拷贝的文件排除。

.dockerignore:

*
!dist
!node_modules
!package.json
FROM node:alpine
WORKDIR /usr/src/app
COPY . ./
EXPOSE 3000
CMD ["yarn", "start:prod"]

多阶段构建前端docker镜像相关推荐

使用Maven构建项目Docker镜像并上传至阿里云镜像仓库
前言前面介绍了Docker的一些安装.镜像加速.构建镜像并推送至服务器 , 今天在前面的基础上新增配置 , 使项目可以具备构建镜像后将包推送至远端仓库的能力 Docker是什么?有什么 ...
多阶段构建：Docker 下如何实现镜像多阶级构建？
目录前言使用多阶段构建第一步,编译代码. 第二步,构建运行时镜像. 镜像构建对比多阶段构建的其他使用方式为构建阶段命名停止在特定的构建阶段使用现有镜像作为构建阶段前言我们知道 Doc ...
前端 Docker 镜像体积优化
如果 2019 年技术圈有十大流行词,容器化肯定占有一席之地,随着 Docker 的风靡,前端领域应用到 Docker 的场景也越来越多,本文主要来讲述下开源的分布式图数据库 Nebula Graph ...
使用阿里云镜像仓库构建国外 Docker 镜像
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
自己构建shardingsphere-elasticjob-ui Docker镜像
简介 shardingsphere-elasticjob-ui安装部署要自己构建打包,还要假设http服务器,有点麻烦,官方竟然没有Docker镜像,只能自己动手构建了.现把自己构建过程记录下来,分享 ...
mysql 镜像备份_手动构建percona-xtrabackup Docker镜像，并实现mysql数据备份
由于最近项目比较多,并且都需要自己部署运维Mysql,为了保证mysql数据的安全,那么数据备份就必不可少了.之前做mysql数据备份的时候,都是使用的xtrabackup,所以这次也不例外,由于需要 ...
Docker 多阶段构建镜像multi-stage
多阶段构建是一个新特性,需要 Docker 17.05 或更高版本的守护进程和客户端.对于那些努力优化 Dockerfiles 并使其易于阅读和维护的人来说,多阶段构建非常有用. 在之前先来学习术语: ...
SpringBoot 2.3.x 分层构建 Docker 镜像实践
目录[-] . 一.什么是镜像分层 . 二.SpringBoot 2.3.x 新增对分层的支持 . 三.创建测试的 SpringBoot 应用 . 1.Maven 中引入相关依赖和插件 . 2.创建测 ...
基于领域知识的Docker镜像自动构建方法
点击上方蓝字关注我们基于领域知识的Docker镜像自动构建方法陈伟1,2, 叶宏杰1,2, 周家宏1,2, 魏峻1,2 1 中国科学院大学,北京 100190 2 中国科学院软件研究所,北京 10 ...

多阶段构建前端docker镜像