# 制作vue开发的docker镜像(node18.18.2+openresty1.21.4.2)

## 系统环境

- docker engine
- docker compose

## 制作过程

### 拉取node18.18.2镜像

```sh
docker pull node:18-bullseye
```

### 准备openresty源码

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

### 启动node容器

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

### 容器内环境

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

```sh
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
```

在容器内进行下面的操作

```sh
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
```

### 宿主机操作

```sh
# 创建一个开发目录
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`一行。

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

### 生成镜像

```sh
docker commit node-resty node-resty:18.18.2
```

### 提交到docker hub

```sh
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项目目录下。

```sh
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文件：

```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>可以把镜像用于实际开发和生产。