新增docker文件及文档

This commit is contained in:
街角小林 2024-04-11 09:39:42 +08:00
parent 5bff885c00
commit d9300395ff
6 changed files with 142 additions and 2 deletions

4
Dockerfile Normal file
View File

@ -0,0 +1,4 @@
FROM nginx
RUN mkdir /app
COPY ./dist ./index.html /app/
COPY nginx.conf /etc/nginx/nginx.conf

30
nginx.conf Normal file
View File

@ -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;
}
}
}

View File

@ -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:

View File

@ -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>

View File

@ -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 中安装:

View File

@ -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