diff --git a/build b/build new file mode 100755 index 0000000..824f9a2 --- /dev/null +++ b/build @@ -0,0 +1,18 @@ +#!/bin/bash + +# 执行 yarn build +yarn build + +# 检查执行结果 +if [ $? -ne 0 ]; then + echo "yarn build 失败" + exit 1 +fi + +# 执行 rm -rf ../dist +rm -rf ../dist + +# 执行 mv dist ../ +mv dist ../ + +echo "build 完成" \ No newline at end of file diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 83aaca7..51a617a 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -24,7 +24,8 @@ module.exports = { nav: [ { text: '首页', link: '/' }, { text: 'FreeSWITCH', link: '/freeswitch/' }, - { text: 'PHP', link: '/php/' } + { text: 'PHP', link: '/php/' }, + { text: 'Docker', link: '/docker/' } ], sidebar: { '/freeswitch/': [ @@ -58,6 +59,12 @@ module.exports = { 'openresty', 'php82' ], + '/docker/': [ + '../', + '', + 'command', + 'vue' + ], '/': [ '', { @@ -83,6 +90,15 @@ module.exports = { '/php/php82' ] }, + { + title: 'Docker精选', // 必要的 + collapsable: false, // 可选的, 默认值是 true, + sidebarDepth: 1, // 可选的, 默认值是 1 + children: [ + '/docker/command', + '/docker/vue' + ] + } ] }, }, diff --git a/docs/docker/README.md b/docs/docker/README.md new file mode 100644 index 0000000..a670f41 --- /dev/null +++ b/docs/docker/README.md @@ -0,0 +1 @@ +# Docker相关 diff --git a/docs/docker/vue.md b/docs/docker/vue.md new file mode 100644 index 0000000..ae99a46 --- /dev/null +++ b/docs/docker/vue.md @@ -0,0 +1,120 @@ +# 制作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= +docker tag node-resty:18.18.2 /node-resty:18.18.2 +docker push /node-resty:18.18.2 +``` + +### 使用方法 + +假设在某一个vue项目目录下。 + +```sh +docker pull /node-resty:18.18.2 +# npm install +docker run -it --rm --name=node-resty -w /app/web -v ./:/app/web /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 /node-resty:18.18.2 npm run build +``` + +可以看到,上面的操作明显太麻烦了。我们可以试着写一个docker-compose.yml文件: + +```yml +version: "3.1" + +services: + node-resty: + image: /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脚本的方式解锁更多开发和发布姿势。 + +参照可以把镜像用于实际开发和生产。