单页应用
前端工作中最常见的就是单页应用了。我们首先用create-react-app快速创建一个应用
npm i create-react-app -g
create-react-app react-appcd react-app
npm run start
可以看见正常启动的页面。
打包试一下
npm run build
可以看到本地生成了一个build目录，这就是最后线上运行的代码。
我们先在本地运行下build目录看看
npm i http-server -g
http-server -p 4444 ./build
访问 http://localhost:4444 即可看到打包后的页面
单页应用Docker化
在react-app目录下新建Dockerfile .dockerignore和nginx.conf
.dockerignore
node_modulesbuild
dockerignore指定了哪些文件不需要被拷贝进镜像里，类似.gitignore。
我们知道单页应用的路由一般都被js托管，所以对于nginx需要特别配置nginx.conf
server {
listen 80;
server_name localhost;
location / {
root /app/build; # 打包的路径
index index.html index.htm;
try_files $uri $uri/ /index.html; # 防止重刷新返回404
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Dockerfile
# 基于node11FROM node:11# 设置环境变量ENV PROJECT_ENV production
ENV NODE_ENV production# 安装nginxRUN apt-get update && apt-get install -y nginx# 把 package.json package-lock.json 复制到/app目录下# 为了npm install可以缓存COPY package*.json /app/# 切换到app目录WORKDIR /app# 安装依赖RUN npm install --registry=https://registry.npm.taobao.org# 把所有源代码拷贝到/appCOPY . /app# 打包构建RUN npm run build# 拷贝配置文件到nginxCOPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80# 启动nginx，关闭守护式运行，否则容器启动后会立刻关闭CMD ["nginx", "-g", "daemon off;"]
需要特别注意的是:
COPY package*.json /app/
RUN npm install
COPY . /app
我们单独把package.json文件先拷贝到app，安装完依赖，然后才把所有的文件拷贝到app，这是为什么？
这是为了充分利用docker缓存
COPY . /app
RUN npm install
如果这么写，那么每一次重新构建镜像，都需要下载一次npm包，这是非常浪费时间的！而把package.json与源文件分隔开写入镜像，这样只有当package.json发生改变了，才会重新下载npm包。
当然缓存有时候也会造成一些麻烦，比如在进行一些shell操作输出内容时，由于缓存的存在，导致新构建的镜像里的内容还是旧版本的。
我们可以指定构建镜像时不使用缓存
docker build --no-cache -t deepred5/react-app .
最佳实践是在文件顶部指定一个环境变量，如果希望不用缓存，则更新这个环境变量即可，因为缓存失效是从第一条发生变化的指令开始。
打包镜像
docker build -t deepred5/react-app .
启动容器
docker run -d --name my-react-app -p 8888:80 deepred5/react-app
访问 http://localhost:8888 即可看到页面
访问 http://localhost:8888/deepred5, 也可以看见页面，说明nginx防刷新配置生效了！
多层构建
我们之前写的Dockerfile其实是有些问题的: 镜像基于node11，但是整个镜像用到node环境的地方只是为了前端打包，真正启动的是Nginx。镜像里的项目源代码以及node_modules其实根本没有用，这些冗余文件造成了镜像的体积变得非常庞大。
而我们仅仅需要打包出来的静态文件以及启动一个静态服务器Nginx即可。
这时就可以使用multi-stage多层构建。
新建一个Dockerfile.multi
# 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
这个文件里，我们使用了两个FROM基础镜像，第一个node:alpine仅仅作为打包环境，真正的基础镜像是nginx:alpine
打包镜像
# -f 指定使用Dockerfile.multi进行构建docker build -t deepred5/react-app-multi . -f Dockerfile.multi
启动容器
docker run -d --name my-react-app-multi -p 8889:80 deepred5/react-app-multi
访问 http://localhost:8889 即可看到页面
查看镜像大小
docker images deepred5/react-app-multi
docker images deepred5/react-app
可以发现，两者的大小相差巨大。
deepred5/react-app镜像有1G多，而deepred5/react-app-multi只有20多M
主要原因是：deepred5/react-app的基础镜像node:11就有900M，而deepred5/react-app-multi的基础镜像nginx:alpine只有20M。由此可见多层构建对于减少镜像大小是非常有帮助的。
Node应用
前端有时也会参与到Node BFF层的开发。我们来创建一个Node结合Redis的简单项目
mkdir node-redis
cd node-redisnpm init -ynpm i koa koa-router ioredis
touch index.js
node-redis/index.js
const Koa = require('koa');const Router = require('koa-router');const Redis = require("ioredis");const app = new Koa();const router = new Router();const redis = new Redis({
port: 6379,
host: '127.0.0.1'});
router.get('/', (ctx, next) => {
ctx.body = 'hello world.';
});
router.get('/api/json/get', async (ctx, next) => { const result = await redis.get('age');
ctx.body = result;
});
router.get('/api/json/set', async (ctx, next) => { const result = await redis.set('age', ctx.query.age);
ctx.body = {
status: result,
age: ctx.query.age
}
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000, () => { console.log('server start at localhost:3000');
})
我们首先需要本地安装Redis，然后启动redis
redis-server
启动Node项目
node index.js
访问 http://localhost:3000/ 即可看到页面
访问 http://localhost:3000/api/json/set?age=2 ，我们就向Redis里设置age的值为2
访问 http://localhost:3000/api/json/get ，我们就取得Redis里age的值
Node应用Docker化
首先我们来思考下，这个后端应用涉及Node和Redis。如果我们要部署到Docker里，应该怎么构建镜像？
方案一：基于一个最基础的
ubuntu镜像，然后我们在其中安装Node和Redis，这样Node和Redis之间就可以进行通信了。这种方案只需要启动一个容器，因为Node和Redis已经在这个容器里了。方案二：我们基于
Redis镜像启动一个容器，专门用来跑Redis。基于Node镜像再启动一个容器，专门用来跑Node。
Docker的理念更倾向于方案二。我们希望一个镜像专注于做一件事，现在流行的微服务，微前端也是这种思想。
我们之前说过每个容器都是相互隔离的，通过映射端口才能访问容器里的网络应用。但是容器和容器之间怎么进行通信呢？
Docker里使用Networking进行容器间的通信
Networking
# 创建一个app-test网络docker network create app-test
我们只需要把需要通信的容器都加入到app-test网络里，之后容器间就可以互相访问了。
docker run -d --name redis-app --network app-test -p 6389:6379 redis
docker run -it --name node-app --network app-test node:11 /bin/bash
我们创建了两个容器，这两个容器都在app-test网络里。
我们进入node-app容器里，然后ping redis-app，发现可以访ping通，说明容器间可以通信了！
我们修改之前的代码:
const redis = new Redis({
port: 6379,
host: 'db',
});
redis的host改为db
新建一个Dockerfile
FROM node:11
COPY package*.json /app/
WORKDIR /app
RUN npm install
COPY . /app
EXPOSE 3000
CMD ["node","index.js"]
构建镜像
docker build -t deepred5/node-redis-app .
启动容器
# 创建网络docker network create app-test# 启动redis容器docker run -d --name db --network app-test -p 6389:6379 redis
# 启动node容器docker run --name node-redis-app -p 4444:3000 --network app-test -d deepred5/node-redis-app
访问 http://localhost:4444/ 即可看到页面
还记得我们之前做的react-app单页应用吗？我们可以也把这个应用加入到app-test网络里来，这样前端单页应用也可以
