docker-vue3

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 完成"

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'
+          ]
+        }
       ]
     },
   },

docs/docker/README.md

@@ -0,0 +1 @@
+# Docker相关

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