HBC BLOG

主题

docker 学习 ​

.dockerignore 忽略⽂件 ​

  • node_modules 不应该被拷⻉到 docker images 中
  • 所以使⽤.dockerignore ⽂件忽略
  • 根路径创建.dockerignore
node_modules
*.md

Dockfile 文件 ​

假如是 node 项目 ​

bash
# 指定node版本
FROM node:20-alpine
# node 放到指定文件夹
WORKDIR /app
# 拷贝本地项目
COPY package*.json .
# 安装依赖
RUN npm install
# 拷贝本地项目
COPY . .
# 端口号
EXPOSE 4000
# 启动
CMD ["npm","run","start"]

假如 vue/react 项目 ​

nginx.conf ​

js
server {
    listen 8800;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

上传全部文件 ​

bash
# build stage
FROM node:lts-alpine AS build-stage
WORKDIR /app
COPY package.json ./
RUN npm install -g pnpm && pnpm i
COPY . .
RUN pnpm build

# production stage
FROM nginx:stable-alpine AS production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 8800
CMD ["nginx", "-g", "daemon off;"]

上传 dist 目录 ​

bash
# 使用 Nginx 作为 Web 服务器
FROM nginx:1.21.3

# 在容器中创建一个工作目录
WORKDIR /frontend
COPY dist .
# # 将构建好的 React 应用复制到 Nginx 默认的静态文件目录
# COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 暴露端口
EXPOSE 8800

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

docker 下载依赖(docker pull ...) ​

bash
# 下载node
docker pull node

# 下载nginx
docker pull nginx

docker 构建 Image ​

bash
docker build -t 名称 .

  • 命令⾏启动 docker

  • 获取 images

bash
docker 名称
  • 启动 images
bash
docker run --name 容器名称 名称
  • 此时会启动⼀个 4000 端⼝号的容器, 但我们⽆法直接访问这个容器
  • 获取运⾏中的容器列表
bash
docker run --name 容器名称 名称
  • 获取所有容器列表
bash
docker ps -a
  • 停⽌容器
bash
docker stop 容器名称
  • 指定服务器端⼝号 并 转发到对应的容器
bash
docker run --name 容器名称 -p 4000:4000 -d 名称

创建不同版本的 Images ​

  • 修改 Dockfiles node 运⾏环境 16 版本
FROM node:16-alpine
  • 构建 Images
bash
docker build -t 名称 .
  • 构建 Images
bash
docker build -t 名称 .

修改代码重新构建 Images ​

  • 例如修改接⼝数据内容
bash
id: "3",
  • 重新构建 Images
bash
docker build -t 名称 .

删除 images ​

  • 未被容器使⽤的 images
bash
docker image rm 名称
  • 强制删除已经被使⽤的 images
bash
docker image rm 名称 --force
  • 删除⽆名字的 image
bash
docker image rm "id"

删除 container ​

  • 删除未被启动的 container
bash
docker container rm 容器名称
  • 删除已经启动的 container
bash
docker container rm 容器名称 --force

重置 docker ​

  • 重置 docker
bash
docker system prune -a
  • 确认是否清空
bash
yes

docker-compose.yaml ​

js
version: '3.8'
services:
  项目名称:
    build: ./目录名称
    container_name: 容器名称
    ports:
      - '4002:4000'
    volumes:
      - ./api:/app
      - /app/node_modules
  项目名称:
    build: ./目录名称
    container_name: 容器名称
    ports:
    - '8800:8800'
    stdin_open: true
    tty: true

启动 docker ​

  • 启动
bash
docker-compose up
  • 启动-上传项目
bash

docker-compose up -d
# OR
docker-compose up --build
  • 关闭
bash
docker-compose down
  • 关闭容器 并 删除 image 并卸载 volumns
bash
docker-compose down --rmi all -v
  • 重置 docker
bash
docker system prune -a

其他(部署 react 项目) ​

  • 创建项⽬
bash
npm create vite@latest my-app
cd my-app
npm install
  • docker 部署需要执⾏三步

INFO

  1. 创建 Dockerfile 并配置
  2. 创建.dockerignore 忽略某些⽂件
  3. 创建 docker-compose.yaml 并配置
  • .dockerignore
bash
node_modules
*.md
  • vite.config.js 配置前端启动端⼝
js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 3000,
  },
});
  • Dockerfile

TIP

跟上面的配置一样