多阶段构建前端docker镜像

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 PHP
        index 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: POODLE
	ssl_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"]