121 lines
2.8 KiB
Markdown
121 lines
2.8 KiB
Markdown
# 制作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>可以把镜像用于实际开发和生产。
|