新增docker文件及文档

wallace-yang · Apr 11, 2024 · d930039 · d930039
1 parent 5bff885
commit d930039
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 2 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,4 @@
+FROM nginx
+RUN mkdir /app
+COPY ./dist ./index.html /app/
+COPY nginx.conf /etc/nginx/nginx.conf
diff --git a/nginx.conf b/nginx.conf
@@ -0,0 +1,30 @@
+user  nginx;
+worker_processes  1;
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+events {
+  worker_connections  1024;
+}
+http {
+  include       /etc/nginx/mime.types;
+  default_type  application/octet-stream;
+  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+  access_log  /var/log/nginx/access.log  main;
+  sendfile        on;
+  keepalive_timeout  65;
+  server {
+    listen       80;
+    server_name  localhost;
+    location / {
+      root   /app;
+      index  index.html;
+      try_files $uri $uri/ /index.html;
+    }
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+      root   /usr/share/nginx/html;
+    }
+  }
+}
diff --git a/web/src/pages/Doc/en/deploy/index.md b/web/src/pages/Doc/en/deploy/index.md
@@ -63,6 +63,41 @@ However, this requires backend support, as our application is a single page clie
 
 ## Docker
 
+### Official image
+
+Starting from `v0.9.10+`, the author also provided a Docker image for use.
+
+```bash
+docker run -d -p 8080:80 wanglin/mind-map:latest
+```
+
+This image uses Nginx to deploy applications and will provide access on port 80. Page not found or 404 error will return 'index. html'.
+
+You can also package the image yourself, and the 'Dockerfile' and 'nginx.conf' files are provided in the project root directory, which you can modify according to your own needs.
+
+Firstly, it is necessary to package the 'web' project locally:
+
+```bash
+cd web
+npm run build
+```
+
+Then execute the image packaging command in the project root directory:
+
+```bash
+docker build . -t mind-map:0.9.10
+```
+
+You can modify the image name of the above command yourself. After packaging, you can run the following command to start the container:
+
+```bash
+docker run -d -p 8080:80 mind-map:0.9.10
+```
+
+Browser input `http://localhost:8080` You can access it now.
+
+### Unofficial image
+
 > Thank you very much [水车](https://github.com/shuiche-it), This section is written by him, and the corresponding Docker package is also maintained by him.
 
 Install directly from Docker Hub:

diff --git a/web/src/pages/Doc/en/deploy/index.vue b/web/src/pages/Doc/en/deploy/index.vue
@@ -39,6 +39,24 @@ npm link simple-mind-map
 </code></pre>
 <p>However, this requires backend support, as our application is a single page client application. If the backend is not properly configured, users will return 404 when accessing sub routes directly in the browser. Therefore, you need to add a candidate resource on the server that covers all situations: if the 'URL' cannot match any static resources, the same 'index. html' page should be returned.</p>
 <h2>Docker</h2>
+<h3>Official image</h3>
+<p>Starting from <code>v0.9.10+</code>, the author also provided a Docker image for use.</p>
+<pre class="hljs"><code>docker run -d -p 8080:80 wanglin/mind-map:latest
+</code></pre>
+<p>This image uses Nginx to deploy applications and will provide access on port 80. Page not found or 404 error will return 'index. html'.</p>
+<p>You can also package the image yourself, and the 'Dockerfile' and 'nginx.conf' files are provided in the project root directory, which you can modify according to your own needs.</p>
+<p>Firstly, it is necessary to package the 'web' project locally:</p>
+<pre class="hljs"><code><span class="hljs-built_in">cd</span> web
+npm run build
+</code></pre>
+<p>Then execute the image packaging command in the project root directory:</p>
+<pre class="hljs"><code>docker build . -t mind-map:0.9.10
+</code></pre>
+<p>You can modify the image name of the above command yourself. After packaging, you can run the following command to start the container:</p>
+<pre class="hljs"><code>docker run -d -p 8080:80 mind-map:0.9.10
+</code></pre>
+<p>Browser input <code>http://localhost:8080</code> You can access it now.</p>
+<h3>Unofficial image</h3>
 <blockquote>
 <p>Thank you very much <a href="https://github.com/shuiche-it">水车</a>, This section is written by him, and the corresponding Docker package is also maintained by him.</p>
 </blockquote>

diff --git a/web/src/pages/Doc/zh/deploy/index.md b/web/src/pages/Doc/zh/deploy/index.md
@@ -63,7 +63,42 @@ const router = new VueRouter({
 
 ## Docker
 
-> 非常感谢[水车](https://github.com/shuiche-it)，本小节由他编写，对应的 Docker 包也由他维护。
+### 官方镜像
+
+从 `v0.9.10+` 开始作者也提供了一个 `docker` 镜像可供使用。
+
+```bash
+docker run -d -p 8080:80 wanglin/mind-map:latest
+```
+
+该镜像使用 `Nginx` 部署应用，会在 `80` 端口提供访问。页面未找到 或 404 错误会返回 `index.html`。
+
+你也可以自己打包镜像，项目根目录下提供了 `Dockerfile` 和 `nginx.conf` 文件，你可以根据自己的需求来修改。
+
+首先需要在本地打包 `web` 项目：
+
+```bash
+cd web
+npm run build
+```
+
+然后在项目根目录执行镜像打包命令：
+
+```bash
+docker build . -t mind-map:0.9.10
+```
+
+上述命令的镜像名称你可以自行修改，打包完后可以运行以下命令启动容器：
+
+```bash
+docker run -d -p 8080:80 mind-map:0.9.10
+```
+
+浏览器输入`http://localhost:8080`就能访问到了。
+
+### 非官方镜像
+
+> 非常感谢[水车](https://github.com/shuiche-it)维护的非官方镜像。
 
 直接从 Docker hup 中安装：
 

diff --git a/web/src/pages/Doc/zh/deploy/index.vue b/web/src/pages/Doc/zh/deploy/index.vue
@@ -39,8 +39,26 @@ npm link simple-mind-map
 </code></pre>
 <p>不过这需要后台支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问子路由时会返回404，所以呢你要在服务端增加一个覆盖所有情况的候选资源：如果<code>URL</code>匹配不到任何静态资源，则应该返回同一个<code>index.html</code>页面。</p>
 <h2>Docker</h2>
+<h3>官方镜像</h3>
+<p>从 <code>v0.9.10+</code> 开始作者也提供了一个 <code>docker</code> 镜像可供使用。</p>
+<pre class="hljs"><code>docker run -d -p 8080:80 wanglin/mind-map:latest
+</code></pre>
+<p>该镜像使用 <code>Nginx</code> 部署应用，会在 <code>80</code> 端口提供访问。页面未找到 或 404 错误会返回 <code>index.html</code>。</p>
+<p>你也可以自己打包镜像，项目根目录下提供了 <code>Dockerfile</code> 和 <code>nginx.conf</code> 文件，你可以根据自己的需求来修改。</p>
+<p>首先需要在本地打包 <code>web</code> 项目：</p>
+<pre class="hljs"><code><span class="hljs-built_in">cd</span> web
+npm run build
+</code></pre>
+<p>然后在项目根目录执行镜像打包命令：</p>
+<pre class="hljs"><code>docker build . -t mind-map:0.9.10
+</code></pre>
+<p>上述命令的镜像名称你可以自行修改，打包完后可以运行以下命令启动容器：</p>
+<pre class="hljs"><code>docker run -d -p 8080:80 mind-map:0.9.10
+</code></pre>
+<p>浏览器输入<code>http://localhost:8080</code>就能访问到了。</p>
+<h3>非官方镜像</h3>
 <blockquote>
-<p>非常感谢<a href="https://github.com/shuiche-it">水车</a>，本小节由他编写，对应的 Docker 包也由他维护。</p>
+<p>非常感谢<a href="https://github.com/shuiche-it">水车</a>维护的非官方镜像。</p>
 </blockquote>
 <p>直接从 Docker hup 中安装：</p>
 <pre class="hljs"><code>docker run -d -p 8081:8080 shuiche/mind-map:latest