docker的那些事儿

写给前端不懂docker的同学～

本文讲解：项目采用前后端不分离的架构，并使用docker进行本地开发时，应如何操作。

项目技术栈

前端：Nextjs 14

后端：php-8.3

数据库：Mysql 8

项目整体采用前后端不分离的架构模式进行开发

项目根文件夹下包含：

• api 后端业务代码文件夹
• web 前端业务代码文件夹
• docker-compose.yml文件，用于配置docker服务，如 web 服务、api 服务、mysql 服务。

前置准备

电脑安装 Git、VSCode应用。

开发流程：（macOS Apple M2版本）

1. SSH

        本地生成ssh，并在云端代码托管平台 (如github) 添加ssh。

2. 拉取代码

        通过使用git clone命令拉取云端代码到本地。

3. Docker

        下载 Docker，下载入口： https://www.docker.com

        3.1 修改 Docker 镜像源

         在国内从 Docker Hub 拉取镜像时很容易超时，所以建议修改docker的镜像源。

        修改路径：Docker Desktop → Settings → Resources → Docker Engine

                         

         国内镜像源列表：

{
  "registry-mirrors": [
    "https://docker.hpcloud.cloud",
    "https://docker.m.daocloud.io",
    "https://docker.unsee.tech",
    "https://docker.1panel.live",
    "http://mirrors.ustc.edu.cn",
    "https://docker.chenby.cn",
    "http://mirror.azure.cn",
    "https://dockerpull.org",
    "https://dockerhub.icu",
    "https://hub.rat.dev",
    "https://proxy.1panel.live",
    "https://docker.1panel.top",
    "https://docker.m.daocloud.io",
    "https://docker.1ms.run",
    "https://docker.ketches.cn"
  ]
}

        3.2 授予 Docker Desktop 访问本地目录的权限

                修改路径：Docker Desktop → Settings → Resources → File sharing

                选择并确认你的项目所在的目录已被添加到共享路径列表

                保存 & 重启 Docker Desktop

 4. 修改项目中 docker-compose.yml 文件

        我的 Mac 是 M1/M2 芯片（arm64 架构）

        所以，我拉取的镜像需要强制用 amd64 版本的镜像进行构建。

        将所有服务使用platform字段进行配置

services:

  web:
    build:
      context: ./web
      args:
        NEXT_PUBLIC_API_URL: ${NEXT_PUBLIC_API_URL}
    platform: linux/amd64  # 强制用 amd64 架构构建，保证跨平台一致
    restart: always
    ...

  mysql:
    image: mysql:8
    platform: linux/amd64  # 保证用 amd64 镜像，避免 M1/M2 拉 arm64 出现兼容性问题
    restart: unless-stopped
    ....



   ....

5. 构建

     在项目根目录下使用命令行运行：        

docker compose build 

      ⚠️注意：Next.js 14 默认在 next build 阶段做 ESLint 校验。所以代码中不要有 js 的语法错误

    构建成功后，然后在 Docker Desktop 的 Images 中就可以看到构建的镜像了。

6. 启动容器

    在项目根目录下使用命令行执行：

docker compose up -d  //启动容器
docker ps         //查看容器的状态，

    可以看到类似下面的提示，说明启动成功。

CONTAINER ID   IMAGE              COMMAND       PORTS                  NAMES
abcd1234efgh   your-project:tag   "pnpm start"  0.0.0.0:3000->3000/tcp nextjs-dev

7. 使用 VSCode 进行本地开发

         这里使用 “容器里跑，宿主机里写代码” 的开发模式。

         代码存在本机，VS Code 正常打开编辑。方法如下：

        1. 下载 VSCode 插件

                WSL 、Dev Containers

        2. Open Folder in Container

              插件下载成功后，通过Open Folder in Container选项，打开本地文件，它会自动把你选择的本地项目目录挂载到容器里（/workspaces/...），并且可以执行 postCreateCommand（比如自动安装依赖）。 如下所示：      

        3. 启动 Next.js 服务

        打开项目后，进入web项目的目录下，执行下面的命令，安装依赖，启动nextjs服务。

pnpm install    //下载node_modules
pnpm dev        //启动nextjs服务

        执行成功后，就可以调试你的代码啦！

---

FAQ

问题 1 ：

执行 pnpm install 的时候，如果出现 VS Code Dev Container + pnpm + 挂载目录 组合下的文件系统问题：

Unknown system error -116: Unknown system error -116, copyfile '/workspaces/.pnpm-store/v3/files/cf/xxxxx' -> '/workspaces/m.....

不是你的代码错了，而是容器里的文件系统和宿主机挂载配合时出现了 I/O 错误。

解决：

在web项目根目录加 .npmrc文件，内容如下：

node-linker=hoisted
package-import-method=copy