Docker 发布部署 DEMO

前端容器化

1. 本地开发(3000)

npm run start

2. 本地编译 (8000)

npm run build
http-server -p 8000 ./build

3. 添加.dockerignore

node_modules;
build;

4. 添加 Dockerfile（80）

通过 其他服务镜像 node/nginx 等 创建 自定义镜像

# 基于node14
FROM node:14

# 设置环境变量
ENV PROJECT_ENV production
ENV NODE_ENV production

# 安装nginx
RUN 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

# 把所有源代码拷贝到/app
COPY . /app

# 打包构建
RUN npm run build

# 拷贝配置文件到nginx
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

# 启动nginx，关闭守护式运行，否则容器启动后会立刻关闭
CMD ["nginx", "-g", "daemon off;"]

5. 创建镜像（创建 80 端口）

docker build -t example/react-app .

6. 启动容器(映射 8888:80)

docker run -d --name react-example  -p 8888:80 example/react-app

Node 容器化

1. 本地开发(redis 6379)(node 3000)

// 启动redis
redis-server

node index.js

2. 创建网络

docker network create app-example

3. 建立通信(redis 6389:6379)（node 3000）

docker run -d --name redis-example --network app-example  -p 6389:6379 redis

docker run -it --name node-example --network app-example node:14 /bin/bash

3. 测试通信

自动进入 node-example

ping redis-example

4. 修改 redis 的 host 改为 db 统一 host

const redis = new Redis({
  port: 6379,
  host: "db",
});

5. 新建一个 Dockerfile(设置端口为 3000 同 node 开发端口一致)

# 基于node14
FROM node:14

# 把 package.json package-lock.json 复制到/app目录下
# 为了npm install可以缓存
COPY package*.json /app/

# 切换到app目录 同cd
WORKDIR /app

# 安装依赖
RUN npm install

# 把所有源代码拷贝到/app
COPY . /app

# 设置端口
EXPOSE 3000

# 运行node index.js
CMD ["node","index.js"]

6. 构建镜像(构建端口为 3000)

docker build -t example/node-redis-app .

7. 启动容器(redis 6389:6379)(node 4444:3000)

# 创建网络
docker network create app-example

# 端口冲突：需要先删除 redis-example 容器

# 重新启动redis容器
docker run -d --name db --network app-example  -p 6389:6379 redis

# 关闭无用node-example 测试容器

# 启动node-redid 容器
docker run --name node-redis-example -p 4444:3000 --network app-example -d example/node-redis-app

8. 测试 http://localhost:4444/

关联前端与 Node 容器化

1. 修改 react-app 目录下的 nginx.conf(映射 3000)

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /app/build; # 打包的路径
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # 防止重刷新返回404
    }

    location /api {
        proxy_pass http://node-redis-example:3000; # 添加后台api 代理地址
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

2. 重新构建镜像

docker build -t example/react-node .

3. 启动容器（9999:80）

docker run -d --name react-node-example --network app-example  -p 9999:80 example/react-node

总结

前端 容器化 timeline/react-nginx-node：创建 react-nginx 关联 node 容器，前端项目 react 可以通过 nginx 操作 node 层，进一步操作 mysql 数据库

Node 容器化 mysql:5.7（未用到，启动错误）：创建 mysql 容器，启动 mysql 数据库 timeline/node-mysql：创建 node 关联 mysql 容器，可以通过 node 操作 mysql 数据库