制作vue开发环境镜像(node18.18.2+openresty1.21.4.2)

wandoubaba / 2024-10-29

说明

按照本文过程制作后的镜像不是跨平台的，在arm64平台制作的镜像只能用于arm64平台，在amd64平台制作的镜像只能用于amd64平台。

系统环境

• docker engine
• docker compose

制作过程

拉取node18.18.2镜像

docker pull node:18-bullseye

准备openresty源码

curl -O https://openresty.org/download/openresty-1.21.4.2.tar.gz
tar zxvf openresty-1.21.4.2.tar.gz

启动node容器

docker run -itd --name=node-resty node:18-bullseye

容器内环境

如果宿主系统是deiban11就直接把sources.list复制到容器内，如果不是，就单独制作一个deiban11的sources.list文件复制到容器内

docker cp /etc/apt/sources.list node-resty:/etc/apt/
docker cp openresty-1.21.4.2 node-resty:/
docker exec -it node-resty bash

在容器内进行下面的操作

apt update
cd openresty-1.21.4.2
./configure -j2
gmake
gmake install
ln -sf /usr/local/openresty/bin/openresty /usr/local/bin/nginx
cd /
mkdir /app/web -p
exit

宿主机操作

# 创建一个开发目录
mkdir web
# 把nginx.conf文件复制到宿主
docker cp node-resty:/usr/local/openresty/nginx/conf/nginx.conf ./
# 把docker-entrypoint.sh复制到宿主
docker cp node-resty:/usr/local/bin/docker-entrypoint.sh ./

修改docker-entrypoint.sh文件，在exec "$@"一句之前加上nginx一行。

docker cp ./docker-entrypoint.sh node-resty:/usr/local/bin/

生成镜像

docker commit node-resty node-resty:18.18.2

提交到docker hub

docker login --username=<hub.docker.com的用户名>
docker tag node-resty:18.18.2 <docker仓库>/node-resty:18.18.2
docker push <docker仓库>/node-resty:18.18.2

使用方法

假设在某一个vue项目目录下。

docker pull <docker仓库>/node-resty:18.18.2
# npm install
docker run -it --rm --name=node-resty -w /app/web -v ./:/app/web <docker仓库>/node-resty:18.18.2 npm install
# npm run build
docker run -it --name=node-resty -w /app/web -v ./:/app/web -v ./dist:/usr/local/openresty/nginx/html -p 80:80 <docker仓库>/node-resty:18.18.2 npm run build

可以看到，上面的操作明显太麻烦了。我们可以试着写一个docker-compose.yml文件：

version: "3.1"

services:
  node-resty:
    image: <docker仓库>/node-resty:18.18.2
    container_name: node-resty
    ports:
      - 80:80
    restart: always
    volumes:
      - ./docker-entrypoint.sh:/usr/local/bin/docker-entrypoint.sh
      - ./:/app/web
      - ./nginx.conf:/usr/local/openresty/nginx/conf/nginx.conf
      - ./dist:/usr/local/openresty/nginx/html
    working_dir: /app/web
    stdin_open: true
    command: ["npm", "run", "build"]

还可以通过编写shell脚本的方式解锁更多开发和发布姿势。

参照https://git.wandoubaba.com/wandoubaba/docker-vue3可以把镜像用于实际开发和生产。