GVKun编程网logo

前端必须掌握的 docker 技能 (2)（前端使用docker）

14

针对前端必须掌握的docker技能(2)和前端使用docker这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展06CSS3布局-上（前端必须掌握）、07CSS3布局-下（前端必须掌握）、20

针对前端必须掌握的 docker 技能 (2)和前端使用docker这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展06 CSS3布局-上（前端必须掌握）、07 CSS3布局-下（前端必须掌握）、2011 年 Web 开发者必须掌握的 10 大技能、Github Actions：所有软件开发者必须掌握的技能等相关知识，希望可以帮助到你。

本文目录一览：

前端必须掌握的 docker 技能 (2)（前端使用docker）

前端必须掌握的 docker 技能 (2)（前端使用docker）

概述

作为一个前端，我觉得必须要学会使用 docker 干下面几件事：

  1. 部署前端应用
  2. 部署 nginx
  3. 给部署的 nginx 加上 https
  4. 使用 docker compose 进行部署
  5. 给 nginx 加上 redis
  6. 使用 kubernetes

下面我按照这个节奏一一研究一遍，把心得记录下来，供以后开发时参考，相信对其他人也有用。

参考资料：

docker nginx Beginner’s Guide

部署 nginx

1. 拉取 nginx 镜像。输入下面的命令远程拉取最新版本的 nginx 镜像。

docker pull nginx:latest

2. 在前端项目的主目录下建立 Dockerfile 文件，写入如下内容：

FROM nginx

3. 生成镜像

docker build -t docker-nginx:latest .

4. 运行镜像实例

docker run -d -p 2002:80 docker-nginx

5. 最后打开 localhost:2001 即可看到 nginx 标准的欢迎界面。

搞事

如果我们想自定义 docker 里面的 nginx 的配置文件呢？

1. 我们进入 docker-nginx 容器的 bash 界面

docker exec -it [container_id] /bin/bash

2. 查看 nginx 的配置文件夹路径

nginx -t

// 输出如下内容
// nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
// nginx: configuration file /etc/nginx/nginx.conf test is successful

可以看到配置文件放在 /etc/nginx/nginx.conf。

3. 查看配置文件内容

cat /etc/nginx/nginx.conf

// 在最下面可以看到这么一段
// include /etc/nginx/conf.d/*.conf;

在最下面可以看到这么一段 include /etc/nginx/conf.d/*.conf;，也就是说副配置文件放在了 /etc/nginx/conf.d/default.conf。我们打算改写这个副配置文件。

4. 改写 Dockerfile 文件如下所示：

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

即是说，用当前目录下的 default.conf 文件替换 docker 里面的 default.conf。

5. 最后重新生成一遍镜像并运行容器即可。

注意：我这里的方法并不是最优的，还有挂载配置文件，使用 docker compose 方法比这个好得多，以后再介绍。

06 CSS3布局-上（前端必须掌握）

06 CSS3布局-上（前端必须掌握）

以下主要参考了http://www.ruanyifeng.com/blo... 和 https://developer.mozilla.org... 两篇文章。如果还想更详细的可以看一看这两篇文章。大鹏一日同风起，扶摇直上九万里！一起学习，一起进步！

CSS布局

传统方案是基于盒装模型，依赖display属性+position属性+float属性，但对于一些特殊布局（eg:垂直居中）就不容易实现。

补充：
块元素：出现在另一个元素下面的元素；
内联元素：出现在另一个元素旁边的元素，就像段落中的单个单词一样；

dispaly属性一些默认的display的值，段落之间样式默认值为：display:block；<a>元素默认为display:inline。

注：display:flex和display:grid在布局上比较重要。

1、Flex布局

  • 弹性盒子(Flexbox)

用于创建横向/纵向的一维页面布局，在其父元素上应用display:flex，所有直接子元素机会按照flex进行布局，但是子元素的float,clear,vertical-align属性将失效。

任何一个容器都可指定为flex布局。
.box {
   display: flex;
}
<div>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</div>

image.png

.box {
   display: flex;
}
.box > div {
    flex:1
}
<div>
    <div>one</div>
    <div>two</div>
    <div>three</div>
</div>

image.png

.container{
    display:flex;
    flex-wrap: wrap; /*可换行*/
    justify-content:center;
}
.item{
    flex: 0 1 150px;
    margin: 5px; /*外边距*/
}
flex：是flex-grow、flex-shrink、flex-basis的合并形式。

2、Grid布局

  • 用于同时在两个维度把元素按行和列排列整齐。grad-template-rows和grid-template-columns定义了行和列的轨道。grid-gap定义了网格间的间距。
Grid 布局只对项目生效，不对项目子元素起作用。

如下代码：

.box {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grad-template-rows: 100px 100px;
    grid-gap:10px;
}
<div>
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>one</div>
    <div>two</div>
</div>
注：
a.fr单位跨网格轨道可用空间的分布。上面代码中有着3个大小为1fr的轨道的网格容器，创建了三个列轨道；
b.若最后一个是2fr，则表示最后一个轨道是前者的二倍；
c.还可以与绝对单位结合使用，eg:
grid-template-columns: 150px 1fr 2fr;表示第一列宽是150像素，第三列宽是第二列宽的2倍;
d.grid-template-columns: 150px auto 150px;auto 表示由浏览器自己决定
  • 默认情况下，容器元素都是块级元素，但也可以设为行内元素。如下代码，就是指定了div是一个行内元素，该元素内部采用网格布局：

div{display: inline-grid;}

注：设为网格布局后，容器子元素（项目）的float、display:inline-block、display:table-cell、vertical-align和column-*等设置都将失效。
  • 容器指定了网格布局后，就要划分行和列了。

    列宽：grid-template-columns
    行高：grid-template-rows

代码如下：

.container {
    display:grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows:100px 100px 100px;
}

上面代码指定了一个三行三列的网格，列和宽都是100px,当然也可用百分比;
或用repeat(3,100px)也可；
或用repeat(auto-fill,100px)，当容器大小不确定时可以用。

  • 比较常用的布局

两栏布局：

grid-template-columns: minmax(150px,25%) 1fr;

表示第一列宽度最小为150px，最大宽度为总宽度的25%。

三明治布局
grid-template-rows：auto 1fr auto;
垂直划分为上中下三部分（页眉、内容区、页脚），页眉和页脚都是本来的内容高度，内容区是剩下所有的高度。

圣杯布局（最常用）
是将三明治布局中的内容区分成三部分（左边栏、主栏、右边栏）
image.png
html代码：

<div>
    <header/>
    <div>
    <main/>
    <div/>
    <footer/>
</div>

CSS代码：

.container{
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
}

表示垂直方向（页眉和页脚都是本身内容高度，内容区占满剩余的高度），水平方向（左边栏和右边栏都是本身内容高度，中间主栏占满剩余的高度）。

十二网格布局：

grid-template-columns: repeat(12, 1fr);

一些常用的网格属性

  • 行间距：grid-row-gap
  • 列间距：gid-column-gap
  • 合并写法：grid-gap
  • 设置单元格内容的水平位置：justify-items
  • 设置单元格内容的垂直位置：align-items
  • 合并写法：place-items
  • 整个内容区域在容器里面的水平位置：justify-content
  • 整个内容区域在容器里面的垂直位置：align-content
  • 合并写法：place-content
  • grid-column：1/3等同于grid-column: 1/span 2表示从第一根列线到第三根列线（即第一列和第二列）
  • grid-row：1/span 2，第一根行线，横跨两个网格，（即表示第一行和第二行）
  • grid-area：指定项目放在哪个区域
如不完善之处，评论区欢迎您！

07 CSS3布局-下（前端必须掌握）

07 CSS3布局-下（前端必须掌握）

摘要：在这篇文章，你将会看到CSS中的常用布局以及一些你平时不注意的点。非常适合初学者！大鹏一日同风起，扶摇直上九万里！一起学习，一起进步！

1、浮动 float

代码如下：

<div>Float</div>
<p>It''s brave new world out there. Our children are belong put in increasing more competitive situations............</p>
.float-div{
    float: left;
    background: yellowgreen;
    width: 150px;
    height: 150px;
    margin-right: 30px;
}

效果如下：
image.png

  • float：有四个可能的值，left（左浮动）、right(右浮动)、none（默认不浮动）、inherit（继承父元素的浮动属性）。
  • 清除浮动（clear）：对于所在浮动下面的自身不浮动内容也将会围绕浮动元素进行包装，要想解决这个问题，可以用clear属性。有三个值，left(停止任何活动的左浮动)、right（停止右浮动）、none（停止左右浮动）。

2、定位 position

  • 静态定位：是默认行为。position:static;
  • 相对定位：position:relative;结合top/bottom/left/right四个属性使用。
  • 绝对定位：position:absolute;与其他的层独立开来，结合top/bottom/left/right四个属性使用。
  • 定位上下文：绝对定位的元素的相对位置元素，若要绝对定位的元素的相对位置元素，则这个元素一定要包含绝对定位元素。
  • z-index：正值表示将它们移动到堆栈上方，负值表示将它们移动到堆栈下方。默认情况下，定位的元素都具有z-index为auto，实际上为0。
  • 固定定位：相对于浏览器视口本身。position: fixed;
  • 粘性定位：position: sticky;可以创建一个滚动索引页面，在此页面上，不同的标题会停留在页面底部。（下面的列表项可以设置多一些，才能看到效果哦！）

html代码：

<h1>Sticky positioning</h1>

<dl>
    <dt>Brave new world</dt>
        <dd>Apple</dd>
        <dd>Ant</dd>
        <dd>Altimeter</dd>
    <dt>The best start in life</dt>
        <dd>Bird</dd>
        <dd>Buzzard</dd>
        <dd>Bee</dd>
        <dd>Banana</dd>
    <dt>Top course choices</dt>
        <dd>Calculator</dd>
        <dd>Cane</dd>
        <dd>Camera</dd>
     ......
</dl>

CSS代码：

dt {
  position: sticky;
  background-color: black;
  color: white;
  padding: 10px;
  top: 0;
  left: 0;
  margin: 1em 0;
}
practice:
知道了这么多，快为一所大学社区做一个美丽的排版吧！
源码可以参考https://github.com/unique008/...。

(end)

以上均是参考最权威的MDN Web Docs，总结出来的比较重要的知识点，与君共勉。不妥之处，评论区欢迎您！

2011 年 Web 开发者必须掌握的 10 大技能

2011 年 Web 开发者必须掌握的 10 大技能

很多的 Web 开发人员认为他们目前掌握的技能已经可以维持他们的工作。但是，请检查以下列出的 10 大技能，如果你还没有掌握，那就抓紧时间吧，想在 2011 年脱颖而出，你得继续努力。

1) 掌握 Web 的基本语言

HTML5 + CSS3 将会是接下来的 Web 应用主流技术，别以为还早，套用一句流行的话：别输在起跑线上，赶紧找点资料开始学习吧。可以从 http://slides.html5rocks.com/ 这里获取一些关于 HTML5 的演示。

2) 理解所有Web开发环境

.NET, PHP, 和 Java，这些流行的 Web 开发环境，至少要掌握其中之一，但还不够，尽可能多了解其他的环境作为辅助。

3) 了解 RIA (Rich Internet Application) 功能

RIA 最厉害的算是 Flash 了，也包括 RIA 和 Flex；微软也有 Sliverlight 和 Java 的 JavaFx 技术。其中 Ajax 也是必须的。

4) 尽可能的了解 Web 服务

你知道怎么创建 Web 服务吗？怎么集成第三方的 Web 服务到你的项目中吗？理解 XML、SOAP、JSON 和 REST 吗？

5) 了解动态编程语言

除了 Java 、C、PHP 外，现在有很多新的动态编程语言，有如：Python, F#, Groovy, Ruby 等，多少了解一点吧。

6) 构建自己的软件技能

在前面提到的一些技术技能外，还有一些非开发技术技能你需要掌握：沟通交流、团队领导、项目管理等等，除非你想永远当士兵。

7) 理解问题域

让自己开始理解什么是问题领域。

 

8) 使用敏捷方法

很多开发公司都在尝试敏捷开发，你至少需要理解这到底是怎么一回事。

9) 了解如何开发手机Web应用

手机 Web 开发现在非常火热，如果你不知道大家在谈论什么，那么你太out了，这是非常流行的技术，如果暂时还没有这样的开发任务，那你至少应该有所了解，会需要什么样的技术、什么样的开发工具，什么样的开发环境。

10) 让开发保持简单

软件版本控制和问题跟踪系统在一个团队开发中是非常重要的，那么你熟悉这些工具吗？

See this Infograhic on “What Beautiful HTML Looks Like” (click to load the full-size image)

英文原文

Github Actions：所有软件开发者必须掌握的技能

Github Actions：所有软件开发者必须掌握的技能

本文转自 FEPulse 公众号（微信搜索 FEPulse，精选国内外最新前端资讯，为你把握前端脉搏）。

Github Actions 是 GitHub Universe 大会上发布的，被 Github 主管 Sam Lambert 称为“再次改变软件开发”的一款重磅功能（“we believe we will once again revolutionize software development.”）。本文目的是向大家介绍这一 Github 全新的功能，更多内容可以查看文末的拓展阅读。

什么是 Github Actions，官网的介绍是：

With GitHub Actions you can automate your workflow from idea to production.

还是很迷糊。不急，我们先看现在的 Github 是什么？代码仓库，一个提供了分布式版本控制和源代码管理的代码仓库。想象一下这样一种场景，你写好了一个网站的代码，并且存储到了 Github 上，但完事了吗？没有，你还需要部署代码才能让别人访问你的网站。另外，如果你修改了代码，还需要单独测试。理想的情况应该是：当你将代码提交到 master 时，测试、部署等等所有工作自动执行。之前，Travis、Pre-commit Hooks 可以帮助我们实现部分自动化，而现在有了 Github Actions，通通皆可抛。

Github Actions 可以自动化和定制化项目的 Workflow，像官网显示的那样。

图片描述

Workflow 比较好理解，将对项目的操作概括和按顺序整理，在遇到触发条件时 Workflow 就会按照开发者事先的设置串行或并行地运行一系列 Action，这就是 Github Actions 名称的由来。上面那张图中，Action 即一个个方框，Workflow 即将 Action 连接起来的图表。触发条件有很多种，比如 push 代码到 Github，比如 assign 了一个 issue，比如创建了一个 milestone 等等，这些都是 Github 提供的事件，工作流只要监听关心的事件即可。（目前 Github 一共提供了 26 种事件，想看所有事件可以查看：https://developer.github.com/...）

直观地理解了 Workflow 和 Action，下面再对 Github Actions 的核心 Action 作更深入地理解。Action 是一小段可以运行的代码，可以用来做很多事情。比如你可以设置一个自动测试的 Action，当提交代码到 Github 后，Action 便会触发自动测试；再比如你可以设置一个自动部署的 Action，当代码通过测试后直接部署到腾讯云、阿里云、Azure 上。除此以外，你还可以拿 Action 做很多事。比如当前项目是一个 NPM Package，你可以设置一个 Action 用来自动 Publish；比如你需要监听项目的 issue，所以你可以设置一个 Action，当项目中有 issue 创建，给你的微信发一条提醒；比如 minify 或 uglify 你的 JS 代码……Action 的想象空间很大，全看你的需求。目前 Github 一共发布了 450 个示例 Action，你也可以创建、分享你的 Action，别人也能搜到你的 Action。

讲道理，讲完基本概念下面就要开始实操了，但 Github Acions 还处于 Beta 阶段，并没有对所有人开放，想要提前使用的可以在官网尝试申请。因为我还没拿到测试资格，所以后面有机会的话再说吧。不过已经有 Github Actions 的第一批实践者写了一篇文章关于如何设置以及如何创建一个 Action。

图片描述
图片描述

图片描述

拓展阅读：

  1. https://github.com/features/a...：官网；
  2. https://developer.github.com/...： 文档；
  3. Introducing GitHub Actions：详细介绍了如何设置 Action 和创建新的 Action；
  4. GitHub Actions: built by you, run by us：一些 Action Demo；
  5. GitHub Actions Creates a Buzz for Automated Dev Workflows：新闻报道；
  6. GitHub grabs a piece of the Actions: ''A project that will do for software development what we did for the pull request''：新闻报道。

我们今天的关于前端必须掌握的 docker 技能 (2)和前端使用docker的分享已经告一段落，感谢您的关注，如果您想了解更多关于06 CSS3布局-上（前端必须掌握）、07 CSS3布局-下（前端必须掌握）、2011 年 Web 开发者必须掌握的 10 大技能、Github Actions：所有软件开发者必须掌握的技能的相关信息，请在本站查询。

本文标签：

上一篇docker 安装与基本命令（docker安装与基本命令总结经验）

下一篇docker 命令（我使用过的）（docker命令详解大全）

相关文章