Docker助力前端开发，轻松打造高效应用

https://docs.docker.com/engine/reference/builder/

构建前端镜像

在开发和部署前端应用程序时，使用Docker可以提供一个简便而可靠的方式来打包、分发和运行应用程序。

1. 创建Dockerfile

首先，我们需要创建一个Dockerfile，该文件用于定义如何构建我们的前端nginx镜像。

# 使用一个基础的nginx镜像
FROM nginx:latest

# 删除默认的nginx配置文件
RUN rm /etc/nginx/conf.d/default.conf

# 将我们自定义的nginx配置文件复制到容器中
COPY nginx.conf /etc/nginx/conf.d/

# 将前端代码复制到nginx的默认静态文件目录中
COPY dist /usr/share/nginx/html

# 暴露80端口，允许外部访问
EXPOSE 80

# 启动nginx服务
CMD ["nginx", "-g", "daemon off;"]

上述Dockerfile中的关键步骤包括：

使用基础的nginx镜像作为我们的基础镜像
删除默认的nginx配置文件，以便我们可以使用自定义的配置文件
将自定义的nginx配置文件复制到容器中的nginx配置目录
将前端代码复制到nginx的默认静态文件目录中
暴露容器的80端口，以便外部可以访问该容器
启动nginx服务

2. 创建nginx配置文件

接下来，我们需要创建一个自定义的nginx配置文件，用于配置nginx作为静态文件服务器。

在项目根目录下创建一个名为nginx.conf的文件，并添加以下内容：

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
}

上述nginx配置文件中的关键配置项包括：

listen 80;：监听80端口
server_name localhost;：指定服务器名称为localhost
root /usr/share/nginx/html;：指定静态文件目录为/usr/share/nginx/html
try_files $uri $uri/ /index.html;：尝试访问请求的文件，如果文件不存在则返回index.html

3. 构建镜像

现在，我们可以使用以下命令构建我们的前端nginx镜像：

docker build -t frontend-nginx .

上述命令中-t参数用于指定镜像的名称为frontend-nginx，.表示使用当前目录下的Dockerfile进行构建。

名称可以以 name:version 的形式指定，name和version之间用冒号分隔。如果没有指定版本，则默认为latest。

4. 运行镜像

构建完成后，我们可以运行我们的前端nginx镜像：

docker run -d -p 8080:80 frontend-nginx

上述命令中-d参数表示在后台运行容器，-p参数将容器的80端口映射到主机的8080端口上。

现在，我们可以通过访问http://localhost:8080来访问我们部署的前端应用程序。

Dockerfile文件常见命令

From

指定基础镜像，必须为第一个命令

格式：
　　FROM <image>
　　FROM <image>:<tag>
　　FROM <image>@<digest>

示例：　　
    FROM centos:7

注：
   tag或digest是可选的，如果不使用这两个值时，会使用latest版本的基础镜像

RUN

构建镜像时执行的命令

RUN用于在构建镜像时执行命令，其有以下两种命令执行方式：
shell执行
格式：
    RUN <command>
exec执行
格式：
    RUN ["executable", "param1", "param2"]
示例：
    RUN apk update
    RUN ["/etc/execfile", "arg1", "arg1"]
注：RUN指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，
可以在构建时指定--no-cache参数，如：docker build --no-cache

ADD

将本地文件添加到容器中，tar类型文件会自动解压(网络压缩资源不会被解压)，可以访问网络资源，类似wget

格式：
    ADD <src>... <dest>
    ADD ["<src>",... "<dest>"] 用于支持包含空格的路径
示例：
    ADD hom* /mydir/          # 添加所有以"hom"开头的文件
    ADD hom?.txt /mydir/      # ? 替代一个单字符,例如："home.txt"
    ADD test relativeDir/     # 添加 "test" 到 `WORKDIR`/relativeDir/
    ADD test /absoluteDir/    # 添加 "test" 到 /absoluteDir/

COPY

类似ADD，但是是不会自动解压文件，也不能访问网络资源

CMD

构建镜像后调用，也就是在容器启动时才进行调用。

格式：
    CMD ["executable","param1","param2"] (执行可执行文件，优先)
    CMD ["param1","param2"] (设置了ENTRYPOINT，则直接调用ENTRYPOINT添加参数)
    CMD command param1 param2 (执行shell内部命令)
示例：
    CMD echo "This is a test." | wc -l
    CMD ["/usr/bin/wc","--help"]

注：CMD不同于RUN，CMD用于指定在容器启动时所要执行的命令，而RUN用于指定镜像构建时所要执行的命令。

ENTRYPOINT

配置容器，使其可执行化。

格式：
    ENTRYPOINT ["executable", "param1", "param2"] (可执行文件, 优先)
    ENTRYPOINT command param1 param2 (shell内部命令)
示例：
    FROM centos:7
    ENTRYPOINT ["ls", "/usr/local"]
    CMD ["/usr/local/tomcat"]
  之后，docker run 传递的参数，都会先覆盖cmd,然后由cmd 传递给entrypoint ,做到灵活应用

注：
 ENTRYPOINT与CMD非常类似，不同的是通过docker run执行的命令不会覆盖ENTRYPOINT，
 而docker run命令中指定的任何参数，都会被当做参数再次传递给CMD。
 Dockerfile中只允许有一个ENTRYPOINT命令，多指定时会覆盖前面的设置，
 而只执行最后的ENTRYPOINT指令。
 通常情况下，    ENTRYPOINT 与CMD一起使用，ENTRYPOINT 写默认命令，当需要参数时候 使用CMD传参

LABEL

用于为镜像添加元数据

格式：
    LABEL <key>=<value> <key>=<value> <key>=<value> ...
示例：
　　LABEL version="1.0" description="ssd硬盘" by="rundreamsFly"
注：
　　使用LABEL指定元数据时，一条LABEL指定可以指定一或多条元数据，指定多条元数据时不同元数据
　　之间通过空格分隔。推荐将所有的元数据通过一条LABEL指令指定，以免生成过多的中间镜像。

ENV

设置环境变量

格式：
    ENV <key> <value>  #<key>之后的所有内容均会被视为其<value>的组成部分，因此，一次只能设置一个变量
    ENV <key>=<value> ...  #可以设置多个变量，每个变量为一个"<key>=<value>"的键值对，
    如果<key>中包含空格，可以使用\来进行转义，也可以通过""来进行标示；另外，反斜线也可以用于续行
示例：
    ENV myName Iversion
    ENV myCat=demos

EXPOSE

指定于外界交互的端口

格式：
    EXPOSE <port> [<port>...]
示例：
    EXPOSE 80 443
    EXPOSE 8080    
    EXPOSE 11211/tcp 11214/udp
注：　　
EXPOSE并不会让容器的端口访问到主机。要使其可访问，
需要在docker run运行容器时通过-p来发布这些端口，或通过-P参数来发布EXPOSE导出的所有端口

如果没有暴露端口，后期也可以通过-p 8080:80方式映射端口，但是不能通过-P形式映射

VOLUME

指定持久化目录（指定此目录可以被挂载出去）

格式：
    VOLUME ["/path/to/to"]
示例：
    VOLUME ["/data"]
    VOLUME ["/var/www", "/var/log/apache2", "/etc/apache/user"
注：一个卷可以存在于一个或多个容器的指定目录，该目录可以绕过联合文件系统，并具有以下功能：
    卷可以容器间共享和重用
    容器并不一定要和其它容器共享卷
    修改卷后会立即生效
    对卷的修改不会对镜像产生影响
    卷会一直存在，直到没有任何容器在使用它

WORKDIR

工作目录，类似于cd命令

格式：
    WORKDIR /path/to/workdir
示例：
    WORKDIR /a  (这时工作目录为/a)
    WORKDIR b  (这时工作目录为/a/b)
    WORKDIR c  (这时工作目录为/a/b/c)
注：　
  通过WORKDIR设置工作目录后，Dockerfile中其后的命令RUN、CMD、ENTRYPOINT、ADD、COPY
  等命令都会在该目录下执行。在使用docker run运行容器时，可以通过-w参数覆盖构建时所设置的工作目录。

ARG

相当于构建镜像时可以在外部为里面传参

格式：
    ARG <name>[=<default value>]
示例：
    ARG site
    ARG build_user=www

From centos:7
ARG parameter
VOLUME /usr/share/nginx
RUN yum -y install $parameter
EXPOSE 80 443
CMD nginx -g "daemon off;"

# 可以这如下这样灵活传参
docker build --build-arg=parameter=net-tools -t nginx:1.14 .

推送镜像到仓库

在使用Docker进行应用开发和部署的过程中，我们常常需要将本地构建好的镜像推送到远程仓库，以便于其他开发者或者服务器可以获取并使用这些镜像。

推送镜像的过程可以简单分为以下几个步骤：

登录远程仓库：在推送镜像之前，首先需要使用自己的账号登录到远程仓库。
打标签：为了在远程仓库中唯一标识我们的镜像，需要为镜像打上标签。
推送镜像：将打标签后的镜像推送到远程仓库。

1. 登录远程仓库

首先，我们需要使用docker login命令登录到远程仓库。具体命令如下：

docker login [OPTIONS] [SERVER]

其中，OPTIONS为可选参数，用于指定认证方式和认证信息，SERVER为远程仓库的地址。

示例代码：

docker login -u myusername -p mypassword mydockerregistry.com

此命令将使用提供的用户名和密码登录到mydockerregistry.com这个远程仓库。

2. 打标签

接下来，我们需要为本地镜像打上标签，以便于在推送到远程仓库时进行唯一标识。通常，我们使用远程仓库的地址作为标签的前缀。

docker tag SOURCE_IMAGE[:TAG] TARGET_IMAGE[:TAG]

其中，SOURCE_IMAGE为本地镜像的名称和标签，TARGET_IMAGE为远程仓库地址和标签。

示例代码：

docker tag myimage:latest mydockerregistry.com/myimage:latest

此命令将本地的myimage:latest镜像打上标签mydockerregistry.com/myimage:latest。

3. 推送镜像

最后一步，我们将带有标签的镜像推送到远程仓库。

docker push [OPTIONS] NAME[:TAG]

其中，OPTIONS为可选参数，NAME为镜像的名称，TAG为标签。

示例代码：

docker push mydockerregistry.com/myimage:latest

此命令将标签为mydockerregistry.com/myimage:latest的镜像推送到远程仓库。

docker常见命令

docker images

docker images可以查看本地已经下载的镜像，如下：

docker images [OPTIONS] [REPOSITORY[:TAG]]

docker rmi

要删除不再需要的Docker镜像，可以使用docker rmi命令。执行以下命令以删除指定的镜像：

docker rmi [OPTIONS] IMAGE [IMAGE...]

options参数说明

-f，强制删除
–no-prune，不移除该镜像的过程镜像，默认移除。

例如，我们要删除docker中的mysql镜像，命令如下：

docker rmi mysql

docker tag

我们可以通过docker tag命令来对已有镜像进行标记，修改镜像的名称以及tag，修改的镜像要有镜像仓库地址/项目名/自定义名:版本
，命令如下：

docker tag <现有镜像名称>:<现有标签> <新镜像名称>:<新标签>

例如，我们要将hello-world镜像标记为hogwarts镜像，命令如下：

docker tag hello-world:latest hogwarts:muller

docker push

docker push命令用于将本地机器上的一个或多个 Docker 镜像推送（上传）到远程的 Docker 仓库。以下是docker push命令的基本语法和使用方法：

基本语法：

docker push [OPTIONS] NAME[:TAG]

常用选项：

--disable-content-trust：禁用内容信任，不对推送的镜像进行签名。
--platform：指定要推送的镜像所在的平台。

使用示例：

推送一个镜像：

docker push image_name

这将把名为 image_name 的镜像推送到默认的 Docker 仓库中。

推送特定标签的镜像：

docker push image_name:tag

使用 :tag 可以推送指定镜像名称和标签的镜像版本。

推送指定平台的镜像：

docker push --platform linux/amd64 image_name

使用 --platform 选项可以指定要推送的镜像所在的平台。这在多平台环境下很有用，可以根据需要推送特定平台的镜像。

禁用内容信任：

docker push --disable-content-trust image_name

使用 --disable-content-trust 选项可以禁用内容信任，不对推送的镜像进行签名。

docker run

docker run命令用于在 Docker 容器中运行一个新的镜像。下面是docker run命令的基本语法和使用方法：

基本语法：

docker run [OPTIONS] IMAGE [COMMAND] [ARG...]

常用选项：

-d, --detach：以后台（detached）模式运行容器。
-p, --publish：进行端口映射，将容器的端口映射到宿主机的端口。
-v, --volume：挂载数据卷，将宿主机的目录或文件与容器中的目录或文件进行共享。
-e, --env：设置环境变量。
--name：为容器指定一个名称。
--rm：容器停止后自动删除。

使用示例：

运行一个镜像：

docker run image_name

这将在一个新的容器中运行名为 image_name 的镜像，默认情况下会执行镜像中的默认命令。

在后台运行一个容器：

docker run -d image_name

使用 -d 选项后，容器将以后台模式运行，即守护进程模式。

进行端口映射：

docker run -p host_port:container_port image_name

使用 -p 选项可以将容器内部的端口映射到宿主机上的端口，将 container_port 映射到 host_port。

挂载数据卷：

docker run -v host_path:container_path image_name

使用 -v 选项可以将宿主机上的目录或文件与容器内部的目录或文件进行共享，将 host_path 挂载到 container_path。

设置环境变量：

docker run -e key=value image_name

使用 -e 选项可以设置容器内部的环境变量，将 key 设置为 value。

指定容器名称：

docker run --name container_name image_name

使用 --name 选项可以为容器指定一个名称，将容器命名为 container_name。

容器停止后自动删除：

docker run --rm image_name

使用 --rm 选项可以在容器停止后自动删除容器。

docker build

通过Dockerfile构建镜像

docker build -t 新镜像名字:TAG .  # 注意 TAG后面有个空格，有个点

示例

docker build -t centosjava8:1.5 .

奇淫技巧

通过echo输入多行内容到文本

Dockerfile之nginx脚本(dockerfile通过echo输入多行内容到文本)

FROM nginx
RUN echo 'upstream portainer {\n\
    server www.micking.top:9000;\n\
}\n\
server {\n\
    listen 19000;\n\
    listen 9000;\n\
    server_name localhost;\n\
    ssl on;\n\
    ssl_certificate /etc/nginx/cert/2423367_www.micking.top.pem;\n\
    ssl_certificate_key /etc/nginx/cert/2423367_www.micking.top.key;\n\
    ssl_session_timeout 5m;\n\
    ssl_protocols SSLv2 SSLv3 TLSv1.2;\n\
    ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;\n\
    ssl_prefer_server_ciphers on;\n\
    if ($scheme != "https") {\n\
        return 301 https://$host$request_uri;\n\
    }\n\
    location / {\n\
        proxy_pass http://portainer;\n\
        proxy_set_header Host $host;\n\
        proxy_set_header X-Real-IP $remote_addr;\n\
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n\
        proxy_set_header Via "nginx";\n\
    }\n\
}\n'\
>> /etc/nginx/conf.d/https_portainer.conf

以上脚本带有使用echo在dockerfile中输入多行内容到文本中。

注意，docker RUN echo 输入的文本内容是在镜像中的目录，而非宿主机中，创建容器后会出现在容器中，要通过容器目录挂载到宿主机中才能在宿主机中操作。

docker RUN echo 输入多行文本一定要用 `` 包裹起来，每行最后要加上\n,还有末尾结束要加上斜杠,也就是上面的效果。

Docker助力前端开发，轻松打造高效应用

构建前端镜像

1. 创建Dockerfile

2. 创建nginx配置文件

3. 构建镜像

4. 运行镜像

Dockerfile文件常见命令

From

RUN

ADD

COPY

CMD

ENTRYPOINT

LABEL

ENV

EXPOSE

VOLUME

WORKDIR

ARG

推送镜像到仓库

1. 登录远程仓库

2. 打标签

3. 推送镜像

docker常见命令

docker images

docker rmi

docker tag

docker push

docker run

docker build

奇淫技巧

通过echo输入多行内容到文本

codeteenager

引用和评论

网页设计的垂直居中

CSS团队协作规范

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

100个React最佳实践小技巧

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了