update

onresize · Apr 11, 2024 · 6d549ae · 6d549ae
1 parent 0ce9004
commit 6d549ae
Show file tree

Hide file tree

Showing 10 changed files with 215 additions and 3 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -51,7 +51,7 @@ export default defineUserConfig({
 
   head: [
     // 站点图标
-    ['link', { rel: 'icon', href: '/web-blogs/image.png' }],
+    ['link', { rel: 'icon', href: '/web-blogs/webp.png' }],
     // iframe优化
     ['link', { rel: 'dns-prefetch', href: '//onresize.github.io' }],
     ['link', { rel: 'preconnect', href: 'https://onresize.github.io' }],
@@ -109,7 +109,7 @@ export default defineUserConfig({
 
   // 主题
   theme: defaultTheme({
-    logo: '/image.png',
+    logo: '/image.webp',
 
     lastUpdatedText: '上次更新',
     contributorsText: '贡献者',

diff --git a/docs/.vuepress/config/silder.js b/docs/.vuepress/config/silder.js
@@ -17,6 +17,7 @@ export default [
       '/技术总结/踩坑总结/vercel部署node项目',
       '/技术总结/踩坑总结/git篇',
       '/技术总结/踩坑总结/nginx篇',
+      '/技术总结/踩坑总结/docker入门',
       '/技术总结/踩坑总结/HTTP',
       '/技术总结/踩坑总结/如何检测网页http版本',
       '/技术总结/踩坑总结/referrer',

diff --git a/docs/.vuepress/public/AA_mdPics/docker1.png b/docs/.vuepress/public/AA_mdPics/docker1.png
diff --git a/docs/.vuepress/public/AA_mdPics/dockhub.png b/docs/.vuepress/public/AA_mdPics/dockhub.png
diff --git a/docs/.vuepress/public/image.png b/docs/.vuepress/public/image.png
diff --git a/docs/.vuepress/public/image.webp b/docs/.vuepress/public/image.webp
diff --git a/docs/README.md b/docs/README.md
@@ -2,7 +2,7 @@
 home: true
 title: null
 heroText: .
-heroImage: /image.png
+heroImage: /image.webp
 tagline: 💻学习📝记录🔗分享
 actions:
   - text: ✨开始阅读 →

diff --git a/docs/技术总结/踩坑总结/docker入门.md b/docs/技术总结/踩坑总结/docker入门.md
@@ -0,0 +1,105 @@
+---
+title: docker入门
+lang: zh-CN
+feed:
+  enable: true
+description: docker入门
+---
+
+# docker入门
+> 本文作者：[onresize](https://github.com/onresize)
+
+[docker中文指南](https://yeasy.gitbook.io/docker_practice)
+<br />
+[docker入门实践](https://docker.easydoc.net/)
+<br />
+[Harbor私服镜像存储仓库](https://goharbor.io/)
+<br />
+[笔记参考](https://gitee.com/onresize/docker-compose)
+
+> 本文针对前端开发做的一篇docker入门总结
+
+- #### Docker通常用于如下场景：
+  - 将项目通过  `docker` 的方式部署到测试、预演、生产环境中
+  - web应用的自动化打包和发布；
+  - 自动化测试和持续集成、发布；
+
+- #### Docker系统有两个程序：
+- docker服务端和docker客户端。其中docker服务端是一个服务进程，管理着所有的容器。docker客户端则扮演着docker服务端的远程控制器，可以用来控制docker的服务端进程。大部分情况下，docker服务端和客户端运行在一台机器上。
+
+- #### 安装 Docker Desktop
+- 这里以 `windows` 为例： 
+[桌面版](https://www.docker.com/products/docker-desktop)
+- 安装好后、启动程序如果一直转圈显示启动引擎中、在对应的c盘下找到 `\用户\AppData\Roaming\Docker\settings.json` 文件、将 `useWindowsContainers`改为 `false`
+
+- #### windows上 [Docker Desktop汉化](https://github.com/hongmengshikong/DockerDesktopChinese)
+
+- #### 前端用docker打包dist镜像
+1.根目录下创建 `Dockerfile` 文件、配置如下：
+```bash
+# nginx打包
+FROM nginx:1.22.1
+EXPOSE 80
+
+# 替换服务器上的nginx默认配置
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+RUN rm -rf /usr/share/nginx/html
+RUN mkdir /usr/share/nginx/html
+
+# 将根目录打包好的buildBundle（默认是dist）文件夹下的所有文件复制到服务器下的指定目录
+COPY ./buildBundle /usr/share/nginx/html
+
+# 运行
+CMD ["nginx", "-g", "daemon off;"]
+```
+2.根目录下创建 `nginx.conf` 文件、用于替换线上的 nginx 配置 
+```bash
+server {
+  listen 80;
+  listen [::]:80;
+  server_name localhost;
+
+  location / {
+    root /usr/share/nginx/html;
+    try_files $uri $uri/ /index.html;
+    index index.html index.htm;
+  }
+
+  # 配置反向代理
+  location /api {
+    add_header Cache-Control no-cache;
+    add_header Pragma no-cache;
+    add_header Expires 0;
+    proxy_pass https://mock.mengxuegu.com/mock/62abda3212c1416424630a45;
+  }
+
+  error_page 404 /404.html;
+
+  error_page 500 502 503 504 /50x.html;
+  location = /50x.html {
+    root /usr/share/nginx/html;
+  }
+}
+```
+3.在项目根目录下执行先打包成dist、再去执行 `docker build -t react-ts-vite-admin:1.0.0 .` 注意最后有个点、-t后面是`镜像名字:版本号`、打包好镜像后、可以在docker desktop的镜像中查看、也可以使用命令：`docker images` 查看
+
+4.在docker desktop的镜像中点击右侧的start、设置对应的名字和端口号、之后会自动新建一个容器并运行nginx、在容器中就能看到详情、这个时候本地浏览器就能访问 `http://localhost:设置的端口号`、如下图：
+
+<p align="center">
+  <img src="/AA_mdPics/docker1.png">
+</p>
+
+- #### 发布到[docker hub镜像存储库](https://hub.docker.com/)
+  - 先去docker hub注册账号
+  - 第一次登录使用： `docker login -u <你的docker hub的用户名>`、接着输入密码、成功登录会显示Login Succeeded字样
+  - 新建一个tag：`docker tag react-ts-vite-admin:1.0.0 onresize/react-ts-vite-admin:1.0.0`、这里react-ts-vite-admin:1.0.0是我本地的镜像、onresize/react-ts-vite-admin:1.0.0是要发布到docker hub的tag名称、根据实际替换
+  - 推送到docker hub上： `docker push onresize/react-ts-vite-admin:1.0.0`
+  - docker hub公开存储库后、别人就能用 `docker pull onresize/react-ts-vite-admin` 去拉取你的镜像运行、环境和你本地是一致的
+  - 更新镜像可以通过 `docker push onresize/react-ts-vite-admin:tagname`、tagname换成指定的版本号、也可以通过docker desktop里面push更新
+
+<p align="center">
+  <img src="/AA_mdPics/dockhub.png">
+</p>
+
+代码示例：[react-ts-vite-admin](https://github.com/onresize/react-ts-vite-admin)
diff --git a/docs/技术总结/踩坑总结/iframe有什么问题.md b/docs/技术总结/踩坑总结/iframe有什么问题.md
@@ -13,3 +13,5 @@ description: iframe有什么问题
  - iframe是一种天然的沙箱、web容器
 
 - 增加使用体验、使用[iframe-resizer](https://github.com/davidjbradshaw/iframe-resizer)让第三方页面嵌入后、随着第三方页面自适应大小、同时还可以与其通信
+
+- 存在的问题：`前置缓存相关`, `非dom节点相关`, `样式处理相关`
diff --git a/docs/技术总结/踩坑总结/nginx篇.md b/docs/技术总结/踩坑总结/nginx篇.md
@@ -1010,3 +1010,107 @@ server {
 }
 ```
 :::
+
+
+### `8.一个nginx配置多个项目的几种方式`
+- 文件目录如下
+```text
+-----------------------
+|-- html
+|  |-- index.html
+|  |-- pc
+|  |  |-- dist1
+|  |  |  |-- index.html
+|  |  |-- dist2
+|  |  |  |-- index.html
+-----------------------
+```
+- 1. 同ip同端口、不同路径
+::: details
+```bash
+http {
+  server {
+    # 项目1
+    location / {
+      root html;
+      index index.html index.htm;
+    }
+
+    # 项目2
+    location /dist1 {
+      root html/pc;
+      try_files $uri $uri/ /dist1/index.html;
+      index index.html index.htm;
+    }
+
+    # 项目3
+    location /dist2 {
+      root html/pc;
+      try_files $uri $uri/ /dist2/index.html;
+      index index.html index.htm;
+    }
+  }
+}
+```
+:::
+
+- 2. 同ip、不同端口
+::: details
+```bash
+http {
+  server {
+    listen 8888;
+    server_name localhost;
+
+    location / {
+      root html/pc/dist1;
+      index index.html index.htm;
+    }
+  }
+
+  server {
+    listen 9999;
+    server_name localhost;
+
+    location / {
+      root html/pc/dist2;
+      index index.html index.htm;
+    }
+  }
+}
+```
+:::
+
+### `9.vite.config.js与nginx配置代理`
+- vite.config配置
+```bash
+server: {
+    port: 9090,
+    cors: true, // 默认启用并允许任何源
+    open: true, // 在服务器启动时自动在浏览器中打开应用程序
+    //反向代理配置，注意rewrite写法
+    proxy: {
+      "/api": {
+        target: "http://xx.xx.xx.x1:8090", //代理接口
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, "/api"),
+      },
+      "/web": {
+        target: "http://xx.xx.xx.x2:8090", //代理接口
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/web/, ""),
+      },
+    },
+  },
+```
+
+- nginx配置
+```bash 
+location ^~ /api/ {
+	proxy_pass http://xx.xx.xx.x1:8090/api/;  # 转发地址
+}
+
+location ^~ /web/ {
+	proxy_pass http://xx.xx.xx.x2:8090/;  # 转发地址
+}
+```